34

11 React Application Boilerplates for 2019

 5 years ago
source link: https://www.tuicool.com/articles/hit/RRRVne
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

As React continues to evolve and help us to build and compose our applications’ UI, more React applications are created every day.

In the past couple of years, the community created multiple projects to help you save time and kick-start these apps. But, choosing the right boilerplate (create-react-app right?) isn’t always as simple as it seems. It can affect not only the initial setup but also your app’s ability to scale in your environment.

To help you get the information and make a solid choice, I’ve gathered some of the best open source boilerplates out there (unranked). I’d also advise that you use tools like Bit to organize your reusable components and use them in your different app to build faster by just composing them together.

6ji6Z3j.gif
React component withBit

Let’s dive in!

1. Create React App

YFNB7br.gif

This incredibly 65K stars project is FB’s official start-kit for React, which lets you set up a modern web application by running one command with no build configurations (you don’t need to install and configure Webpack or Babel!). V.2 was recently released with full support for Babel 7, Webpack 4, new styling options, and more integrations into our favorite workflows (while removing support for Node v.6). However, there are still some known issues, especially around the need to eject from the project.

The project’s philosophy relies on a few principles such as having just one build dependency: It uses Webpack, Babel, ESLint, and more, but provides a cohesive experience on top of them while no configurations are required.

At the end of the day, this is the fastest and most effective way to get the job done for most use cases, mainly around straight-forward web applications.

2. React Boilerplate

qqU7Bbq.png!web

This 22K starts library by Max Stoiber is a highly scalable, offline-first React setup with a strong emphasis on developer experience and application performance. Its DX orientation is felt in features like letting your saved changes to the CSS and JS be reflected without refreshing the page. Preserve application state even when you update something in the underlying code. It even automates the creation of components, containers, routes, selectors and sagas — and their tests — right from the CLI. And there’s more.

While not as fast to set & go as create-react-app, it’s a developer friendly and powerful alternative to those who favor their dev workflow and performance.

3. React Slingshot

q2UvIrQ.jpg!web

A neat 9K stars project by Cory House which provides a React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built-in. Slingshot offers a rich development experience using React, Redux, Babel, Webpack, Jest, Sass and more . It provides hot reloading (and testing) upon saving which is very useful, so feel free to give it a try.

4. React starter kit

yMzuYfz.png!web

A 18K starter kit which aims to be opinionated. It’s a boilerplate for web development built on top of Node.js , Express , GraphQL and React , containing modern web development tools such as Webpack and Babel . “ Feature branches ” provide customized integrations for tools like Redux and Apollo.

5. Razzle

BJVrMnm.png!web

This 6K project helps you create server-rendered universal JavaScript applications with very little configuration. Razzle abstracts complex configuration needed for SSR into a single dependency, giving you the experience of create-react-app , but then leaving the rest of your app’s architectural decisions a to you. Razzle works with React, but also Reason, Elm, Vue and Angular. It features Universal Hot Module Replacement, ES6 support, CSS setup of CRA and works with many tools. Try it out.

6. Rekit

Rekit is a toolkit for building scalable web applications with React, Redux and React-router. Since march 2018, Rekit uses create-react-app to create the applications and focuses on providing the envelope- on an IDE level- for developing and scaling the app from boilerplate to large-scale apps. Note that it will force a certain foler/code structure you might find opinionated. Try it:

7. React Redux Universal

bAFRvme.png!web

I wasn’t sure if this 11K stars (100+ contributors) and 2–3 years old repo should be on the list. I decided to add it, since it is after all well-crafted and universally-aspiring solution. It’s a starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform. While the project’s integration list is exceptionally rich, some might be outdated, so use with care. Here are a demo application and some quick explanations . Take a look.

8. React Go

// to run and render a react router based component
res.render('/account', {});
// or more generically
res.render(req.url, {});

// to render a react view
res.render('index', {});

PayPal’s 1.5K stars composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views, enabling server rendered views to be client mountable. Note that this project, started in 2015 and developed since, was created to save boilerplating overhead for PayPal team adopting React. Since PayPal was (still is?) using Express heavily at the time, the project is largely focused around this workflow. Check it out.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK