In this blog, I will show how we can create a new React Application and we will write our first program. Let us begin by setting up our development environment. For React we need NodeJs need to be installed. For NodeJs go to https://nodejs.org/en/ and download and install the latest stable release.
Method 1: Using npx
To create a new React application we will be making use of create-react-app. The create-react-app is a command-line interface tool that allows users to quickly create and run react applications with low configurations ie.., we simply run the command and the entire react project will be created. The command is as followsnpx create-react-app <app_name>
for example, npx create-react-app helloworld
To run our HelloWorld application we need to navigate inside our application. Once move inside the folder we need to run the command
npm start
the above command will open the browser on localhost with port 3000 with our HelloWorld application. We will see the default page of the React. Below is the default page of the React Application and we will see that edit src/app.js for further.
So I am going to edit the src.app.js and adding some text `Hello Harikrishnan` and saving it.
What is npx?
npx is npm package runner which gets installed when we install node. That is why we are directly able to run create-react-app without having to install it.Method 2: Create using npm
We have one more method to create a new react application. In this approach, we are using npm and we need to install npm globally and then use the package to generate the projects.So the first step is to create-react-app package globally and then use the package to generate the projects. Moving to the first step
npm install create-react-app -g
Once the above command is executed we can use the second command as below
create-react-app <project_name>
For example, create-react-app HelloWorld
Folder Structure
1. Package.json
This file contains the dependencies and the scripts required for the project.2. Node_moduels
This is the folder in which all the dependencies are installed, it is generated when we run the create-react-app command or when we run npm install.3. Public
This folder contains 2 files, in that manifest.json is the concern with Progressive Web Applications.Next one is the index.html is the only HTML file which we have in our application, we are going to build the Single Page Applications and this is the single page. The view might dynamically change in the browser but this is the index.html file that gets served off. Normally we are not going to update the index.html file. We want to React to control the UI. For that purpose, we have one div tag with id="root", at a specific time the React Application takes over this div tag and is ultimately responsible for the UI.
4. Src
This is the folder we are going to work mostly. The starting point of our application is index.js.In index.js, we specify the root component with is <App> component and the DOM element which will be controlled by React. The DOM element in our example is an element with an id of 'root'. Please go through the below image.
For our application is rendered inside the DOM node. That brings us to the App component which is present in App.js. This is also the file we edited already, which is responsible for the HTML which is rendering inside the browser. In other words, the app component represents the view which we see in the browser. With app.js create-react-app also generate a CSS file for styling. There is an App.test.js file for unit testing. CSS files ie., app.css contain the classes which are applied in the app.css and the test file contains the simple test case. We also have and index.css file which will apply styles to the body tag and the logo SVG which is referenced in the app component.
Finally, we have serviceWorker.js which is again a concern with the Progressive Web Application.
https://github.com/harikrishnanrlive/react-tutorial/tree/master/1_hello_wrold
So here I am concluding this blog, we see a few more details about React soon.
Comments
Post a Comment