**Course Title:** Mastering React.js: Building Modern User Interfaces **Section Title:** Introduction to React and Development Environment **Topic:** Set up a React project using Create React App and build a simple functional component.(Lab topic) **Objective:** By the end of this topic, students will be able to set up a React project using Create React App and build a simple functional component, applying the concepts learned in the previous topics. **Prerequisites:** - Introduction to React and Development Environment - Understanding the basics of JSX and component structure - Introduction to functional components and class components **Materials:** * Create React App: <https://create-react-app.dev/> * React documentation: <https://reactjs.org/docs/getting-started.html> * Code editor of your choice (e.g., Visual Studio Code, Sublime Text) **Step 1: Setting up a React Project using Create React App** 1. Open a terminal or command prompt and run the following command to create a new React project: ``` npx create-react-app my-react-app ``` Replace "my-react-app" with the name of your project. 2. This will download and install the necessary dependencies, including Create React App. 3. Navigate into your project directory: ``` cd my-react-app ``` 4. Start the development server: ``` npm start ``` This will start the development server, and you can access your application at <http://localhost:3000>. **Step 2: Understanding the Project Structure** Create React App generates a basic project structure for you. Here's an overview of the main directories and files: * `public/`: This directory contains static assets that can be served directly by the web server. * `src/`: This directory contains the source code for your application. * `App.js`: This is the main application component. * `index.js`: This is the entry point for your application. * `package.json`: This file contains metadata for your project, including dependencies and scripts. **Step 3: Building a Simple Functional Component** 1. Open the `src/App.js` file and replace the existing code with the following: ```jsx import React from 'react'; function Hello() { return <h1>Hello, World!</h1>; } function App() { return ( <div> <Hello /> </div> ); } export default App; ``` This code defines a simple functional component called `Hello` that renders an `<h1>` element with the text "Hello, World!". The `App` component renders the `Hello` component. 2. Save the changes to the `App.js` file. 3. Run the development server again: ``` npm start ``` This will start the development server, and you can access your application at <http://localhost:3000>. **Step 4: Understanding the Code** Let's break down the code: * `import React from 'react';`: This line imports the React library. * `function Hello() {...}`: This line defines a new functional component called `Hello`. * `return <h1>Hello, World!</h1>;`: This line returns the JSX element that will be rendered by the component. * `function App() {...}`: This line defines a new functional component called `App`. * `return (...)` {...}: This line returns the JSX element that will be rendered by the component. * `<Hello />`: This line renders the `Hello` component inside the `App` component. **Key Concepts:** * Functional components: These are components that are defined as functions and do not have their own state. * JSX: This is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. * Components: These are the building blocks of a React application. They can be functional or class components. **Practical Takeaways:** * Create React App is a great tool for setting up a new React project. * Functional components are a great way to define reusable UI components. * JSX is a powerful tool for building user interfaces in React. **Exercise:** * Create a new React project using Create React App. * Define a simple functional component that renders a greeting message. * Render the component inside a `App` component. **Comment or Ask for Help:** Please leave a comment or ask for help if you have any questions or need further clarification on any of the concepts covered in this topic.