Read | Practice | Advance
React has a component-based architecture. You can break down your large application into smaller components. For example, a typical web application has the following top-level components.
You can even decompose these top-level components to further smaller components.We can view these components as a component tree like below:
Lets look at how it works under the hood.
Consider the above diagram. Each of the above components are responsible to create a virtual DOM which contains new and old state. If the new state does not match with the old state (any change in the state), then it will update the real DOM corresponding to that particular UI part only not the whole DOM tree.
DOM manipulation is very costly so by using the above mechanism it renders the UI efficiently.
There are few ways you can start your ReactJS project. You can create a React app by simply adding required files or libraries from CDN or can install them by using NPM or you can use create-react-app cli command to generate all the boilerplate code for you within few seconds. For simplicity we will use the last option.
Before we start, I assume that you have
If you don’t have NodeJS installed in your machine, please install it first. Go to https://nodejs.org/en/ and download the latest stable version for your OS.
Now open up your command prompt or terminal and write the following command
npm I -g create-react-app
So friends, we are now ready to create our first React app. Excited? Let’s jump onto it.
Run the following command to create the React app.
It will create a new folder named hello-world that contain our React app with includes
Now to run our application type the following commands
cd hello-world npm start
It will launch the development server and open up your default browser pointing to localhost:3000 with our application running.
That’s super easy, isn’t it?