Assignments Of Day 4: Rendering Elements in React
Assignment 1: Rendering a Simple React Element
Task:
Render a simple greeting message using React. Your task is to render the message "Welcome to the world of React!" inside an <h1> element.
Steps:
1. Create an HTML file with a div container where the React element will be rendered.
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 Assignment</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
2. Write the JavaScript code (index.js) to render a greeting message.
javascript
Copy code
import React from 'react';
import ReactDOM from 'react-dom';
// Create a React element
const element = <h1>Welcome to the world of React!</h1>;
// Render the element to the DOM
ReactDOM.render(element, document.getElementById('root'));
Explanation:
1. HTML Structure: The HTML contains a <div> with the id="root", which is where the React element will be rendered.
2. JavaScript Code:
o We import React and ReactDOM to work with React components.
o We create a React element <h1>Welcome to the world of React!</h1>.
o ReactDOM.render() renders the React element into the div with the id="root".
Output:
You should see the message "Welcome to the world of React!" displayed on the webpage in an <h1> element.
Assignment 2: Rendering a Simple Component
Task:
Create a simple React component called Greeting that displays the message "Hello, React!" and render it to the DOM.
Steps:
1. Create the HTML file as before with a div container for rendering.
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 Component Assignment</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
2. Write the JavaScript code (index.js) to define and render the Greeting component.
javascript
Copy code
import React from 'react';
import ReactDOM from 'react-dom';
// Define a React component called Greeting
function Greeting() {
return <h1>Hello, React!</h1>;
}
// Render the Greeting component
ReactDOM.render(<Greeting />, document.getElementById('root'));
Explanation:
1. Component Definition: We define a simple React component Greeting using the function syntax. The component returns a JSX element <h1>Hello, React!</h1>.
2. Rendering the Component: We call ReactDOM.render() and pass in the <Greeting /> component to render it inside the div with the id="root".
Output:
You should see the message "Hello, React!" rendered in the webpage inside an <h1> tag.
Assignment 3: Rendering Multiple Elements Inside a Single Parent
Task:
Render two elements, an <h1> with the text "React is Awesome!" and a <p> with the text "Let’s explore React together!" inside a single parent container.
Steps:
1. Create the HTML file as before with a div container.
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>Multiple Elements Assignment</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
2. Write the JavaScript code (index.js) to render both elements inside a single parent <div>.
javascript
Copy code
import React from 'react';
import ReactDOM from 'react-dom';
// Create React elements and wrap them inside a parent <div>
const element = (
<div>
<h1>React is Awesome!</h1>
<p>Let’s explore React together!</p>
</div>
);
// Render the element to the DOM
ReactDOM.render(element, document.getElementById('root'));
Explanation:
1. Multiple Elements: React requires that multiple elements must be wrapped inside a single parent element. Here, we use a <div> to wrap both the <h1> and <p> elements.
2. Rendering: We call ReactDOM.render() to render the entire wrapped element inside the div with id="root".
Output:
You should see two elements on the webpage:
1. "React is Awesome!" as a heading (<h1>).
2. "Let’s explore React together!" as a paragraph (<p>).
Assignment 4: Rendering a Component with Props
Task:
Create a React component called Message that takes a message prop and displays it inside an <h2> element. Pass a message to the Message component when rendering it.
Steps:
1. Create the HTML file with a div container.
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>Component with Props Assignment</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
2. Write the JavaScript code (index.js) to create and render the Message component with a prop.
javascript
Copy code
import React from 'react';
import ReactDOM from 'react-dom';
// Define a React component that accepts a 'message' prop
function Message(props) {
return <h2>{props.message}</h2>;
}
// Render the component with a prop value
ReactDOM.render(<Message message="This is a prop in React!" />, document.getElementById('root'));
Explanation:
1. Props in React: The Message component accepts a message prop and displays it inside an <h2> element.
2. Passing Props: When rendering the Message component using ReactDOM.render(), we pass a value to the message prop (e.g., "This is a prop in React!").
Output:
You should see the message "This is a prop in React!" displayed inside an <h2> element.
Assignment 5: Re-rendering on Data Change (State)
Task:
Create a simple React component that displays a counter. The counter should have a button that increments the counter value by 1 each time it is clicked.
Steps:
1. Create the HTML file as before with a div container.
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>Re-rendering on Data Change Assignment</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
2. Write the JavaScript code (index.js) to create the counter component with state.
javascript
Copy code
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
// Define a Counter component that increments the counter value
function Counter() {
const [count, setCount] = useState(0); // State for storing counter value
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
// Render the Counter component
ReactDOM.render(<Counter />, document.getElementById('root'));
Explanation:
1. useState Hook: We use the useState hook to manage the state of the counter. The count variable stores the current counter value, and setCount updates the state.
2. Button for Incrementation: The button triggers the setCount function when clicked, which increments the counter value.
3. Re-rendering: When the state (count) changes, React automatically re-renders the component to update the displayed counter value.
Output:
You should see a counter displayed with a button. Each time you click the button, the counter value should increment by 1.