Design your way

Interested in finding good React boilerplates? If that’s the case, don’t worry – finding a good one has never been easier!

The likelier scenario is that you will be overwhelmed by great alternatives to choose from.

The first react boilerplate projects to appear are still the most popular ones – they have a leading number of GitHub Stars and must-have recommendations, and are available in many different packages and dependencies.

This will make it even more difficult to choose the right react boilerplates that will work for you.

When looking for a kit, developers usually look for something simple and easy to learn, and try to avoid complex and ultra powerful suites. At the end of the day, starter projects ought to be simple, and pack neatly the things most needed in a clutter-free environment.

What are React boilerplates?

As a novice user, you may find React boilerplates a bit too complicated to set up, but pretty straightforward once you get grasp of how they work. Getting a simple, create-react app will probably make the most sense in the beginning, especially when you want to skip burdensome development and coding.

The curious ones among you, however, have an unlimited world of possibilities to consider. Let’s check.

There are two basic requirements for each React user nowadays:

To secure a streamlined way to deliver all the node-modules code he wrote to his users

To make ES6 and JSX run successfully in any browser.

Both missions happen to be problematic to inexperienced users, and in order to solve them, they need two specific tools: babel and webpack. The one doesn’t necessarily exclude the other – you can always choose one to get the work done, but pairing them into a single ecosystem is proved to bring the best results.

Which are the top React Boilerplates you should be considering?

React Starter Kit

React Starter Kit is another opinionated and modern boilerplate built on React, Express, Node,js, and GraphQL. The pack combines a variety of advanced web development tools, including Browsersync, Babel, and Webpack, and helps you stay productive and make use of the industry’s best practices. The kit will work impeccably both for newcomers and industry professionals.

React Boilerplate

Here are some of the main benefits:

Fast scaffolding

You can create containers, routes, components, sagas, and selectors, and test them directly from your CLI.

Immediate feedback

You will be able to enhance your Developer experience (DX) and code apps faster than you can possibly imagine. All JS and CSS changes are saved automatically, and will reflect instantly without the need to refresh the page. In fact, the current state of your application will be preserved even while updating it in the underlying code.

Predictable and intuitive state management

You will be provided with unidirectional data flows that make it possible to log changes and debug time travel.

Next generation JavaScript

You will also have access to JSX syntax, object destructuring, template strings, and more similar elements right away.

Next generation CSS

For the purposes of complete modularity, you will be invited to prepare compostable CSS codes within the same location of your main components. In order to avoid style clashes and keep specificity low, you can also generate and use original class names, and yet ship only those styles that appear on the page to ensure top performance.

Industry-standard routing

Another thing you may wish to do is to add pages (for instance, an ‘About’ page) to the app, and React Boilerplate will make this possible with its industry-standard routing.

18 n support for internationalization

If interested to develop a scalable app, you should also be looking to implement support for several languages, and leave an open possibility to add more of them (‘react-inl’).

Offline-first

The latest trend in web app design is to make applications available even without a network connection.

SEO

React Boilerplate also supports SEO (management of document head tags) for those searching engines that index JavaScript content (Google is one of them).

React Slingshot

React Slingshot is another compact application development suite that targets beginners. You should choose it because:

It takes a single command to get started – just type ‘npm’, and you can begin developing in your preferred browser.
It provides instant feedback – Once you click ‘save’, the system reloads and saves your changes, and runs linting and automated tests.
It takes a single command to check – All the feedback you’ve collected will be displayed within a single command line.
It eliminates all JavaScript fatigue – In order to work with React, Slingshot ensues access to all powerful and best known libraries.
There is an Example App included for you to see how these elements work together.
Automated production – The key to launch your development work is again typing ‘npm’.

React Static Boilerplate

React Static Boilerplate (or RSB) is a server-less toolset dedicated to trendy and standalone web apps (SPAs). It is best known for reducing developers’ costs, and eliminating all EC2 instances and allowing them to host sites directly from CDN storage bases (GitHub, Amazon S3, Firebase, and so on). Still, all pages you’ve built using RSB will be fully responsive and functional due to their REST API, as well as GraphQL calls to different micro-services (Azure Functions, Amazon Lambada, Docker endpoints on DigitalOcean, and more).

Newcomers will also have access to frontrunner technologies such as Redux, React, React Hot Loader, Babel, Webpack, and Browsersync to learn more on component-based UI development.

NWB

nwb is a popular development suite you can use to:

Develop apps with React, Prereact, Inferno, and vanilla JavaScript
Develop different React components and libraries
Development of npm web modules

You will also be provider a configuration-free development setup, and a possibility to add some additional plugin functionality upon need (SaaS support, for instance).

ReactStrap

ReactStrap is a development library full of interesting Bootstrap 4 components that is completely independent from both jQuery and Bootstrap JavaScript. Nevertheless, it relies on Tether to ensure advanced content positioning, as for instance Popovers, auto-flipping dropdowns, tooltips, and more.

The library is pretty simple to manipulate, and requires only basic understanding of core development concepts.

Razzle

Keeping in mind how difficult standard JS apps can be to develop, you should consider Razzle as a much simpler option. Instead of setting things up yourself, or buying a separate Next.js framework or a react server, you can use Razzle to transfer all necessary tooling within a single dependency, and decide at the very end on all routing, frameworks, and other architectural decisions.

Create React App

Here, there will be no need to configure or install Babel and Webpack tools.

They apps are preconfigured and well-organized, and allow you to stay focused on the code.

The only thing you need to do is to create and launch your project.

Here are some installation tips:

You can install the app globally using:

npm install -g create-react-app

Note that you should have Node >= 6 operable on your machine, so that you can switch different Node versions for different Node projects with ease.

Also, keep in mind that the tool does not assume a Node backend, and that the above-mentioned installation process is only necessary for the Create React App.

Next.js

As all developers will agree, one of the most cumbersome operations nowadays is to create one-page JavaScript applications. The good news is that you have access to a variety of projects that can simplify and accelerate this process. In fact, Create React App is the leading example of how that works.

What’s the challenge with it then? Create React Apps usually involve a long and daunting learning curve before you’ve actually built something that looks like a decent application. The reason is that you must familiarize with routing on the client’s side, pick a good layout for the page, and complete several similar processes.

With more bells and whistles coming along the way (including the need for the server to render quicker page loads), there will be even more learning to do.

How do we simplify the process? The answer is customization.

Think of web apps and how they’re developed using PHP. Your role there is to create the needed files, write their specific PHP codes, and deploy them afterwards. The routing is not that much of a concern, as the app will be rendered on the servers automatically.

Here is where Next.js comes on the scene: the same app is built with React and JavaScript instead of PHP. Other interesting features include:

Automated server rendering
Automated code splitting that allows faster loading of pages
Simplified routing on the client’s side (page based)
Webpack-based environment for development that also supports Hot Module Replacement (HMR)
A possibility to implement it with Express as well as other Node.js HTTP servers
A possibility to customize it with Babel and Webpack configurations you’ve created.

StarHackIt

StarHackIt is starter-friendly web app development kit written with es6/es7, and created using React and Node.js. These are the features it provides:

Authentication: usernames and passwords, Facebook authentication, Google account authentication, and so on.
Authorization: Users, groups, roles, and permissions schemes
A micro services based and scalable architecture (message queues).
A relational database (MySQL, Postgres, SQLite, MsSQL, and so on).
Logging

Universal Relay Boilerplate

Universal Relay Boilerplate is an open-source project development foundation that makes use of Node.js, Cassandra, and React’s stack for backend development. You can also use it as a boilerplate and an educational tool with an array of useful examples. It will also offer a basic kit for account management, namely allow you to create accounts, strengthen password indicators, and manage user profiles.

When applied as a boilerplate, Universal Relay is fully customizable and modifiable, and allows you to update as many projects as you want with minimal intervention. The reason is that this suite packs several modern features for project improvement and bug fixing, and allows the following operations:

Configuration. With Universal Relay, it will be very difficult to get confused – all JavaScript and JSX scripts, CQL, JSON, and other configuration files will be completely independent from the common code.
Creation of Units. All apps you’ve created using this boilerplate as your foundation can be divided in separate units, fully equipped with CQL, relay, front- and backend codes. You can configure the settings and parameters of each unit from within the configuration folder.

If you liked this article about React boilerplates, you should check out these as well:

The post React Boilerplates That You Should Know Of appeared first on Design your way.