Starting a fresh modern front end project today can become quite stressful since there are an abundance of variations of specific tools that go hand in hand in each stack. But it doesn't make much sense to go with certain tools that serve different purposes for your use cases, so I wanted to create this article to help clarify some mystery for the newcomers and/or the oldcomers just to help out the community :)

Here are 5 Tips to Create Your Next React App Today in 2020:

1. Consider a Build Tool

The first thing I want to tackle down on this list is choosing a tool that will help you with the building steps. They're known as build tools that utilize bundlers like webpack. Here are some recommended options you can choose that will help you get started with that:

create-react-app

This would probably be my top recommendation if you wanted to just get started with writing code in React immediately without having to worry about how the project is being built. Because of this, it's not necessarily meant to be readily used for running apps in production--however you can choose this as a starting point and configure the project to be production-ready if you know what you're doing. It's not uncommon to see developers do that with create-react-app today.

Some example use cases to give you some quick ideas:

• create-react-library uses it as the development server to be run in conjunction in the local dev server (that serves the production code) to help test your react library in real-time.

• GDC extended create-react-app to create their GDC Data Portal.

• Tipe used CRA as their prototype to create their website and now provides GraphQL/REST Api service to their users.

• Songsear extended CRA to support universal rendering for a song searching website.

• May be extended to build chrome extensions.

• May be extended to build desktop applications.

GatsbyJS

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

It serves as a static site generator, meaning that all of your pages will be prepared at build time instead of at runtime. However, that doesn't mean it can't be used for dynamic pages. Gatsby's strength truly shines for use cases like blogs, e-commerce and landing pages if you need instant page loads for static pages as well as top notch SEO.

What that essentially means is that if you're building a website where content doesn't change often, you'll probably benefit the most from bootstrapping your next project with Gatsby.

But even if you're building a site where content does change often, it is still capable of being a good choice! It supports creating a hybrid app where you can create dynamic client side routes on the fly. You can utilize its build time together with client runtime data to build a hybrid app.

Read more about combining build with client runtime data here.

I'd also like to mention that they have hundreds of starters and plugins that you can readily use within your projects, which is a huge plus.

Here are some example production websites that were built with Gatsby:

• reactjs.org
• stateofjs.org
• sendgrid.com
• kentcdodds.com/blog
• serverless.com

NextJS

Applications utilizing NextJS are rendered on the server-side (SSR) and the client-side. It's probably more recommended to go with this tool to create your next web app if you plan on utilizing server logic like user authentication. (Keep in mind that GatsbyJS can also handle user authentication but you'd probably have to handle it with more of your client side code).

Some of the unique concepts it provides is file system routing, where each file in a folder can become an actual server or client side route--all in your control. GatsbyJS uses a similar file-system approach to build their routes by designating the src/pages directory, however it doesn't really go deep into handling server logic there.

Here are some example production websites that were built with NextJS:

• jobs.netflix.com
• m.twitch.tv
• hulu
• att.com
• ticketmaster.com
• m.staples.com
• futurism.com

Rollup

If you're looking to build a react library instead, then rollup is the way to go.

2. Consider Utility Libraries

First of all obviously you don't have to have a utility library to help you build your next react app, but it certainly feels nice to have some utilities for general use in your project that you can readily use without writing your own.

Here are some options you can use:

Lodash

Lodash is npm’s most popular and downloaded package and was built to provide consistent cross-environment iteration support for arrays, strings, objects, and arguments objects. It's perfect to keep as general-purpose toolkits in just about any project.

It has every possible function to assist in just any situation you could ever think of. It provides a fully functional approach and has many useful functions like .zip, .orderBy, .sample, .shuffle, .debate, .partialRight, .difference, etc.

It even wraps some native loop functions like .forEach and .map, providing them in the shape of a normal function.

RambdaJS

Like lodash, rambda is a functional utility library designed specifically for a functional programming style. It aims to make it easy to create functional pipelines that never actually mutates user data.

I personally haven't used it yet but I judging from their documentation the utilities they provide are very useful.

MathJS

If you're planning to use a lot math in your next project you can utilize MathJS which can help make life easier for you.

date-fns (or MomentJS)

Almost every web application out there needs to display some kind of date somewhere in their app.

Dates can become quite easy to work with if all you need to do is display them. But if you need more use cases like manipulating dates it can become very stressful and you should not handle dates yourself if you're planning to use dates extensively.

A popular mature utility library to help with dates is moment which has been battle-tested for years.

The library can become quite big, and for this reason I now recommend using date-fns which is a newer library that provides almost the same utilities but support a more modular approach, resulting in a smaller bundle size.

3. Consider a CSS Framework

Not everyone has the time to create their own stylish components especially if they have zero experience in CSS. This is why I provided this list to help those who want to utilize mature CSS frameworks to help them extend them as a starting point to create their own components.

Styled-components

I use styled-components in just about every project. It's fun, fast, helpful and makes my life much easier.

It utilizes tagged template literals and the capabilities of CSS to write actual CSS code to style your components. It also separates styles away from your react components--making it much easier to construct your components in isolation.

Semantic-ui-react

Semantic-ui-react is a popular library providing react components as well as tiny modules to help you create user interfaces. Their API is well designed and their documentation is well documented.

I use semantic-ui-react in conjunction with styled-components often.

Material-ui

Material-ui is another popular library that mimics the Google material design. It provides react components and tiny modules as well. Like semantic-ui-react, their API is well designed and their documentation is also well documented.

I use material-ui at my job and I love it.

Ant Design

ant-design is a popular choice to help with building react components.

Blueprint

Blueprint offers components that are particularly suitable for building complex and data-dense interfaces that focus on the Desktop view. From the component library, you can pick up bits of code for generating and displaying icons, for interacting with dates and times, for picking timezones and more.

React-bootstrap

Each component in react-bootstrap is built to be easily accessible--important for front-end framework building.

React-toolbox

Like material-ui, react-toolbox is another library that you can use to implement Google’s material design principles in your project as it provides react components to facilitate the look and feel of your interfaces.

Grommet

Grommet is used by big companies like Netflix. It's another react component library and provides many varieties of components to help you build your interface.

Belle

Belle provides you with a set of React components like Toggle, ComboBox, Rating, TextInput, Button, Card, Select, etc. Their components are optimized to work on mobile and desktop devices. They provide a highly customizable API to allow developers to customize their components to fit their needs.

React-MD

react-md's goal is to help developers create fully accessible material design styled websites by providing a library of react components.

4. Consider Being Around React Communities

It's incredibly important to save links (like bookmarking) of react communities and checking them often so you don't miss out on important updates.

The react ecosystem is very active, and you can miss a whole lot if you've been MIA for a short time (like a month for example).

When they released their react hooks feature, people were already beginning to implement them into their production code within a week. Libraries like react-use quickly emerged and tons of people quickly recognized the benefits of them over class components like composability and lesser code.

Also, in my experience it's a lot easier to consume new information into our brains at a steady pace day by day than it is to come back a month later and consume overwhelming amounts of information that were being discussed while you were still stressing over your class components when hooks could have easily solved your issue.

Here are some react communities you can keep in close touch with:

dev.to

dev.to is a popular community that react developers like to hang out at. They support a toxic-free environment where people can come together and be happy together. It's my go-to community to be involved with.

Medium

Medium is another recommend community where developers write and share their expertise and experiences. There is a lot of quality articles to consume information from especially if you're a React developer.

Hashnode

Hashnode is the easiest way to connect with other smart developers from around the world and they aim to help those grow their career in their involvement with them.

Reddit/r/reactjs

The reactjs subreddit is where some popular developers in the react community hang out at. However, I wouldn't recommend coming here if you're looking for nice comments. Stay away if you're sensitive to toxicity and get involved with dev.to instead.

5. Go to a Coffee Shop That Isn't Boring

I like to develop code in react in an environment where I don't get bored. My go to spots are some starbucks, some coffee bean locations, and some local coffee shops in the area.

I realized that I get more work done when I'm at a coffee shop where it's not dead (but isn't too packed either), where the music isn't too loud, where employees like to talk to each other (sometimes listening to cute funny conversations in the background lightens up the mood), etc.

When i'm enjoying my time writing code, i'm writing in better quality as i'm actually enjoying my time writing good code as opposed to writing for the time to pass by.

Conclusion

And that concludes the end of this post! I hope you found this to be valuable and look out for more in the future!