React Starter App
Tags: node, npm, react, createreactapp
Published: 2020-12-25 03:44:21

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!*

React is a flexible and lightweight library that improves the performance of an app. React can be installed without the user's configuration. The package manager can either be **NPM** or **yarn**, and the tool or package is **create-react-app**. We will install via npm instead.

> **[Visual Studio Code](https://code.visualstudio.com/download)** will be used instead. To use the **NPM** package to create a React app, [install Node](https://nodejs.org/en/). 

Follow the steps below to install React:
1) Open Visual Studio Code in any terminal (root directory).
```bash
code .
```
2) Open Visual Studio terminal, `Ctrl` + `Shift` + `'`
3) Navigate to the Desktop directory.
```bash
cd Desktop
```
4) Create a React app (my-app). For Windows.
```
npx create-react-app my-app 
```
5) Create a React app (my-app). For Mac and Linux.
```bash
sudo npx create-react-app my-app
```
6) Change directory to project folder, my-app.
```bash
cd my-app
```
7) Start a development server.
```bash
npm start
```
#### [React Starter App Demo](https://react-starter-app.techstackgit.repl.co)

{% stackblitz react-eelwjg %}

> The development server runs the app at port 3000 on your local machine by default, [http://localhost:3000/](http://localhost:3000/). If the port is different, it means another server is already running at port 3000.

If interested to install React online on Replit follow the steps below:

{% replit @techstackgit/Desktop %}

[Steps](https://camo.githubusercontent.com/b275c108e1c9e2d1c732a66ca1e0b6ecb1ae260824fb5d6ca4c4e46ee85d1ca0/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f66616365626f6f6b2f6372656174652d72656163742d61707040323762343261633765666130313866323534313135336162333064363331383066356661333965302f73637265656e636173742e737667):
- Click the *Shell* navigation tab.
- Follow steps 4 - 7.

The installation process is documented on the [Facebook Github repository](https://github.com/facebook/create-react-app/blob/master/README.md).

After installation of React, the most relevant folders in the my-app project are structured as shown below:

```bash
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js
```

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

{% user bello %}

#### Techstack | Flutterwave 
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!  Also, you get a Flutterwave dollar barter card when you [signup](https://dashboard.flutterwave.com/signup?referrals=RV686851). Open an online store and take your business anywhere in the world.

{% youtube ClXVUM3Rf7A %}

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.