This content originally appeared on Bits and Pieces - Medium and was authored by Justin Guckes
Changes in the React ecosystem: launch of reacht.dev, deprecation of create-react-app, and the increasing popularity of Next.js and Remix
Intro
React is one of the most popular JavaScript libraries for building dynamic web applications. Over the years, it has evolved significantly, with new features and best practices emerging that have changed the way developers use the library. Recently, there have been some significant changes in the React ecosystem that developers should be aware of. These changes include the launch of react.dev, the deprecation of create-react-app, and the increasing popularity of alternative frameworks like Next.js and Remix.
React.dev: A new home for React and its documentation
The React team recently launched react.dev, a new home for React and its documentation. The new site is an updated version of the previous React documentation, but it has been significantly improved with many new features and resources.
One of the standout features of react.dev is the abundance of diagrams, illustrations, and over 600 new interactive examples. These new resources make it easier for developers to visualize concepts and form mental models of how React works. This is especially important for new developers who are just starting to learn React.
Another significant change in the new React documentation is the adoption of hooks as the default way of building components.
Hooks are now the default
The React ecosystem is constantly evolving, with new tools, frameworks, and best practices emerging all the time. With the launch of react.dev and the deprecation of create-react-app, it’s One of the most significant changes with the new React documentation is the emphasis on using hooks. The old documentation assumed that readers were already familiar with class components, which made it challenging for new readers to learn React twice: once with class components, and then again with hooks. With the new docs, you’re now learning React the way it’s meant to be learned, which will likely speed up the learning process for many developers.
The deprecation of create-react-app
One surprising change in the new React documentation is the lack of mention of create-react-app. This popular tool was previously the recommended way to start a new React project, but it has since been deprecated by the React team. While create-react-app is still functional, developers are now encouraged to use alternative tools like Next.js and Remix or Vite.
Next.js and Remix: Alternative frameworks for building React applications
Next.js and Remix are two popular frameworks that have been gaining traction in the React ecosystem. These frameworks offer many advantages over create-react-app, including better performance, more advanced features, and a smoother development experience.
Next.js is a server-side rendering (SSR) framework for React that makes it easy to build fast, scalable, and SEO-friendly web applications. It includes features like automatic code splitting, optimized image loading, and built-in support for TypeScript and CSS modules. With Next.js, developers can easily create server-rendered React applications that load quickly and provide a great user experience.
Remix is another framework that has been gaining popularity in the React ecosystem. Remix is a new approach to building web applications that focuses on a better developer experience. It includes features like built-in linting, advanced routing, and serverless functions, making it easy to build high-quality React applications quickly. Remix also has a unique file structure that makes it easy to organize and manage complex projects.
Alternatives to SSR-Frameworks
In addition to Next.js and Remix, another popular tool for building React applications is Vite. Unlike Next.js and Remix, Vite does not support server-side rendering. Instead, it focuses on providing a fast and efficient development experience. Vite uses a new build tool called esbuild to compile JavaScript code incredibly quickly, making it ideal for large-scale projects. Vite also includes features like hot module replacement and fast development server, which makes it easy to build React applications quickly and efficiently.
Creating React-Apps without CRA
To illustrate how to create React apps using these different tools, let’s take a look at some code snippets.
First, here’s an example of how to create a React app using Vite:
# Install Vite globally
npm install -g vite
# Create a new project using Vite
vite create my-react-app --template react
cd my-react-app
# Start the development server
npm run dev
This will create a new React app using Vite and start the development server. Vite offers many advantages over other tools, including fast startup times, hot module replacement, and out-of-the-box support for TypeScript.
Now let’s take a look at how to create a React app using Remix:
# Create a new project using Remix
npx create-remix@latest my-react-app
cd my-react-app
# Start the development server
npm run dev
Remix is a full-stack framework for building web apps using React, and it offers many features out-of-the-box, including server-side rendering and data fetching. However, it also has a steeper learning curve than other tools, so it may not be the best choice for beginners.
Finally, here’s an example of how to create a React app using Next.js:
# Create a new project using Next.js
npx create-next-app@latest my-react-app
cd my-react-app
# Start the development server
npm run dev
Next.js is another popular framework for building web apps using React, and it offers many features like server-side rendering, automatic code splitting, and optimized performance out-of-the-box. It has a more gentle learning curve than Remix, making it a popular choice for many developers.
💡 Note: Developing apps with React is made easier if you’re using an open-source toolchain such as Bit. Bit makes it easier by providing an integrated dev environment (compiler, tester, linter, documentation, CI, dev server, and packaging/dependency management/bundler all-in-one) for building React apps. Bit enables you to use and reuse your React components across multiple projects, thereby maintaining a highly composable and easy-to-scale app.
Learn more here:
How to Create a Composable React App with Bit
Conclusion
In conclusion, the new React documentation is a significant improvement over the old docs, and the emphasis on using hooks will likely speed up the learning process for many developers. While the absence of create-react-app may come as a surprise to some, there are many other tools like Vite, Remix, and Next.js that offer different features and advantages. As a developer, it’s essential to choose the tool that works best for your project and your skill level.
That’s it!
Thanks for reading this article! If it was helpful or enjoyable, it would mean a lot to me if you could click the clap button. If you’re interested in the work I’m doing or have any proposals for changes, feel free to reach out to me on my social media accounts:
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
- How to Reuse and Share React Components in 2023: A Step-by-Step Guide
The Future of React: Why Create-React-App is Deprecated and Hooks are the Future was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Justin Guckes
Justin Guckes | Sciencx (2023-04-03T06:35:55+00:00) The Future of React: Why Create-React-App is Deprecated and Hooks are the Future. Retrieved from https://www.scien.cx/2023/04/03/the-future-of-react-why-create-react-app-is-deprecated-and-hooks-are-the-future/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.