Creating a react application from the command promptorterminal

Table of contents

No heading

No headings in the article.

Do you want to learn react.js and build applications with it? This article covers the most basic part of react: creating a react application.

In this article, we'll be using a very popular development tool: the command prompt or terminal.

What is React?

React is a declarative, efficient, and flexible front-end JavaScript library for building user interfaces or UI components. React makes it painless to create interactive UIs. It was created by Facebook in 2015 and has been maintained by a community of individual developers and communities

This is not a react tutorial, so we won't dive deep into the structure of react. Now that you know what react is, let's dive into creating our first react app.

Creating our first React application

First, Open up your terminal. If you are using a MacBook, you can just open your launchpad(the 6 window-like button on your keyboard). If operating on windows OS, navigate to your apps folder and open the terminal. Either way, you could search anywhere in your system for the terminal.

After opening, the terminal, you should see a window come up. The default directory location of the terminal is the root folder of your system, which in most cases, has been renamed to your name. This is how your terminal should look if you're using a Mac

Screenshot 2022-11-04 at 01.21.09.png

Then, we have to navigate to the folder you want to create your app in, which, once again, is usually the documents (It could be any folder of your choice though.). We do this by changing the directory to the folder you want to work in. I'll be making reference to documents since I use documents but, once again, it could be any folder you want. Use the command below and hit enter:

cd documents

Then, your terminal should change to this:

Screenshot 2022-11-04 at 01.22.44.png

Great! Now, the next command to enter is the create react app command. This command is for those using npm.

npx create-react-app appname

NB: If you don't have npm installed, this command won't work since the npx package comes with the npm package manager. To see if you have npm installed, run the following command:

npm -v

If it doesn't return any version, it means you don't have npm. To install it, paste the following into the command line/terminal:

npm install -g npm

Alternatively, if you are using the yarn package manager, the following command is for you:

yarn create react-app appname

Feel free to replace appname with whichever name you choose. Whatever you do, remember not to add spaces in your app's name since it'll only use the first word in the name as the app's name.

When your app has been created, it should look like this Screenshot 2022-11-04 at 02.06.51.png

And, as is stated, we'll move into the app's folder by typing cd appname

cd appname

Note that appname should be replaced with whatever name you gave to your app

And then, we'll start the development server by typing the following command:

npm start

When you do that, your browser should pop up showing this window:

Screenshot 2022-11-04 at 02.33.05.png

And Voila! Your app is ready. Now you can open it in your local IDE and make changes to get started.