Create Your First React App

Prerequisites

1. Make sure you have Node.js and npm installed.You can install it via Node.js or NVM (Node Version Manager)
2. Basic knowledge of terminal commands.

What is ReactJs?

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

It is the most popular framework for building user interfaces, as big companies like Airbnb, PayPal , Twitter and Netflix all uses react. As a result of that we have a huge community to turn to when there is a bug in our react project.

In this project we will use Create React App. It is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. Install it globally via :

npm install -g create-react-app

After installation is done we can create a new react project. Open the terminal or any text editor of your choice and change directory to where you want your project to be saved to and then issue the command :

npx create-react-app myapp

npx is the package manager runner

npx create-react-app followed by the name of your project ( In this case 'myapp' is the name of the project) it will usually take a while for the app to be created

which will give us react project structure, the ability to use the latest javascript features and tools for optimizing our app for production.

It will create a directory called myapp inside the current location. Inside that directory (myapp), it will generate the initial project structure and install the transitive dependencies.

Output

myapp
├── README.md
├── node_modules
├── package.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

No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder so you can start it :

cd myapp

Inside the newly created project, you can run some built-in commands:

Using npm :

npm start

Or yarn :

yarn start

Which will start the development server and you should see something like this

In your terminal. Open localhost:3000 in your browser to view the app, the default react logo will display from the component to the page.

NOTE : The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Wrap up

Create React App doesn’t handle backend logic or databases, it just creates a frontend build pipeline, so you can use it with any backend you want to build your project on.

Thanks for making it to the end of this tutorial! , teaching react is beyond this article, you can learn more on the official react website here. I hope this helps you out there! happy coding!!!