What is React?
Now you may ask why should I use React? I can use any framework I need and they have solutions for some very important problems. So why should I use a library instead of a framework? Now the answer to your question is simple. When we use frameworks we have to code in a certain way. If we code a slightly different way than the framework wants us to do, then the project may crash . In one sentence frameworks are not flexible.
On the other hand you can use React in a very flexible way. It is a small library which focuses on doing one thing and it does that really well. And the one thing is Building User Interfaces. So if you need something lightweight and flexible you know what to choose.
How React Works?
At its very core, React basically maintains a tree . Think of HTML code as a tree. In fact, that is exactly how the browser treats DOM . React actually creates a virtual tree consisting of the changes done on the code and the with the help of diff algorithm it compares it with the actual tree and finds out where the change is made. Then it pushes only those changes which is actually done.
React is Nothing But Components
How To Create A React App?
It’s really very simple. You just have to open your favorite code editor or command prompt and go to the folder in which you have all of your projects.
Then type npx create-react-app my-app (in place of my app you can use your app name)
Then cd my-app to actually go to the app folder
and at last npm start to run the app.
Name Has To Start With a Capital Letter
The first letter of a name being a capital letter is one kind of requirement for React. Because when using react we will be dealing with a lot of HTML elements as well as React elements. Now a JSX compiler will consider the names with small letters as an HTML element and which is what we don’t want to happen. So if we want to make our life easier we will have to start a name with capital letter in React.
Since React is nothing but component we should learn how to cerate a component. The easiest way to create a component is using hook based components. Which is super easy. Now give a small amount of attention below,
<h1>This is a component </h1>
This is literally a component named App. Now you see how easy it was to create a component. And yes if you are thinking that it’s nothing but function then you are absolutely right components are functions.
Components Vs Elements
Sometimes people get confused with components and elements. Thy often mixed up between this two. Now listen carefully ,
“A React component is nothing but a template or a function(or class) where you write your code. And elements are those codes which get returned from a component. It’s an object that virtually describes the DOM nodes that a component represents.”
Why Use Components?
You may ask why should you use components. And the answer is very simple. A component is reusable. You can use one component on various occasions. It keeps your application clean. What you do is you divide your application to some small parts with components and then use them with the help of props and make your web applications. Which makes your work cleaner and your code more reusable. If your code gets complex, you can always create a new component and divide the existing codes into some small pars and use them together.