Lecture Notes Of Day 4: Rendering Elements in React
Objective:
To learn how React
elements are rendered to the DOM.
Outcome:
By the end of this
lesson, students should understand how the ReactDOM.render() function works and
be able to render a simple React element to a webpage.
1. Introduction to
Rendering in React
In React, everything is
driven by components. These components are written in JavaScript, but they
represent the user interface (UI) elements, like headings, buttons, forms, and
other HTML elements. React takes care of updating the UI when the data changes,
making it more efficient than traditional web development.
Before React, developers
manually wrote JavaScript to manipulate the DOM (Document Object Model), which
defines the structure of a webpage. With React, the rendering process is
abstracted away through ReactDOM.
2. What is ReactDOM.render()?
In React, the function ReactDOM.render()
is responsible for taking a React component and rendering it to the DOM. The
render function is a method in the ReactDOM library, and it allows us to
specify where we want our React element to appear on the page.
Syntax:
javascript
Copy code
ReactDOM.render(element,
container)
- element:
A React element or component that we want to render.
- container:
The DOM element (usually a <div>) where the React element should be
rendered.
3. How Does Rendering
Work?
1.
Create React Element:
First, we create a React element using the React.createElement() function or
JSX (JavaScript XML).
2.
Call ReactDOM.render():
This function takes the React element and renders it to a specific DOM element
on the webpage.
3.
React Updates DOM:
React efficiently updates the DOM when data changes, without requiring manual
DOM manipulation.
4. Rendering Simple React
Element
Let’s start by rendering
a simple element to the page. Here’s an example of how to render a simple
heading (<h1>) using React.
Step 1: Set Up HTML File
Create an HTML file
(e.g., index.html) with a container where the React element will be rendered.
This is typically done by placing a <div> with an id in the HTML file.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>React Rendering Example</title>
</head>
<body>
<div id="root"></div>
<!-- This is the container for our React app -->
<script src="index.js"></script>
<!-- Link to our JavaScript file -->
</body>
</html>
Step 2: Write the
JavaScript Code
Next, create a JavaScript
file (e.g., index.js). In this file, we will:
1.
Import the necessary React and ReactDOM
libraries.
2.
Create a React element using JSX.
3.
Use ReactDOM.render() to render the
element to the DOM.
javascript
Copy code
// Import React and
ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';
// Create a React element
(a simple <h1> element)
const element = <h1>Hello,
React!</h1>;
// Render the element to
the DOM
ReactDOM.render(element, document.getElementById('root'));
Step 3: Explanation of
the Code
1.
React and ReactDOM Imports:
We import React and ReactDOM. React is used to create the React elements (like <h1>),
and ReactDOM is used to render those elements to the DOM.
2.
JSX Syntax:
The line const element = <h1>Hello, React!</h1> is written in JSX
(JavaScript XML). JSX allows us to write HTML-like syntax inside JavaScript,
which React will then convert into JavaScript.
3.
ReactDOM.render():
The function ReactDOM.render() takes two arguments:
o The
React element (<h1>Hello, React!</h1>)
o The
DOM element (document.getElementById('root')) where we want to place the
rendered content.
5. Rendering a React
Component
In React, you typically
render components rather than plain elements. A component is like a
JavaScript function that returns a React element.
Let’s create a simple
React component and render it to the page:
javascript
Copy code
// Define a React
component
function Welcome() {
return <h1>Welcome to React!</h1>;
}
// Render the component
ReactDOM.render(<Welcome
/>, document.getElementById('root'));
In this example:
- The
Welcome component is a simple function that returns a JSX element.
- The
ReactDOM.render(<Welcome />, document.getElementById('root'))
statement renders the Welcome component to the DOM.
6. The Role of JSX
JSX is a syntax extension
that allows you to write HTML-like code inside JavaScript. React will convert
JSX into JavaScript code that creates React elements. JSX makes it easier to
define the structure of your components in a more readable way.
For example, this JSX:
jsx
Copy code
const element = <h1>Hello,
React!</h1>;
is transformed by React
into this JavaScript:
javascript
Copy code
const element = React.createElement('h1',
null, 'Hello, React!');
7. ReactDOM and Multiple
Elements
You can also render
multiple elements, but each one must be wrapped in a single parent element. For
example, if you want to render two elements, you should wrap them in a parent
container like a <div>.
Example:
javascript
Copy code
const element = (
<div>
<h1>Hello, React!</h1>
<p>This is a simple React component.</p>
</div>
);
// Render the element
ReactDOM.render(element, document.getElementById('root'));
In this case, the <h1>
and <p> elements are wrapped inside a single <div>.
8. Re-rendering the
Element
Whenever the state or
data of a React component changes, React automatically re-renders the UI. For
now, we are simply rendering the element once, but in larger applications,
React components can update dynamically when the data changes.
9. Conclusion
In this lesson, we
learned:
- The
ReactDOM.render() function renders React elements or components to the
DOM.
- How
to create and render simple React elements using JSX.
- The
concept of rendering a React component to the DOM.
- How
React abstracts the DOM manipulation process to make rendering efficient
and automatic.
10. Next Steps
- Practice
by creating multiple elements and components.
- Experiment
with updating React elements dynamically by adding user interactions or
state.
By the end of today’s
class, you should be able to render basic React components and elements to the
webpage, which is the foundation for building more complex React applications.