React JS Getting Started

To get started with React, you’ll need to have a recent version of Node.js and npm installed on your computer. Node.js is a JavaScript runtime that allows you to run JavaScript on the server, and npm is a package manager for JavaScript that makes it easy to install and manage third-party libraries and dependencies.

Once you have those, you can use npm to install the create-react-app package, which is a command-line tool that helps you quickly set up a new React project. This package includes a development server, a build tool, and a set of default components and configuration files that will help you get started.

To install create-react-app, open a terminal window and run the following command:

npm install -g create-react-app

This will install the create-react-app package globally on your computer, so you can use it to create new React projects from any directory.

Once create-react-app is installed, you can use it to create a new React project by running the following command:

create-react-app my-app

This will create a new directory called “my-app” inside your current directory, and will generate all the files you need to start building your React app. The directory structure will look something like this:

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

The files in the “public” directory are static files that will be served by the development server. The “src” directory contains the JavaScript source code for your React app.

To start the development server, navigate to the new “my-app” directory and run the following command:

cd my-app
npm start

This will start the development server and automatically open a new tab in your default web browser with the address http://localhost:3000. This is the URL where your React app will be running. The development server will automatically reload the page whenever you make changes to your code, so you can see your changes in real-time.

To stop the development server, go back to the terminal window where you ran the npm start command and press CTRL+C.

That’s it! You’ve successfully set up a new React project and started the development server. Now you can start building your React app by editing the files in the “my-app” directory. The entry point for your app is the “index.js” file in the “src” directory. This is where you can import the default components from the “react” and “react-dom” packages and render them to the page.

For more information, you can check out the official React documentation, which includes a tutorial that will guide you through the process of building a simple “todo” app with React. You can also check out the create-react-app documentation, which includes detailed instructions on how to use the development server and build tool.