React is an incredibly famous and influential javascript library for building
web applications. One of the primary edges of react is to create reusable
components that help developers to make a clean and maintainable application.
Generally, developers use create-react-app (CRA) to build a
react application. It is the building tool for creating a react project. CRA
is no longer a good option for many developers these days. It takes a lot of
time to set up a new development server. Due to the large codebase, it takes a
long time to reflect changes. Today, we will see
5 create-react-app alternatives to overcome this problem.
These alternatives are advance featured, faster, more flexible, and maintainable. If you are worried about the production, these provide a production-ready environment. After using them, you will forget about CRA. So, let's get started.
CodeSandbox
If you are worried about storage and want an online IDE. CodeSandbox is a cloud-based IDE that enables you to code online. You can code on it in any language without worrying about storage. Dependencies and packages are installed on it with a single click. You don't need to type commands to install packages. Apart from this, you can also collaborate on a single project with different devices.
How to create react app on CodeSandbox?
Here are some steps to make a react app on CodeSandbox.
-
Goto official site of CodeSandbox.
- Click on Create Sandbox.
- Now, Select "React" from a variety of templates.
- Congrats, Your project is settled up. Now, you can write code and observe changes. It contains everything you need. You are free to install additional dependencies with one click in your project.
Now, let's see another one.
React CDN
Creating react app using react CDN is the most efficient way if your device doesn't have npm installed. Setting up react project is way more difficult for beginners. The installation process takes a long time for newbies since they are unfamiliar with the React environment. Instead of installing, you can use React CDN. It is simple and fast.
How to create a react app using react CDN?
You can take the following steps to make react app.
-
Create a
index.htmlandindex.jsfile in a folder. -
Add CDN links to your HTML file.
You can also paste the given code into the HTML file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React CDN</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script src="./index.js" type="text/babel"></script> </body> </html> -
Create a simple react component. Create this react component in
index.jsthe file. You can copy this code and paste it into your javascript file.const MainContent = () => { return ( <div> <p>Main content goes here...</p> </div> ); } //render the component to the DOM ReactDOM.render(<MainContent />, document.getElementById('main-content')); -
Now, Run the
index.htmlHTML file. -
Go to the URL
http://127.0.0.1:5500/index.htmlyou will see your output.
Vite + React ❤️
Vite is the most favored building tool for react applications. Unlike regular web packs, vite builds your project very fastly. This is due to the vite taking up to 31 MB of dependencies. It is lightweight and saves a lot of time. The incredible feature of vite is hot module replacement. Due to this, it can pull APIs fast and correct updates without the page loading. It also uses the ECMA Script module to link javascript files. 👇🏼👇🏼👇🏼👇🏼
You can also check this article on How to create a react app using Vite js and tailwind CSS.
How to create react app using vite js?
Create this by using the following steps
-
Run the command to create project scaffolding.
npm create vite@latest
-
After setting up react project scaffolding, go to the project.
cd project_name
-
Install dependencies.
npm install
-
Run the application
npm run dev
Let's see another one.
Next.js 🔥🔥
Next.js is an advanced, lightweight, and powerful react framework. It enables you to do client-side and server-side rendering in your application. It makes your application fast. Additionally, it offers an SEO-friendly approach that will improve the search engine visibility of your web application. For an in-depth tutorial, you can check this article 👉🏼👉🏼👉🏼Create a Next.js App with Tailwind CSS.
Creating a next.js app
Run the following command to create the next.js application.
-
Create the next app by running the given command into the terminal.
npx create-next-app@latest # or yarn create next-app # or pnpm create next-app
This will set up your app automatically. You do not need to create directories and files.
- After completing the installation. Goto the project.
-
Run the app
npm run dev
-
Your app is ready.
Visit
http://localhost:3000to view your application.
Remix Framework 💡💡
Remix is a full-stack web framework. Today, it is not much popular. But it is way faster than the next js application in static and dynamic content. Using remix, you can create a modern application simply and fastly. It is one of my favorite frameworks. The data is loaded parallel on the server during the loading process. And fully formed HTML documents are sent.
How to create react app using remix?
To create a remix app, run the given command into your terminal.
-
Create Remix app
npx create-remix@latest
This will set up your react app automatically. You can see the information required to create this app in the image.
-
Go to your project
cd project_name
-
Now, Run Your app
npm run dev
We covered all five ways to make react applications.
Conclusion
create-react-app CRA is no longer a good option for many developers these days. It recommended using other frameworks to make a fast and flexible application. I provided you these 5 best create react app alternatives. You are free to use any one of them. So, try yourself and explore them.That's it for the day. I am sure you learned something new in this tutorial. If you do, share this article with your friends. Leave your valuable feedback in the comment section. It means a lot to us.