DEV Community

Cover image for Why React inside a Framework ?
Karam Mannai
Karam Mannai

Posted on

Why React inside a Framework ?

Recently, while reading the React documentation, I noticed something interesting in relation to the React app which I’ve been using for my project development…

For the once who don’t know, React is a popular JavaScript library used for building user interfaces. In the new React documentation, developers are advised to use React in popular frameworks like Next.js, Remix, and Gatsby instead of using React alone. The documentation provides several reasons for this, including the fact that even if your application doesn’t initially require routing or data fetching, you’ll need to add some libraries to handle those things.

As a result, adding these libraries will increase the size of your JavaScript (JS) bundle, and adding any feature will also increase the size of your project. This will slow down your application, which is a common problem with other frameworks like Vue or Svelte. In contrast, the current React frameworks solve all these problems without any additional libraries.

Next.js is currently the recommended framework due to its support for all the new React features in the experimental stage. It also provides built-in support for server-side rendering (SSR) and static site generation (SSG), making it easier to create fast-loading, SEO-friendly web pages. Additionally, Next.js supports automatic code splitting, which reduces the size of the JS bundle and speeds up page loading times.

Remix is another popular framework for React developers. It provides a set of conventions and tools that help you build scalable, production-ready web applications. Remix also supports SSR and SSG, and it’s designed to work well with popular serverless platforms like Netlify and Vercel.

Gatsby is a static site generator that uses React as its view layer. It’s designed to help you build fast, static websites that can be deployed to any hosting platform. Gatsby supports SSR and SSG, and it provides a wide range of plugins and themes that can help you add new features and functionality to your site.

React and Bundlers: Vite and Parcel

If you still want to use React alone, the documentation recommends using Vite or Parcel. Vite is a modern build tool that provides fast, lightning-fast build speeds and a modern development experience. It’s designed to be easy to use, and it provides hot module replacement (HMR) out of the box, which makes it easier to develop and test your React applications.

Parcel is another bundler that’s designed to be fast and easy to use. It provides a zero-configuration experience, which means that you don’t have to spend time setting up your development environment. Parcel supports a wide range of file types and provides built-in support for features like code splitting and HMR.

React Native and Expo

In React Native, the documentation recommends using Expo. Expo is a set of tools and services that help you build, deploy, and iterate on your React Native applications. It provides a range of features and APIs that help you build high-quality, performant applications without having to worry about the underlying platform details.

Expo also provides a set of pre-built components and UI kits that help you quickly create common UI elements like buttons, text inputs, and navigation bars. Additionally, Expo provides a range of development and testing tools that make it easier to develop and test your applications.

Conclusion

In summary, the React documentation advises developers to use popular frameworks like Next.js, Remix, and Gatsby instead of using React alone. These frameworks provide built-in support for features like SSR and SSG, which help you create fast-loading, SEO-friendly web pages. Additionally, they support automatic code splitting, which reduces the size of the JS bundle and speeds up page loading times.

If you still want to use React alone, the documentation recommends using Vite or Parcel. In React Native, the documentation recommends using Expo, which provides a range of tools and services that help you build, deploy, and iterate on your applications.

Finally, this does not mean that React cannot be used in internal projects and improved upon. The documentation emphasizes that developers should choose the framework that best fits their project’s requirements and constraints. React can still be used on its own, but it’s important to be aware of the potential drawbacks and to choose the appropriate bundler and additional libraries for your project.

Overall, the new React documentation provides valuable guidance for developers who want to build scalable, performant applications with React. By recommending popular frameworks like Next.js, Remix, and Gatsby, the documentation highlights the benefits of using pre-built solutions that already address common issues like routing, data fetching, and code splitting. Additionally, the documentation emphasizes the importance of choosing the right bundler and libraries for your project, and it provides recommendations for Vite and Parcel as well.

Ultimately, the goal of the React documentation is to help developers build high-quality applications that provide a great user experience. By providing clear, concise guidance on the best tools and practices for building with React, the documentation makes it easier for developers to focus on their core application logic and create great products.

Sources:

Top comments (0)