React Basics - Class 2

Lecture 50 :- React Basics - Class 2

In "React Basics - Class 2," we'll continue exploring more advanced React concepts and build on what we learned in the previous class. We'll cover topics such as handling events, conditional rendering, and managing lists.

Let's dive into the new concepts:

Step 1: Handling Events

In React, you can handle events like button clicks, form submissions, etc., by defining event handlers. Event handlers are functions that get called when a specific event occurs.

Let's create a simple button click event handler and update the state accordingly.

 

jsxCopy code

import React, { Component } from 'react'; class Counter extends Component { constructor() { super(); this.state = { count: 0, }; } incrementCount = () => { this.setState((prevState) => ({ count: prevState.count + 1, })); }; resetCount = () => { this.setState({ count: 0, }); }; render() { return ( <div> <h2>Count: {this.state.count}</h2> <button onClick={this.incrementCount}>Increment</button> <button onClick={this.resetCount}>Reset</button> </div> ); } } export default Counter;

Step 2: Conditional Rendering

Conditional rendering allows you to show or hide elements based on certain conditions. You can use if-else statements or ternary operators to conditionally render elements.

Let's modify the Counter component to show a message when the count reaches a specific value.

 

jsxCopy code

import React, { Component } from 'react'; class Counter extends Component { constructor() { super(); this.state = { count: 0, }; } incrementCount = () => { this.setState((prevState) => ({ count: prevState.count + 1, })); }; render() { const { count } = this.state; let message; if (count === 0) { message = 'Start counting!'; } else if (count === 10) { message = 'You reached 10!'; } else if (count === 20) { message = 'You reached 20!'; } else { message = null; } return ( <div> <h2>Count: {count}</h2> {message && <p>{message}</p>} <button onClick={this.incrementCount}>Increment</button> </div> ); } } export default Counter;

Step 3: Managing Lists

In React, you can dynamically render lists based on data from an array. Let's create a simple list rendering example.

 

jsxCopy code

import React, { Component } from 'react'; class TodoList extends Component { constructor() { super(); this.state = { todos: [ { id: 1, text: 'Learn React' }, { id: 2, text: 'Build a project' }, { id: 3, text: 'Deploy the project' }, ], }; } render() { const { todos } = this.state; return ( <div> <h2>Todo List</h2> <ul> {todos.map((todo) => ( <li key={todo.id}>{todo.text}</li> ))} </ul> </div> ); } } export default TodoList;

Step 4: Using Components Together

Now that we've created separate components for handling events, conditional rendering, and managing lists, let's use them in the App.js.

 

jsxCopy code

import React from 'react'; import Welcome from './Welcome'; import Counter from './Counter'; import TodoList from './TodoList'; function App() { return ( <div> <h1>Hello, React!</h1> <Welcome name="React App" /> <Counter /> <TodoList /> </div> ); } export default App;

Congratulations! You've completed the second class of React Basics. You've learned how to handle events, perform conditional rendering, and manage lists dynamically in a React application.

React provides a powerful and flexible way to build user interfaces, and there's so much more to explore. As you continue your React journey, you can delve into React Hooks, context, and state management libraries like Redux.

Keep practicing, building more complex applications, and exploring the vast possibilities of React! Happy coding!