Last Updated : 30 Oct, 2023
Summarize
Comments
Improve
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. In react, we use JSX, especially in the functional important which is an extension of Javascript it needs the react methods for reference to convert into javascript code.
Prerequisites
Why do we Import React in functional components?
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 an example.
Creating React Application
Step 1: Use this command to create the react project
npx create-react-app reactappStep 2: After creating your project folder, move to it using the following command:
cd reactappProject 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.
Example: It shows how the app component is compiled into an object in the console screen.
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)
Step to run the application: Open the terminal and type the following command.
npm startOutput:
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.
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.
Improve
