DEV Community

Cover image for Create Your First React App
K(e)ith N. Henry
K(e)ith N. Henry

Posted on • Edited on

Create Your First React App

Ready to create your first app in React ? I thought so.

Here's the plan;

  • Installing latest version of npm
  • Installing create-react-app
  • Creating a react app
  • Conclusion

Let's get right into it...


Installing npm

Before using React, you'll need to have node js installed on your system.

Linked here is a source that could explain why npm is needed for React should you like to learn more.

For your node installation, you will use node version manager to have some control which node version gets installed. In this post, I'll install the latest version which is 22, at least as per the time I am writing this.

Paste the code below into your terminal to install node using nvm.

# installs NVM (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js
nvm install 22

# verifies the right Node.js version is in the environment
node -v # should print 22.x.x

# verifies the right NPM version is in the environment
npm -v
Enter fullscreen mode Exit fullscreen mode

If the nvm command fails to run the first time. You might have to close your terminal and reopen it, then retry the installation by running;
nvm install 22

To confirm if your installation was successful, executing the command node --version should print out version 22;

Successful npm installation snapshot

Moving on to the next step.

Installing create-react-app.

I guess like me, you don't like wasting waste time going through the mind boggling steps involved in creating React application configurations. For that reason, we'll use React's utility create-react-app for this post.

Want to know how to do all the configurations witout utilities like create-react-app or any other similar ones? Here'sa tutorial that could help.

Continuing with installing create-react-app, run the command

npm install create-react-app

If you face any issues with this command, you can reach out to me in the comment section and I might be able to help. And, try searching for a solution from the so many helpful communities online.

Creating the app

Now to create the app, switch directory to the folder in which you wish to create your application and type the command;

npx create-react-app myapp

Running that will create an app under the name myapp.
You can replace myapp with any other name of your choice, it doesn't carry any significance. On running the command, you should get a response similar to this.

App Created

Listing the directiories in your current directory should now display a new folder under the name you specified in the previously ran command.

Folders in directory

Switch to your newly created app directory and start your the app with;
npm start

Your default web browser should open app with a rendering of your first React application!

App rendered

Cool, isn't it! What did you learn in this post;

  • You installed node js with nvm
  • You installed React's create-react-app utility
  • You created your first React application, probably.

Thanks for following along and see you in the next!


Did you learn something from this article? Do you have something you would like to add to it? Something to correct or anything else to say about this post? I'd be happy to know. Please leave a comment in the comment section and if you liked the post, don't forget to like and share to anyone you think might need it.

Top comments (0)