DEV Community

loading...
Cover image for React Starter App

React Starter App

bello profile image Bello Updated on ・2 min read
This article is 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!

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 will be used instead. To use the NPM package to create a React app, install Node.

Follow the steps below to install React:
1) Open Visual Studio Code in any terminal (root directory).

code .
Enter fullscreen mode Exit fullscreen mode

2) Open Visual Studio terminal, Ctrl + Shift + '
3) Navigate to the Desktop directory.

cd Desktop
Enter fullscreen mode Exit fullscreen mode

4) Create a React app (my-app). For Windows.

npx create-react-app my-app 
Enter fullscreen mode Exit fullscreen mode

5) Create a React app (my-app). For Mac and Linux.

sudo npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

6) Change directory to project folder, my-app.

cd my-app
Enter fullscreen mode Exit fullscreen mode

7) Start a development server.

npm start
Enter fullscreen mode Exit fullscreen mode

React Starter App Demo

The development server runs the app at port 3000 on your local machine by default, 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:

Steps:

  • Click the Shell navigation tab.
  • Follow steps 4 - 7.

The installation process is documented on the Facebook Github repository.

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

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
Enter fullscreen mode Exit fullscreen mode

Happy Coding!!!

Buy Me A Coffee

bello image

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. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.

Discussion (1)

pic
Editor guide
Collapse
kamalhossain profile image
Kamal Hossain

Nice, keep posting!