5 Tips for Newcomers to Approach Your Next React App
Make the right decisions for your next React project
Starting a fresh, modern front-end project today can become quite stressful since there is 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 mysteries for newcomers and/or oldcomers just to help out the community.
Here are five tips to create your next React app today in 2020.
1. Consider a Build Tool
The first thing I want to tackle 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:
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
Some example use cases to give you some quick ideas:
- The create-react-library uses it as the development server to be run in conjunction with 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 services 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.
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, ecommerce, 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.
Here are some example production websites that were built with Gatsby:
Applications utilizing Next.js 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).
One unique concept 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:
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 is npm’s most-popular and most-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 toolkit in just about any project.
It has every possible function to assist in just about any situation you could ever think of.
It provides a fully functional approach and has many useful functions like
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 mutate user data.
I personally haven’t used it yet but judging from their documentation, the utilities they provide are very useful.
If you’re planning to use a lot of math in your next project, you can utilize Math.js which can help make life easier for you.
date-fns (or Moment.js)
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 supports 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.
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 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 is another popular library that mimics 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 is a popular choice to help with building React components.
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.
Each component in react-bootstrap is built to be easily accessible — important for front-end framework building.
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 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 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’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 to check 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 less 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 was 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 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 is another recommend community where developers write and share their expertise and experiences. There are a lot of quality articles to consume information from, especially if you’re a React developer.
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.
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 code of better quality as I’m actually enjoying my time writing good code as opposed to writing for the time to pass by.
And that concludes this post! I hope you found this to be valuable and look out for more in the future!