4. Creating Your First React App

Embarking on the journey of learning React JS is an exciting endeavor, especially when you create your first React application. This step is often the most rewarding as it allows you to see your code come to life. In this section, we'll walk you through the process of setting up your first React app using Create React App, a popular toolchain for setting up a new single-page React application.

Why Use Create React App?

Create React App is a robust tool that simplifies the process of setting up a React environment. It allows you to focus on writing your application without worrying about the configuration of Webpack, Babel, or other complex build tools. By using Create React App, you can quickly scaffold a new project with a sensible default configuration, ensuring that you have all the necessary tools to start building your React components.

Installing Node.js and npm

Before you can use Create React App, you need to have Node.js and npm (Node Package Manager) installed on your machine. Node.js is a JavaScript runtime that allows you to execute JavaScript code on the server side, while npm is a package manager that comes with Node.js, enabling you to install libraries and packages.

To install Node.js and npm, visit the official Node.js website and download the installer for your operating system. Follow the installation instructions provided, and once the installation is complete, verify the installation by running the following commands in your terminal or command prompt:

node -v
npm -v

These commands should return the installed versions of Node.js and npm, respectively.

Creating a New React Application

With Node.js and npm installed, you can now create your first React application using Create React App. Open your terminal or command prompt and navigate to the directory where you want to create your project. Run the following command:

npx create-react-app my-first-react-app

The above command will create a new directory named my-first-react-app and set up a new React project inside it. The npx tool, which comes with npm, allows you to execute packages without having to install them globally. This command will download the latest version of Create React App and use it to set up your project.

Understanding the Project Structure

Once the setup is complete, navigate into your project directory:

cd my-first-react-app

You'll see a number of files and directories inside. Here's a brief overview of the most important ones:

• node_modules/: Contains all the dependencies and packages required by your React app.
• public/: This directory contains the public assets of your application, including the HTML file where your React components will be rendered.
• src/: This is where you'll write your React components and application logic. It contains files like App.js, index.js, and App.css.
• package.json: This file contains metadata about your project, including its dependencies, scripts, and other configurations.

Starting the Development Server

To see your React app in action, you need to start the development server. From within your project directory, run the following command:

npm start

This command will start the development server and open your default web browser to http://localhost:3000, where you can see your React application running. The development server will automatically reload whenever you make changes to your code, allowing for a seamless development experience.

Exploring the Default React App

When you first open your React app in the browser, you'll see a default page with the React logo spinning and some introductory text. This is the default template provided by Create React App. Let's explore some key files that contribute to this display:

src/index.js

This file is the entry point of your React application. It imports React and ReactDOM libraries and renders the App component into the root DOM node in public/index.html.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.js

This file defines the main App component, which is rendered by index.js. It contains the JSX that you see on the default page.

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit src/App.js and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

src/App.css

This file contains the styles for the App component. You can modify these styles to change the appearance of your application.

Modifying Your First React Component

Now that you have a basic understanding of the default project structure, let's make some changes to the App component. Open src/App.js in your code editor and modify the return statement to display a custom message:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My First React App!</h1>
        <p>This is a custom message in my React application.</p>
      </header>
    </div>
  );
}

After saving your changes, the development server will automatically reload, and you should see your custom message displayed in the browser.

Conclusion

Creating your first React app using Create React App is a straightforward process that sets the foundation for building more complex applications. By understanding the project structure and making small modifications to your components, you can gradually build your skills and confidence in using React.

As you continue to explore React, consider experimenting with different components, state management, and routing to enhance your application. Remember, practice is key to mastering any new technology, and React is no exception. Happy coding!

Next page of the Free Ebook:

5JSX Syntax and Its Benefits

8 minutes