Hi There

In this Article we will build a simple react app

Required Packages

There is two required packages:

1. Package Manager like npm, yarn and etc.
2. Node installed on your computer.

Create the App

1. Create the project folder

I will name the folder react-application

NOTE: Don't put any uppercase or space in the name of the folder

1. Run the terminal

If you on windows open terminal and go to the folder If you on mac do as in windows

Run the following Command in the terminal:

npx create-react-app ./

1. Open it on your code editor

You can open it on your own code editor but in this case i am using visual studio code so i will run code . in the terminal in the project directory

See the result and learn project structure

once you opened the project on your code editor go to the terminal and run the following commands:

# Yarn
yarn start
# npm
npm start

if you run the app with the previous commands it will automatically opened a new tab in your browser on http://localhost:3000

Now you can see the following page:

Project Structure

Project Structure:

my-first-react-app
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

There are unneeded files and needed files.

unneeded files:

logo.svg, serviceWorker.js, setupTests.js

needed files and folders:

├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js

If you clear the App.js file you can see the changes on locahost:3000

Congratulations 🎊, you created your first react application

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter and GitHub!

Thank you for reading 📖