Understanding React JS🔍
What Is React JS ?
React JS is a most popular front-end development framework written in JavaScript. In the beginning It was developed by Facebook for their own development purposes. In 2013 it was released for developers. Since 2013, React JS has achieved a high popularity among other front-end development frameworks. Why?
🔵 It offers most simple and flexible way to handle the front-end development process.
🔵 Reusable components (React is a component based framework.)
🔵 React can load data to a web page without refreshing or reloading. It increases the scalability of web application.
Let’s see how React work.
React consist with components. There are two types of components.
· Class components
· Functional components
You can use either one or both types of components in a React project.
A Component has two main content. State and Props. We use states to store information of components that may change over the time.
Props is a keyword in React that stand for properties. Props are used to pass some information from one component to another component.
Let Me explain what happen in React through a diagram. Let’s consider about an simple online book shop application.
A react application is a single page application. It means web application contains single html file and according to user request data will be loaded and update the page instead of loading new pages. So in the above diagram our application contains a single html file named index.html.
That file contains a div tag with id called “app”. We have imported a file name index.jsx. What is the purpose of that file?🤔
In this file where we says what should be rendered and where to render. Here we say render whatever contained in App component to id called “app”. Now you should realize index.html file had a div tag called “app” and we are saying load the content of App component to that div tag.
What is App component Contained?
It can contain a Class component or a Functional component that returns something in jsx syntax.
(In react, we do not use html. instead we use jsx. Let’s talk about it in upcoming articles.)
So it will be rendered to html and display in the index.html file. Pretty good. Right?
But React JS is not made in that way. In the beginning I mentioned react is component based. So we can use it more efficiently.
In App.js file we can import multiple components and we can specially say what should be loaded and when should be loaded.
Here, we have defined few routes here. Do not worry about how to define them and here we are talking about how react works. If you worried, for now just know we can define those routes easily using react router.
Now let me explain what happen here. Imagine a user want to login to our application. So he calls “/login” route using login button. Then our App component knows exactly what component should pass to index.js. Login component contains a login form. So App.js file will pass the Login component to index.js and in the index.html under the “app” div tag Login component will be rendered and display the login form to user.
Then the user may want to check all books. So user will request “/books” route. Then App component will pass the Books Component to index.js file. So it will render the jsx content to html and display them in the index.html. It is the same page and only data will be change. No page refresh or reload occurs. So we rendered our Books component and display. But do we directly call details of every book in the Books component?🤔
No. We just import another child component called BookList. That BookList component contains details of every book. We pass those information to Books component using props. So all we need to do is import it and return those data in Books component. In React we can break our components in to child components. This kind of component handling reduces the complexity of the application.
Now you should be clearly understood how react works and why it says React is a component based framework.
In the next article, let’s see how to get started with React. Happy Hacking..! 😎💻
