# Mastering React Project Setup: Going Beyond Create React App"

### Introduction:-

Create React App (CRA) is a popular tool for setting up React projects, but it's not the only option. In this blog post, we'll learn how to set up a React project without CRA. This will give us more control over the configuration of our project, and it's also a good way to learn more about the underlying technologies that power React.

**Benefits of setting up React without CRA**

There are a few benefits to setting up React without CRA:

* **More control over your project:** CRA sets up many things for you out of the box, but this can also limit your control over your project. If you set up React without CRA, you have more control over the build process and the dependencies that you use.
    
* **Flexibility:** CRA is a great option for beginners, but it can become limiting as your project grows. If you set up React without CRA, you have more flexibility to customize your project to meet your specific needs.
    
* **Performance:** CRA adds some overhead to your project, so if you're building a performance-critical application, consider setting up React without CRA.
    

**Prerequisites**

Before we dive into setting up your React project, make sure you have the following tools and technologies installed on your system:

1. [Node.js](https://nodejs.org/): React requires Node.js, so please make sure it's installed on your machine .
    
2. A code editor of your choice (e.g., Visual Studio Code, Sublime Text, or Atom).
    

**Project Setup:-**

**Step 1: Setting Up the Project :**

First, let’s create a new directory for our project and we'll call it "my-react-app."

```powershell
mkdir my-react-app
cd my-react-app
```

This will create a new directory.

**Step 2: Initialize a New Node.js Project :**

```powershell
npm init 
```

This will ask some questions regarding the project details and will create a new `package.json` file in your project directory. We can also do  
`npm init -y` which can be used to skip the setup step, `npm` takes care of it and creates the `package.json` JSON file automatically, but without configurations.

**Step 3: Installing Dependencies**

* Next, we need to install React and ReactDOM :
    

```powershell
npm install react react-dom
```

It will install React and ReactDOM as project dependencies from the node module that we Initialized in the previous step.

* We will also install Parcel
    
    `Parcel/Webpack` is type of a web application bundler used for development and production purposes or to power our application with different types of functionalities and features.
    
* Installation command
    
    ```powershell
    npm install -D parcel-bundler
     
    ```
    
    `-D` is used for development and as a development dependency.
    
    
    **Step 4: Project Structure**
    
    Once your dependencies are installed, you can start creating your React project. Here is a basic project structure that you can use:
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699169730335/de3292ad-b8b5-48b6-a120-481ffb014198.png align="center")
    
    The `src/` directory will contain all of your source code, including your React components and your main entry point file (`index.js`). The `components/` directory will contain any reusable React components that you create.

    
    **Step 5: Entry Point File**

    
    The entry point file is the file that Parcel will use to start bundling your project. In this case, it will be the `index.js` file. Here is a simple example of an entry point file:
    
    ```javascript
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    ```
    
    This script imports the React and ReactDOM libraries, along with the App component from the components/ directory. Subsequently, it proceeds to render the App component within the root element of the Document Object Model (DOM).
    

**Step 6: App Component**

The `App` component is the main component of your React application. It's responsible for rendering the entire UI. Here is a simple example of an `App` component:

```javascript
import React from 'react';

function App() {
  return (
    <h1>Hello, world!</h1>
  );
}

export default App;
```

This component simply renders the text "Hello, world!" to the DOM.

**Step 7: Starting the Development Server**

To start the development server, run the following command in the terminal:

```powershell
npx parcel build index.html
```

This will start a development server at [http://localhost:1234](http://localhost:1234). You can open this URL in a web browser to view your React application.

### Conclusion**:-**

By following these steps, you've successfully set up a React project without creating React App and harnessed Parcel for bundling. This method offers flexibility and efficiency. You can easily expand your project by adding dependencies, giving you freedom and control over your React applications.