Create your first React App

Photo by Luke Chesser on Unsplash

Create your first React App

Programming School
·Jun 2, 2022·

2 min read

Subscribe to our newsletter and never miss any upcoming articles

Play this article

Table of contents

  • Required Packages
  • Create the App
  • See the result and learn project structure
  • Project Structure

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:

image.png

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 📖

 
Share this

Impressum

Practice to master