🔧 How to Create a React Application Post-CRA Deprecation

I was recently working on a project and learned that the React team deprecated create-react-app two years back. Initially, I didn't buy it But when I went to the new React-dev website, I noticed forgot about CRA they haven't mentioned how to create a simple React+bundler App

Create a React App Without CRA: Using Vite or Webpack
Since the React team deprecated create-react-app (CRA), developers are looking for alternative ways to set up their React applications. Two popular choices are Vite and Webpack. In this post, we will compare these tools and provide basic setup instructions for each.

Vite vs. Webpack
Vite
Pros:
Fast development server with instant hot module replacement (HMR).
Built-in support for modern JavaScript features.
Minimal configuration needed to get started.
Cons:
Newer tool, so it may have less community support compared to Webpack.
Webpack
Pros:
Highly configurable and flexible for complex build setups.
Extensive plugin ecosystem and community support.
Proven track record with many large-scale applications.
Cons:
Initial configuration can be more complex and time-consuming.
Slower build times compared to Vite.
Setting Up a React App with Vite
Create a New Vite Project:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
Start the Development Server:

bash
Copy code
npm run dev
Vite Configuration:

Vite requires minimal configuration out of the box. The default setup should work for most React projects.
You can customize the vite.config.js if needed.
Setting Up a React App with Webpack
Initialize Your Project:

bash
Copy code
mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react
Create Project Structure:

Create a src folder and add index.js and App.js files.
Create a public folder and add an index.html file.
Configure Webpack:

Create a webpack.config.js file:
javascript
Copy code
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
contentBase: path.join(dirname, 'dist'),
compress: true,
port: 9000,
},
};
Babel Configuration:

Create a .babelrc file:
json
Copy code
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Start the Development Server:

bash
Copy code
npx webpack serve
Conclusion
Both Vite and Webpack offer powerful ways to set up a React application without CRA. Vite provides a faster and simpler setup, ideal for smaller projects and rapid development. Webpack, on the other hand, offers extensive configurability and a robust ecosystem, making it suitable for more complex projects.

Choose the tool that best fits your project requirements and preferences. Happy coding!