Creating a React Hello World App

Introduction

In this chapter, we will create a simple “Hello World” application using the create-react-app tool. This tool sets up a new React project with a modern build configuration, allowing you to focus on writing your code without worrying about the setup.

Table of Contents

1. Setting Up the React Project
2. Project Structure
3. Creating the Hello World Component
4. Running the React Application
5. Conclusion

Setting Up the React Project

1. Install Node.js: Make sure you have Node.js installed on your machine. You can download and install it from nodejs.org.
2. Install create-react-app: Open your terminal and run the following command to install create-react-app globally (if you haven’t already):

   npm install -g create-react-app
   

3. Create a New React Project: Use the create-react-app command to create a new React project named hello-world-app:

   npx create-react-app hello-world-app
   

4. Navigate to the Project Directory: Change into the newly created project directory:

   cd hello-world-app
   

Project Structure

After creating the project, you will see a directory structure similar to this:

hello-world-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (or package-lock.json)

Creating the Hello World Component

1. Open App.js: In your code editor, open the src/App.js file.
2. Modify the App Component: Replace the existing code in App.js with the following code to create a simple “Hello World” component:

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

3. Update App.css: You can also update the src/App.css file to add some basic styling:

   /* src/App.css */
   .App {
     text-align: center;
   }
   
   .App-header {
     background-color: #282c34;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
     color: white;
   }
   
   h1 {
     color: #61dafb;
   }
   

Running the React Application

1. Start the Development Server: In your terminal, run the following command to start the development server:

   npm start
   

2. Open the Application in Your Browser: Once the server is running, open your browser and navigate to http://localhost:3000. You should see the “Hello, World!” message displayed on the screen.

Conclusion

In this chapter, we learned how to create a simple “Hello World” application using the create-react-app tool. We set up the project, modified the App.js file to display a “Hello, World!” message, and ran the application in the browser. This setup provides a solid foundation for building more complex React applications.

In the next chapter, we will understand the structure and flow of a React project created using the create-react-app tool.