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
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;
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.
Listing the directiories in your current directory should now display a new folder under the name you specified in the previously ran command.
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!
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)