Exploring React Without Create React App (CRA)

Create React App (CRA) has become the de facto tool for setting up React applications quickly. However, understanding how React works under the hood and having control over the configuration can be essential for certain projects. In this article, we'll dive into the process of setting up a React application without using Create React App, exploring the core tools and configurations that CRA abstracts away.

Setting Up the Project:

To start, let's set up a basic React project from scratch. We'll need Node.js and npm installed on our machine.

Initialize a New Node.js Project:
```
 mkdir my-react-app
 cd my-react-app
 npm init -y
```
This creates a package.json file with default values.
Install React and ReactDOM:
```
 npm install react react-dom
```
This installs React and ReactDOM as dependencies in your project.
Set Up the Project Structure:

Organize your project with the following structure:
```
 my-react-app/
 ├── public/
 │   ├── index.html
 ├── src/
 │   ├── index.js
 ├── package.json
```
- public/index.html: The HTML file where your React app will be injected.
- src/index.js: The entry point for your React application.

Configuring Babel:

Next, let's configure Babel to transpile our JSX code and ES6 features.

Install Babel Packages:

 npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

Create a Babel Configuration File:

Create a .babelrc file in the root of your project:
```
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"]
 }
```
Configure Webpack:

Webpack is a powerful tool that helps bundle your JavaScript files. Install Webpack and the necessary loaders:

bash npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

Create a webpack.config.js file in the root of your project:

```js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js', }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', }), ], }; ```

Creating the React App:

Now that we have our project set up and configured Babel and Webpack, let's create a simple React component.

Create the App Component:

In src/App.js:

 import React from 'react';

 const App = () => {
   return (
     <div>
       <h1>Hello, React without CRA!</h1>
     </div>
   );
 };

 export default App;

Render the App Component:

In src/index.js:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

 ReactDOM.render(<App />, document.getElementById('root'));

Create an HTML Template:

In public/index.html:

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>React without CRA</title>
   </head>
   <body>
     <div id="root"></div>
   </body>
 </html>

Running the Application:

Now, let's add a few scripts to our package.json file to easily run our development server.

"scripts": {
  "start": "webpack serve --mode development --open",
  "build": "webpack --mode production"
}

Run the development server:

npm start

Visit http://localhost:8080 in your browser, and you should see your React app running without Create React App.

Conclusion:

Setting up a React project without Create React App allows you to have more control over your configuration, making it suitable for larger projects with specific requirements. Understanding the underlying tools like Babel and Webpack enhances your ability to optimize and tailor your development environment.

While Create React App provides a convenient abstraction, going through the process of