React.js Tutorials Tutorial

Creating Your First React App

❮ Previous Next ❯

Introduction

Now that you’ve set up the development environment, it’s time to build your first React app! In this lesson, we’ll walk through creating a simple application, explore the default code structure provided by React, and see how to customize it by adding a few basic components.

Step 1: Setting Up Your First React App

Open Your Terminal
- Navigate to the directory where you want to create your React project. You can use the cd command to change directories.
- For example:
```
cd path/to/your/directory
```
Run create-react-app
- Run the following command to create a new React app using create-react-app:
```
npx create-react-app my-first-app
```
- Replace my-first-app with your desired app name.
Note: npx runs create-react-app without needing a global installation. The tool sets up your project with the required React files and dependencies.
Navigate to Your Project Directory
- Once the setup completes, navigate into your project directory:
```
cd my-first-app
```

Step 2: Running Your React App

Start the Development Server
- Run the following command to start the app:
```
npm start
```
- This command will start a development server and automatically open the app in your default browser at http://localhost:3000.
View the Default React App
- In your browser, you’ll see the default React app interface, which includes a spinning React logo and some welcome text. This is the starter code generated by create-react-app.

Step 3: Understanding the Default Project Structure

When create-react-app creates a new project, it organizes your files into a standard structure:

node_modules/: Contains all the libraries and dependencies installed by npm.
public/: Contains the main HTML file (index.html) that serves your app and other static assets (images, fonts).
src/: This is the main folder for your app’s code. Important files include:
- App.js: The main component that defines your app’s structure and renders other components.
- index.js: The entry point of the app, where App.js is rendered to the DOM.
- App.css: Default styling for the App.js component.

Key Files in src/

App.js: A basic React component that currently displays a logo and some text.
index.js: The entry file for the app. Here, React’s ReactDOM.render() method renders the App component inside the index.html file.

Step 4: Modifying the Default Code

Let’s make some changes to personalize the app and better understand React’s structure.

Open App.js
- In your code editor, open App.js located in the src folder. You’ll see a basic React component with JSX code rendering the logo and text.

Edit App.js to Display a Custom Message

Replace the content in the <header> with a simple greeting, like so:

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

export default App;

Save and View Changes
- Save App.js. The React development server will automatically reload, and you’ll see the updated message on the browser.

Step 5: Adding a New Component

To learn more about React, let’s create a new component.

Create a New Component File
- In the src folder, create a new file called Greeting.js.

Write a Basic Greeting Component

Inside Greeting.js, add the following code:

import React from 'react';

function Greeting() {
  return (
    <div>
      <h2>Hello, React Learner!</h2>
      <p>This is your first custom component.</p>
    </div>
  );
}

export default Greeting;

This is a functional component that returns some JSX.

Import and Use the Greeting Component in App.js

Open App.js and import Greeting at the top:
```
import Greeting from './Greeting';
```

Add the Greeting component within the App component:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My First React App!</h1>
        <Greeting />
      </header>
    </div>
  );
}

Save the file, and you should now see the greeting message in your app.

Step 6: Styling Your App

To style your React app, you can edit the App.css file.

Open App.css

Modify the App.css file to style your new elements:

.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;
}

Save and View Changes
- Save App.css, and the browser will refresh with your updated styles.

Troubleshooting Common Issues

Error: Command Not Found: Ensure Node.js and npm are installed, and check the terminal path.
Page Not Loading: Make sure you’re navigating to http://localhost:3000 in your browser.
Live Reload Not Working: Check if your code editor is set up to save files automatically or press refresh manually in the browser.

Conclusion

Congratulations! You’ve successfully created, modified, and personalized your first React app. You’ve learned how to:

Set up a new React project using create-react-app
Run a development server to view changes instantly
Modify the default structure and create custom components
Style your components using CSS

In the next lesson, we’ll dive into React components in detail, exploring the differences between functional and class components and learning how to build more interactive elements.

❮ Previous Next ❯

React.js Tutorials Tutorial

React.js Tutorials Tutorial

Introduction to React

Components

JSX and Rendering

Hooks

Routing

State Management

Creating Your First React App

Introduction

Step 1: Setting Up Your First React App

Step 2: Running Your React App

Step 3: Understanding the Default Project Structure

Key Files in src/

Step 4: Modifying the Default Code

Step 5: Adding a New Component

Step 6: Styling Your App

Troubleshooting Common Issues

Conclusion

Important Links