Create Your First React App
Tags: webdev, react, programming, linux
Published: 2024-05-06 16:04:45

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](https://programmers.io/blog/web-development-using-reactjs-with-nodejs/) 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
```


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s8j3ol6qyq5do6ewjqd.png)




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] (https://www.sitepoint.com/best-create-react-app-alternatives-for-different-use-cases/)? [Here's](https://blog.bitsrc.io/create-react-app-without-create-react-app-b0a5806a92)a 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9qp55wl90t1agbz8eky.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6g50gvakz1rkrsusyej.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j79cxc4ccfun71i89tcp.png)

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._ 

{% embed https://www.youtube.com/embed/Qpa1MD8eJa4?si=MSuHUQdjetBx3o03 %}