How to Create a React Application Post-CRA Deprecation

Hey there, fellow developers! ?

I was recently working on a project and learned that the React team deprecated create-react-app (CRA) two years ago. ? Naturally, this got me thinking about alternative ways to set up a JavaScript-based React application.

When I checked out the official React documentation, I noticed they now focus on full-stack frameworks like Next.js and Gatsby. These are awesome if you’re building an end-to-end application, but they can be overkill if you just want a simple JSX-based project. ?️

Before starting - What does CRA do? - Create React App (CRA) is a powerful package that automates the setup of a new React project. It handles all the necessary configuration and installs the required dependencies, providing a zero-configuration bundler. This allows developers to start building their applications without worrying about the complex setup of tools and configurations.

So, now CRA has been deprecated then how to setup pure JSX App? ?
Here I will share Two popular choices(Vite and Webpack) to create a client-based application with the React library. Below Section, We'll compare these tools and give you setup instructions for each. Let’s dive in! ?‍♂️

⚡ Vite vs Webpack ?

Vite

Pros:

-Fast development server with instant hot module replacement (HMR).
-Built-in support for modern JavaScript features.
-Minimal configuration is 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:

1. Run the Vite command in your terminal

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. Start the Development Server:

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

1. Initialize Your Project:

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

2. Create Project Structure:

 1. Create a src folder and add index.js and App.js files.
 2. Create a public folder and add an index.html file.

3. Configure Webpack:

• Create a webpack.config.js file:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

4. Babel Configuration:

• Create a .babelrc file:

npm run dev

5. Start the Development Server:

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 medium 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!

The above is the detailed content of How to Create a React Application Post-CRA Deprecation. For more information, please follow other related articles on the PHP Chinese website!