Creating a React application is simpler than ever – all you need is a terminal and access to NPM/NPX. With the release of the
create-react-app (CRA) utility, you can get started with react with a single command. In this guide, I’ll show you how to create your first React app with CRA.
None! CRA is a utility that only requires a single command. No advanced knowledge of Bash or the command-line is required.
You can visit the previous post in this series for an introduction to React.
Step 1: Open a terminal
To create your first React application, first you’ll need to open a terminal and ensure you have NPM (Node Package Manager) installed.
On Windows, you can use the terminal that comes with Visual Studio Code. To open a new terminal, use
Ctrl + ` (that’s Control + backtick, the key to the left of the number row on most keyboards).
On macOS, you can either use the VS Code terminal or use the native terminal.
On Linux, you can either use the VS Code terminal or use the native terminal (
Ctrl = shift + T).
Step 2: Ensure NPM/NPX is installed
To make sure NPM is installed, enter the following command in the terminal:
If NPM is not installed, follow instructions for installing it on your OS.
Step 3: Use Create React App to initialize an application
To create a React application, enter the following command into the terminal. Be sure to replace the name in angle brackets with your desired project name. (But don’t include the angle brackets!)
$ npx create-react-app <your-project-name>
For example, if you want to name your project
my-first-react-app, you would enter
npx create-react-app my-first-react-app.
The creation of your app may take a few minutes. There are many dependencies (NPM packages that your app needs in order to function correctly) that need to be installed. When the process is finished, the terminal should greet you with a “Happy hacking!” message which indicates you are ready to work on your app!
Step 4: Run the React app on a development server
Create react App generates a template application that you can begin editing. If you want to see what this template app looks like, open up a terminal in the project directory and enter the following command:
$ npm start
After a moment, the development server will start up and your app will open in a new browser window!
If your app does not open automatically, you can navigate to it manually. Look at the output of the
npm start command. Somewhere you will find a message that tells you what port the development server is running on. On my machine this is typically port 3000, but this may vary. Then open your browser and enter
localhost: followed by the port number. For example,
Step 5: Edit the React code
Open Visual Studio Code (or your preferred text editor) and open your new React app inside of it. You’ll see a folder structure that contains a few directories including
src. Enter the
src folder and open the
App.js file inside of it.
App.js you’ll see the code for your app’s home page (the one opened by
npm start). Feel free to change up the text and see the changes in the app.
When your React app is running, it watches for updates to all of the applicaion’s files. So if you edit
App.js and save your changes, the page in the browser will automatically refresh to show those changes.
Congratulations on creating your first React app! Feel free to play around with the starter code and see what happens when you make edits. Next, we are going to explore some rules of JSX so you can edit your app with confidence.