# Installation & Project Setup

## Installation & Project Setup of ReactJS

ReactJS is a popular JavaScript library for building user interfaces. Whether you're a seasoned developer or just starting, setting up a React project is straightforward. This guide will walk you through the process step-by-step, ensuring you have everything you need to start developing with React.

### Prerequisites

Before diving into the setup, ensure you have the following installed on your machine:

1. **Node.js**: React requires Node.js for its development environment. Download and install it from the [official Node.js website](https://nodejs.org/).
2. **npm** (Node Package Manager): npm is included with Node.js. Verify the installation by running:

   ```bash
   node -v
   npm -v
   ```

### Step 1: Install Node.js and npm

If you haven't already installed Node.js, download it from the [Node.js official website](https://nodejs.org/). This will also install npm, which is essential for managing packages in your React project.

### Step 2: Install a Code Editor

A good code editor enhances your productivity. Some popular choices are:

* [Visual Studio Code](https://code.visualstudio.com/) (recomrecommended)
* [Sublime Text](https://www.sublimetext.com/)
* [Atom](https://atom.io/)

### Step 3: Set Up a New React Project

There are multiple ways to create a new React project. The recommended method is using `npm create vite@latest`.

**Installation:** First, ensure you have Node.js and npm installed. Then, run the following command:

{% tabs %}
{% tab title="Vite" %}

#### Step 1: Create a New Vite Project

Use the following commands to create a new Vite project:

```bash
npm create vite@latest
```

#### Step 2: Navigate to Your Project Directory

```bash
cd my-app
```

#### Step 3: Install Dependencies

```bash
npm install
```

#### Step 4: Start the Development Server

To start the development server and view your new React app in the browser, use the following command:

Using npm:

```bash
npm run dev
```

#### Step 5: Open Your App in the Browser

After running the development server, you should see output similar to this:

```
  VITE vX.X.X  ready in Xms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

```

#### File Structure

A typical Vite project structure looks like this:

```csharp
my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── yarn.lock (or package-lock.json)
```

{% endtab %}

{% tab title="CRA" %}

#### Using Create React App

`create-react-app` is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

1. **Install create-react-app** globally via npm:

   ```bash
   npm install -g create-react-app
   ```
2. **Create a new React application**:

   ```bash
   npx create-react-app my-react-app
   ```

   Replace `my-react-app` with your desired project name. The `npx` command ensures you use the latest version of `create-react-app`.
3. **Navigate to your project directory**:

   ```bash
   cd my-react-app
   ```
4. **Start the development server**:

   ```bash
   npm start
   ```

   This command will start a local development server and open your new React application in the browser. By default, it runs on <http://localhost:3000>.

#### Folder Structure

After running `create-react-app`, your project directory structure should look like this:

```
my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
```

{% endtab %}
{% endtabs %}

This command creates a new directory called `my-app` with a boilerplate React project. The `npm run dev` command starts a development server and opens your new React application in the browser.

#### Using Create React App

`create-react-app` is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

1. **Install create-react-app** globally via npm:

   ```bash
   npm install -g create-react-app
   ```
2. **Create a new React application**:

   ```bash
   npx create-react-app my-react-app
   ```

   Replace `my-react-app` with your desired project name. The `npx` command ensures you use the latest version of `create-react-app`.
3. **Navigate to your project directory**:

   ```bash
   cd my-react-app
   ```
4. **Start the development server**:

   ```bash
   npm start
   ```

   This command will start a local development server and open your new React application in the browser. By default, it runs on <http://localhost:3000>.

#### Folder Structure

After running `create-react-app`, your project directory structure should look like this:

```
my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
```

#### Key Files and Directories

* **`public/index.html`**: The main HTML file.
* **`src/index.js`**: The JavaScript entry point.
* **`src/App.js`**: The main App component.

### Step 4: Running and Building Your Project

#### Start Development Server

To see your changes live during development, start the development server:

```bash
npm start
```

This will automatically open your application in the browser and reflect changes as you edit the code.

#### Build for Production

To create a production-ready build of your app, run:

```bash
npm run build
```

This command will generate a `build` directory with optimized and minified files for deployment.

### Step 5: Additional Tools and Extensions

#### ESLint and Prettier

For maintaining code quality and consistency, install ESLint and Prettier:

1. **Install ESLint**:

   ```bash
   npm install eslint --save-dev
   ```
2. **Install Prettier**:

   ```bash
   npm install prettier --save-dev
   ```
3. **Add ESLint and Prettier configuration**: Create `.eslintrc.js` for ESLint configuration:

   ```javascript
   module.exports = {
     extends: ['react-app', 'eslint:recommended', 'plugin:prettier/recommended'],
     rules: {
       // Custom rules
     },
   };
   ```

   Create `prettier.config.js` for Prettier configuration:

   ```javascript
   module.exports = {
     singleQuote: true,
     trailingComma: 'all',
   };
   ```

#### React Developer Tools

For debugging and inspecting React components, install the React Developer Tools browser extension available for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).

### Conclusion

You've successfully set up a ReactJS project! This setup will help you develop and deploy your applications efficiently. For further learning and resources, refer to the [official React documentation](https://reactjs.org/docs/getting-started.html).