In this blog, we will have a comprehensive discussion about React to understand what is going on behind the scenes. The objective of this blog is to understand how React works internally. We will not introduce JSX. You can use React without pure React.
What is Pure React
To set up the page for the view and rendering your page into a browser, we will be using two libraries: React and ReactDOM. React is the library for creating views. ReactDOM is the library to render UI in the browser.
Note: React and ReactDOM were split into two packages from version 0.14. The release notes state: “The beauty and the essence of React have nothing to do with browsers or the DOM... This [splitting into two packages] paves the way to writing components that can be shared between the web version of React and React Native.”
Let’s create an HTML document set up with React. For this, we can use an online code editor called codepen. Add these two links below when you will do the local set for it in codepen editor React and ReactDOM libraries are used to render the UI in the browser.
Create a New Pen
HTML document setup with React
Let’s see how to write and reuse HTML in our code and how we can reuse our HTML code.
After adding CSS it as shown below
Let’s copy the same HTML code and create one more card.
If you look closely you are copy pasting the same HTML and writing more codes. Now let us see how to minimize this and reuse the HTML code with react.
You will find this popup when you click on JS setting. Later, two more external libraries will be added from React.
Select in the Quick-add option as React and ReactDOM.
We are creating a function with the name Person () which in turn creates a Component. Make sure you write the component name by starting the letter in uppercase. Inside function Person () there is a return statement, that returns HTML code. We want to render this into DOM.
Now, let us do some changes in the HTML section
We have created an empty div block using id=” per”. You can use any id name if you want.
The React package which we have imported in the JS section is responsible to parse the code to DOM. We have also imported another package called ReactDOM.
As you can see render method accepts function Person in the form of HTML tag and want to render it by document.querySelector(‘#per’). We are trying to render Person component, that returns HTML data to the empty div block.
In the above screenshot, you can see that Person component data got rendered in the empty div block.
Note: Do Not use a class inside function Component Person. In case you have used it, you will get a warning in a console.
Since the class is a reserved word used in React, therefore, we will be using className. More information we can get it in JSX blog.
The person component we have created can display one-person detail because we have hardcoded the person value. But if you want to render more than one personal details we must again hardcode the value. The main advantage of React is we can create Reusable Components. Below we will see how to do it.
We have passed props as a parameter to the Person function. Props are a parameter that dynamically accepts the value whatever that is passed to Person Component. You are passing name and skills for props in line number 13. In line number 6 and 7 you can find how they are accessed.
Now we can render it dynamically for other Person details.
Summary of the above code
As you see we used React Functional Component and dynamically rendering two-person details with reusing the Person Component. This means we no need to hardcode the HTML code again and again for rendering new person detail. React makes User Interface Development easy. Using React we can build better UI.
In the next blog, we will be understanding JSX with doing the local setup. Stay tuned for more updates in React series blogs.