In this Byte we'll walk you through the process of creating a React app, from setting up your environment to actually creating the app. We'll try to make the process as straightforward as possible, even if you're new to React :)
Before we start, there are a few things you'll need:
- Node.js and npm installed on your system. You can download Node.js/npm from the official website or use nvm.
Setting Up Your Environment
Now that you have Node.js and npm installed, let's set up your environment. Open your terminal and navigate to the directory where you want to create your React app.
Next, you'll need to install
create-react-app, a tool that sets up a modern web app by running one command.
npx create-react-app my-app
npx is a package runner tool that comes with npm. When you run
npx will download the most recent version of the tool and run it.
Creating the React App
After running the
create-react-app command, your new React application will be created in a directory called
my-app inside your current directory.
my-app directory, you'll find the initial project structure and some files. The most important file is
src/App.js, where you can start building your React app.
cd my-app ls README.md node_modules package.json public src yarn.lock
public folder contains the HTML file that your React app will be injected into. The
src folder is where your React code lives.
To start your React app, navigate into the
my-app directory and start the development server:
After running this command, you should see output similar to the following:
Compiled successfully! You can now view my-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.8:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Congrats! You've just created your first React app. You can now open your browser and visit
http://localhost:3000 to see your app in action.
Starting Your New React Project
Once you've created your React app, it's time to dive in and start your new project. Navigate to your project directory by using the
cd command followed by the name of your project. If your project is named "my-react-app", you would navigate to it like so:
Now, you're in the root directory of your project. To start your React application, you'll use the
npm start command:
This command will start a development server and open up a browser window to display your application. If everything is set up correctly, you should see "Welcome to React" on your screen.
While working with React, you might encounter one of a few common issues. Let's go over a few of them and their solutions.
If your application fails to start, make sure you're in the correct directory (the root directory of your project) and that you've installed all the necessary dependencies with
If you're seeing an error message about a missing module, it's likely that you forgot to install a dependency. You can install it with
npm install [module-name].
If you're having trouble viewing your application in the browser, make sure your development server is running (
npm start) and that you're looking at the correct URL (usually
In this Byte, we've walked through the process of starting a new React project and addressed some common issues you might encounter. React is a powerful tool for building user interfaces, and understanding how to set up and troubleshoot a React project is a key skill for any modern web developer.