React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application.
The Browser does not understand React, it only understands HTML, CSS, and JavaScript. So to convert React into valid JavaScript we use a webpack called Babel. It is used to convert JSX into objects and then return that object. Babel is already included in the boilerplate generated by create-react-app.
Let’s understand with the help of example.
Step 1: Creating React Application
npx create-react-app reactapp
Step 2: After creating your project folder i.e.loops, move to it using the following command:
cd reactapp
Project Structure: It will look like the following.
Project Structure
Step 3: Write the following code in App.js. Below is a JSX syntax. So whenever you use it you will require React imported.
Javascript
import React from 'react'import ReactDOM from 'react-dom'function App() { return <h1>Hello, World!</h1>}const rootElement = document.getElementById('root')ReactDOM.render(<App />, rootElement) |
The above JSX gets converted to this by Babel internally
Object
$$typeof: Symbol(react.element)
key: null
props: {children: 'Hello, World!'}
ref: null
type: "h1"
_owner: null
_store: {validated: false}
_self: null
_source: {fileName: '/src/index.js', lineNumber: 5, columnNumber: 10}
[[Prototype]]: Object
Explanation:
- type: In this example, our component is the object that represents the root element which is the h1 element. type is the property that corresponds to the HTML element.
- props: This property contains all of the children and in our case, it is Hello, World!
- key: You might know that we pass key as a prop while mapping in React which in our case is null. It is used to uniquely identify an element in the virtual DOM.
- ref: when you need to imperatively modify a child outside of the typical dataflow we need ref.
- $$typeof: This property identifies the object as a React element
What Browser sees after the code gets compiled is the following code.
App.js
Javascript
import React from 'react'import ReactDOM from 'react-dom'function App() { return React.createElemet("h1", null, "Hello World");}const rootElement = document.getElementById('root')ReactDOM.render(<App />, rootElement) |
You can see it for yourself by logging on to the console.
App.js
Javascript
import React from 'react'import ReactDOM from 'react-dom'function App() { return <h1>Hello, World!</h1>}const rootElement = document.getElementById('root')console.log(App())ReactDOM.render(<App />, rootElement) |
Explanations: The JSX gets internally into many React.createElement() function calls and each of them returns an object as shown above. Now because of this, we need to import React from “react” since internally every JSX is creating a React Component using JSX transformer.
So, for using the createElement function we need to import React, and if we do not import it
then React.createElement function will be undefined.
Note: From React version 17 you don’t even need to import React from “react” for smaller projects but earlier versions of React projects need to import it. JSX transformer internally takes care of converting a JSX to React elements but you may still need to import it for using hooks like useState and useEffect. We do not need to import React in files like actions, reducers, and so on because we don’t have JSX there.
Step to run the application: Open the terminal and type the following command.
npm start
Output:
