**Course Title:** Modern JavaScript Programming: From Fundamentals to Full-Stack Development **Section Title:** Front-End Development with React **Topic:** Build a simple React application that manages state and handles user input. **Overview** In this lab topic, you will learn to build a simple React application that manages state and handles user input. This exercise is designed to help you apply the concepts you've learned so far and solidify your understanding of React fundamentals. **Objective** By the end of this lab, you will be able to: 1. Create a simple React application that manages state. 2. Handle user input and update state accordingly. 3. Apply conditional rendering and event handling in React. **Step 1: Create a new React app** Open your terminal and run the following command to create a new React app using Create React App: ```bash npx create-react-app counter-app ``` Navigate to the newly created project folder: ```bash cd counter-app ``` **Step 2: Set up the initial state** Create a new file called `Counter.js` inside the `src` folder and add the following code: ```jsx import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> ); } export default Counter; ``` In this code, we're using the `useState` hook to initialize the `count` state variable to 0. We're also defining two buttons that update the `count` state when clicked. **Step 3: Render the Counter component** Open the `App.js` file and replace the existing code with the following: ```jsx import React from 'react'; import Counter from './Counter'; function App() { return ( <div> <Counter /> </div> ); } export default App; ``` Here, we're rendering the `Counter` component inside the `App` component. **Step 4: Run the application** Start the development server by running: ```bash npm start ``` Open your web browser and navigate to `http://localhost:3000`. You should see the counter application with two buttons. **Step 5: Handle user input and update state** Click the increment and decrement buttons to update the count. Observe how the state changes and the UI updates accordingly. **Step 6: Apply conditional rendering** Add a conditional statement to render a message when the count reaches 10: ```jsx function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> {count >= 10 && <p>Congratulations! You reached 10!</p>} <button onClick={() => setCount(count + 1)}>Increment</button> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> ); } ``` Run the application again and increment the count to 10. You should see the congratulatory message. **Conclusion** In this lab, you've built a simple React application that manages state and handles user input. You've applied conditional rendering and event handling to create a interactive UI. **What's next?** In the next topic, we'll introduce server-side JavaScript with Node.js. You'll learn to create RESTful APIs and interact with databases using Node.js and Express. **External Resources** * [React Documentation](https://reactjs.org/docs/getting-started.html) * [Create React App Documentation](https://create-react-app.dev/docs/getting-started/) **Comments and Questions** If you have any questions or need help with this lab, please leave a comment below. We'll be happy to assist you.