In this lesson, we will create our first React application and display a simple "Hello World" message. This will help you understand the basic structure of a React application and how to render elements to the DOM.

Before starting, ensure you have:

• Node.js and npm installed on your machine.
• A code editor (e.g., Visual Studio Code).

First, we need to set up a new React project using Create React App, a tool that sets up a new React project with a sensible default configuration.

1. Open your terminal or command prompt.

2. Run the following command to create a new React application:

   npx create-react-app hello-world
   

3. Navigate to the project directory:

   cd hello-world
   

4. Start the development server:

   npm start
   

   This will open a new browser window with the default React application running at http://localhost:3000.

The Create React App tool generates a project with the following structure:

Key files to note:

• public/index.html: The HTML file that serves as the entry point for the React application.
• src/index.js: The JavaScript file that renders the React application to the DOM.
• src/App.js: The main component of the React application.

Let's modify the App.js file to display "Hello World".

1. Open src/App.js in your code editor.

2. Replace the existing code with the following:

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <h1>Hello World</h1>
       </div>
     );
   }
   
   export default App;
   

3. Save the file. The browser should automatically refresh, and you should see "Hello World" displayed on the screen.

Let's break down the code in App.js:

• Import Statements:

  import React from 'react';
  import './App.css';
  

  • import React from 'react';: Imports the React library, which is necessary to use JSX.
  • import './App.css';: Imports the CSS file for styling the component.

• App Component:

  function App() {
    return (
      <div className="App">
        <h1>Hello World</h1>
      </div>
    );
  }
  

  • function App() { ... }: Defines a functional component named App.
  • return ( ... ): Returns the JSX to be rendered. In this case, it returns a div containing an h1 element with the text "Hello World".

• Export Statement:

  export default App;
  

  • export default App;: Exports the App component as the default export of the module, allowing it to be imported and used in other files.

1. Change the message from "Hello World" to "Welcome to React".
2. Save the file and observe the changes in the browser.

1. Open src/App.js.

2. Modify the h1 element:

   function App() {
     return (
       <div className="App">
         <h1>Welcome to React</h1>
       </div>
     );
   }
   

3. Save the file. The browser should now display "Welcome to React".

In this lesson, you learned how to set up a new React project and create a simple "Hello World" application. You also gained an understanding of the basic structure of a React application and how to render elements to the DOM. In the next lesson, we will dive deeper into JSX, the syntax extension used in React to describe UI elements.