Rendering React Components

Rendering React components involves creating reusable UI elements and managing their state and properties. React components can be either functional or class-based as we have already discussed. Functional components are simpler and are defined as functions that return JSX, a syntax extension for JavaScript that looks similar to HTML. Class components, on the other hand, are defined using ES6 classes and can hold state and lifecycle methods, making them suitable for more complex components. Components can accept inputs called "props" which allow data to be passed from parent to child components, enabling dynamic and reusable UI elements.

React also provides hooks, such as useState, to manage state in functional components, making it easier to handle stateful logic without needing to convert to class components. The useState hook allows developers to add state to functional components, simplifying the process of updating and re-rendering components when state changes.

Advantages in Rendering React Components :

1. Reusability: React components are highly reusable.

2. Declarative Syntax: React's declarative approach allows developers to describe what the UI should look like based on the current state. This makes the code more predictable and easier to understand.

3. Component-Based Architecture: Breaking down the UI into smaller, self-contained components promotes a more organized and scalable codebase.

4. Efficient Updates with Virtual DOM: React uses a virtual DOM to efficiently manage updates. When the state of a component changes, React calculates the difference between the virtual DOM and the actual DOM, and only updates the parts that have changed.

Step 1: Creating a React Component
 

a. Functional Component:

// src/Hello.js
import React from 'react';
function Hello() {
 return <h1>Hello, world!</h1>;
}
export default Hello;

b. Class Component:

// src/HelloClass.js
import React, { Component } from 'react';
class HelloClass extends Component {
 render() {
   return <h1>Hello, world!</h1>;
 }
}
export default HelloClass;

Step 2: Rendering the Component

Import and Use the Component in App.js:

// src/App.js
import React from 'react';
import Hello from './Hello'; // or HelloClass if you're using the class component
function App() {
 return (
   <div className="App">
     <Hello />
   </div>
 );
}
export default App;

Start the Application:

Run the following command to start the development server:
 

In terminal: npm start

Open your browser and navigate to http://localhost:3000. You should see "Hello, world!" displayed on the screen.

Step 3: Adding Props to Components

Props allow you to pass data to components.'

Modify the Component to Accept Props:

// src/Hello.js
import React from 'react';
function Hello(props) {
 return <h1>Hello, {props.name}!</h1>;
}
export default Hello;

Pass Props to the Component in App.js:

// src/App.js
import React from 'react';
import Hello from './Hello';
function App() {
 return (
   <div className="App">
     <Hello name="Alice" />
     <Hello name="Bob" />
   </div>
 );
}
export default App;

Step 4: State and Lifecycle in Class Components

State allows components to manage and respond to data changes.

Add State to a Class Component:

// src/HelloState.js
import React, { Component } from 'react';
class HelloState extends Component {
 constructor(props) {
   super(props);
   this.state = { name: 'World' };
 }
 render() {
   return <h1>Hello, {this.state.name}!</h1>;
 }
}
export default HelloState;

Update State:

// src/HelloState.js
import React, { Component } from 'react';
class HelloState extends Component {
 constructor(props) {
   super(props);
   this.state = { name: 'World' };
 }
 changeName = () => {
   this.setState({ name: 'React' });
 };
 render() {
   return (
     <div>
       <h1>Hello, {this.state.name}!</h1>
       <button onClick={this.changeName}>Change Name</button>
     </div>
   );
 }
}
export default HelloState;

Use the Component in App.js:

// src/App.js
import React from 'react';
import HelloState from './HelloState';
function App() {
 return (
   <div className="App">
     <HelloState />
   </div>
 );
}
export default App;

Step 7: Using Hooks in Functional Components

React hooks allow you to use state and other React features in functional components.

Using the useState Hook:

// src/HelloHook.js
import React, { useState } from 'react';
function HelloHook() {
 const [name, setName] = useState('World');
 return (
   <div>
     <h1>Hello, {name}!</h1>
     <button onClick={() => setName('React')}>Change Name</button>
   </div>
 );
}
export default HelloHook;

Use the Component in App.js:

// src/App.js
import React from 'react';
import HelloHook from './HelloHook';
function App() {
 return (
   <div className="App">
     <HelloHook />
   </div>
 );
}
export default App;

These steps provide a foundational understanding of how to render React components, manage state, and use props.