Choose wisely how to start your new React application.

Jonathan Saring

Follow

11 min read

·

Aug 11, 2022

--

3

Listen

Share

Creating a new React application is not a simple task.

Not just because you’ll have to work hard, but mainly because you have some key decisions to make that will affect your ability to scale, collaborate, and make this app work with the tools and needs you use today — and in the future. The decision on how to create a new React application need to be made in light of your end goal — are you building a full-blown web product? A marketing site? Will there be heavy engagement with the server? How many developers will be working on this app? Should it contain components you already have in other applications and want to use? How will it be built and deployed? and so on.

The more scalable and rich your application should be in technology, integrations, features, and people working on it — the more important it is to choose a foundation that will not just let you start easily, but will serve your needs down the road and allow your application to grow.

In this article I’ve rounded up some of the best ways, frameworks and tools for creating a new React application. Some of them serve a small website and optimize for fast ramp-up, some are for global scale, and some are both.

I hope it will help you on your journey to build a React application that will make you happy, and save time and mistakes in the process. Please feel free to comment and ask or suggest anything below. Enjoy.

1. Nothing but React

You can simply create a new React app without anything else.

Since React is a library and not a framework like Angular, you will naturally have to add the tools and solution you need to build a full-blown production ready application. There will be a lot of boilerplating and configs to make, but since you’re the one doing it you can make it fit your exact use case and needs.

2. Bit

The greatest benefit of Bit is in composability and scalability.

Here’s a tutorial to get you stared hands-on:

With Bit, your app is composable — which means it’s built in a modular way with independent (reusable) components that you can easily create, update, deploy and share. You can quickly add and integrate any new tech or tool into your app’s toolchain and workflow, and thanks to modularity you will be able to keep your system’s development fast and flexible even as you scale.

W ith Bit you can manage many apps in a single workspace, where each app may have it’s own stack, without complex CI and build setup: No need to configure per-repo ci pipelines. Apps are also “micro frontends” and support singlespa, module-federation, ESM and UMD to build MFEs from components and compose them in runtime. Any app can be a dependency on other apps.

In your apps, every component and even the app component itself are developed, versioned, managed, published, developed, tested and built separately and all dependencies are managed. This is in fact a full-blown monorepo experience, while each module is independent.

Every single component you make (i.e. unit of code, from a UI elements to an entire page or feature and even NodeJS or just plain js code) can be used in many different apps (via bit.cloud which is free except for enterprises), and many different developers can enjoy decoupled development and build together. It makes most of the pains of scaling app development go away and makes it easy to collaborate and keep development consistent at scale too.

Bit has built-in support and predefined templates for React apps, reusable components, express apps, node modules and more. It provides everything out of the box: nested routing with react-router, SSR, composable styling with themes, and everything else.

You can try it out here with a template.

$ bit create react-app apps/my-react-app1 component(s) were created
my-org.my-scope/apps/my-react-app
    location: my-scope/apps/my-react-app
    env: teambit.harmony/aspect (set by template)$ bit use my-org.my-scope/apps/my-react-app$ bit run apps/my-react-app// The output displays the port used for serving that app:apps/my-react-app app is running on http://localhost:3000

Bit can be used to power monorepo and polyrepo architectures, as the Bit workspace makes it easy to develop, version, test, build and release in a modular way regardless of repo architecture.

Bit comes with native support for just about any tool in the React ecosystem, including for example react-router and pre-rendering or TypeScript support, and can be easily extended to support more tools and workflows to develop, build, test, and deploy your applications any way you want.

Setting up a new React app is easy, and you get a local development UI that makes it easy to visualize and see your app development live as you build.

You can start a new React app or fork an existing template here:

For example, you can build a modular e-commerce React frontend app, creating reusable and customizable components for anything from UI and design all the way to full experiences and even authentication. You can then quickly build and manage many different e-commerce apps, which can all connect to your backend, CMS, and different tools of choice.

This makes Bit the best option for apps that will need to scale, when there are many apps that share components/features and design, and where there are many applications/components/developers working together. This makes Bit a popular choice for large or growing organizations that need to work fast and consistently together at scale.

You can check out a few of quick examples:

• Bit’s community and open-source website on bit.dev which is a React app built with Bit (the component highlighter to help you explore):

• Bit’s blog, located on the bit.cloud website, which is also a full-blown deployed React app, and which shares components with bit.dev:

• A few examples of different apps such as a basic React app, a wiki app and more:

3. NextJS

Next.js is a popular and lightweight framework for static and server-rendered applications built with React. It includes styling and routing solutions out of the box, and assumes that you’re using Node.js as the server environment.

Next comes equipped with all the ins and outs you need for a modern React application, such as hot reloading, routing, hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.

The usual project structure looks like this:

/public
    favicon.ico
/src
    /components
        /elements
            /auth
                AuthForm.tsx
                AuthForm.test.ts
            /[Name]
                [Name].tsx
                [Name].test.ts
    /hooks
    /types
    /utils
    /test
        /api
            authAPI.test.js
            [name]API.test.js
        /pages
            index.test.js
    /pages
        /api
          /authAPI
              authAPI.js
          /[name]API
              [name]API.js
        _app.tsx
        _document.tsx
        index.tsx

Next puts an emphasis on communication with the server (it can also generate a static site), which makes it more scalable than similar non-composable solutions when you need a website that supports both SSR and SSG optimization. It is optimized for performance and SEO.

While nextjs is a highly optimized tool that is great for ramping up a new website and allowing a healthy interaction with the server, it is a “monolithic” framework that does not allows much composability and don’t work out of the box with modular development concepts (e.g. the entire project is a single unit with one codebase, version, deploy etc and there’s no native integration with module federation and no composability by design).

You can get started here and explore a showcase here.

4. Remix.run

Remix is the new kid on the block.

Where everyone's fast, remix aims to be faster. It has cool stuff like nested routing (thanks to react-router) and native support for error boundries.

With Remix everything is SSR. It also allows you to modify things before rendering the page. Built on the Web Fetch API (instead of Node) it can run anywhere, for example on Cloudflare Workers, and supports serverless and traditional Node.js environments.

Remix takes pride in nested routing, which is the general idea of coupling segments of the URL to component hierarchy in the UI. That’s a an interesting thing, as segments of the URL determine things like yhe layouts to render on the page, the code split JavaScript bundles to load, and the data dependencies of those layouts. While some web apps fetch inside of components, creating request waterfalls, slower loads, and jank. Remix loads data in parallel on the server and sends a fully formed HTML document. That’s neat.

You can get started here and try out an example here.

And here’e a nice XRay of what it means to start with Remix:

5. Gatsby

Gatsby is all about speed: well-optimized websites with great SEO and performance and great ramp-up speed to build the app. It’s essentially a React-based framework for creating fast websites. It’s all about performance, SEO, and works well with markdown as well.

Gatsby generates static HTML in advance, which can subsequently be stored on CDNs (Content Delivery Network) across the globe to facilitate quicker access. It combines tools like GraphQL, React, and react-router that lets you ramp up quickly to a well-optimized website.

Gatsby comes with hundreds of plugins that let you add different functionality, integrations, and customizations:

Gatsby also takes pride in efficient Webpack configuration and

6. create-react-app

This one is the most commonly used tool on the list, but probably the last choice for a real-world production application.

Create React App is a comfortable environment for learning React, and is a quick way to start building a new single-page application in React even if you’re a new developer. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

To create a project, run:

npx create-react-app my-app
cd my-app
npm start

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js
}

Under the hood, it uses Babel and webpack, but you don’t need to know anything about them. When you’re ready to deploy to production, running npm run build will create an optimized build of your app in the build folder.

Besides providing something that works out-of-the-box, this has the added benefit of providing a consistent structure for React apps that you will recognize as you move between React projects. It also provides an out-of-the-box build script and development server.

Get started here:

7. NX

NX is a build system for a monorepo which can work on top of a react application. As such, it can be used in addition to some other frameworks like Nextjs. If you have a Bit workspace, your app is already a multi-package monorepo by design (each component and the app etc are versioned, managed, published, developed, tested, built separately and all dependencies are managed) and everything including builds will be run for only what changed, and dependencies and configs are managed for the app monorepo — so you don’t have to add NX. So adding NX is a choice you can also make down the road.

In NX the monorepo usalluy has multiple apps and libraries. Each app in a package, making somewhat of a monolith inside a larger monolith.

Though it’s not really a foundation for a react app and the necessary features. NX’s highly optimized monorepo builds solution (only build what’s changed) will let you optimize build times for your app, and will integrate to most of the tools in the ecosystem — which makes it a good tool to check out when creating a new react app. It also has a VSCode plugin and native integration, and on top it offers “NX Cloud” to run commands across multiple machines, giving you a consolidated view of the command as if it ran locally.

Honorable mentions

Note: Most of these have not been recently maintained and might not support the latest tools and workflows. Some are new or less commonly used.

• react boilerplate:

• Razzle:

• KYT:

• react-slingshot by cory house:

• react starter kit:

• pure react app

Learn more