Getting Started with React

To get started with React, we can use the `create-react-app` command which is an officially supported way to create new React applications with a predefined project structure and build configuration.

A basic understanding of HTML, CSS and Javascript is required.

HTML: It is used to create the presentational layout structure of our web pages.
CSS: It is used to style our components and layout of web pages, and provide support for responsiveness across cross-browsers.
Javascript (ES6+): It is used to interact with HTML elements such as manipulating DOM, assigning values and handling events associated with specific elements, overall it takes care of functionality.

Install Node.js and npm

Before that, make sure Node.js and npm (Node Package Manager) are installed on our machine or Download them from its official websites

Example:

For Mac: Click Here
For Windows: Click Here

Create a New React App

Command:

npx create-react-app my-first-react-app

Open your terminal and run the following command to create a new React app:

`npx` is a pre-installed package in the node.js that is used to create new react applications from scratch.

Command:

npx create-react-app my-first-react-app -y

update "my-first-react-app" with the desired name of your project. This command will download the necessary dependencies and set up a new React project for us.

To Get rid of the prompt question asked while setting up the project by the above command.

Command:

cd my-first-react-app

It will create a basic structure of the react application from scratch by bypassing the prompt question.

Command:

npm start

Navigate to Your Project

Change into the newly created project directory:

Start the Development Server

Run the following command to start the development server and open your React app in a new browser window:

This will start the development server and launch your app at http://localhost:3000/. You can view your React app in your browser.

Explore the Project Structure

The create-react-app tool creates a standard project structure for your React app. Key directories and files include:

src/: Contains your React application source code.
src/index.js: The main entry point for your React app.
src/App.js: The main component of your app.
public/: Contains the HTML file and other assets.

Make Changes and Experiment

Open the `src/App.js` file and start making changes to see how the React components work.

As you make changes, the development server will automatically reload your app in the browser.

<-- Introduction

Upgrade Version -->