Earlier, we created a React application with plain JavaScript; now we need to do the same with React and Firebase setup with using node. For this, we must have Node.js and npm installed in our system; if not, first download the Node.js from https://nodejs.org/en/download/. Once you are done with the installation, run the following command to ensure that node and npm are installed properly:

For node, use this:

node -v

For npm, use the following:

npm -v

The output of the command should be as follows:

Now we need to install the create-react-app module, which provides the initial and default setup, and gives us a quick start to the React app. Run the following command in your CMD, and it will install the create-react-app module globally (that is, with -g or --global appended to the command):

npm install -g create-react-app 
or 
npm i -g create-react-app

Once the installation is done, run the next command in your local directory where we need to create a project; that will generate the quick start project for React with no build configuration:

create-react-app <project-name> 
or
create-react-app login-authentication

This is how our folder structure looks after the installation is done:

Here, we are done with the setup of React; now, we install the firebase npm package and integrate our existing application.

Run the following command to install the firebase npm package:

npm install firebase --save

After installing firebase, create a folder called firebase inside the src folder.

In the src folder, create a file called firebase-config.js, which will host the configuration details of our project:

import firebase from 'firebase';

const config = {
 apiKey: "AIzaSyDO1VEnd5VmWd2OWQ9NQuh-ehNXcoPTy-w",
 authDomain: "demoproject-7cc0d.firebaseapp.com",
 databaseURL: "https://demoproject-7cc0d.firebaseio.com",
 projectId: "demoproject-7cc0d",
 storageBucket: "demoproject-7cc0d.appspot.com",
 messagingSenderId: "41428255556"
};
firebase.initializeApp(config);

export default firebase;

Similarly, we need to integrate our existing component view ticket and addTicket in the node using the import and export keywords, and using the npm command, we need to install React and firebase modules and their dependencies.

This how your package.json should look like:

//package.json
{
 "name": "login-authentication",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "firebase": "^4.8.0",
 "react": "^16.2.0",
 "react-dom": "^16.2.0",
 "react-router-dom": "^4.2.2",
 "react-scripts": "1.0.17",
 "react-toastr-basic": "^1.1.14"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
 }
}

Also, this is how the application folder structure looks after integrating the existing application: