React (sometimes styled React.js or ReactJS) is an open-source (with caveats) JavaScript library for building user interfaces. In this journal we will be show casing short collection of essential ReactJS tips and tricks. These tips and tricks can help improve the quality of code you are writing.
Top 10 ReactJS Books You Should Read
Tip #1: Use React 16
Since the time React 16 was released, the ReactJS team has brought a lot of wonderful changes and it is time for everyone to start using it. Chances are that you can migrate with a simple version bump and it provides some neat improvements. Our favorites are the Fiber Architecture and the Better server-side rendering. Go ahead and pick your top features from the official release notes and start using them.
Tip #2: Keep it simple
The tools should be chosen very wisely and you should never overcomplicate them. Create React App bootstraps new projects in seconds. Create React App is the best way to start building a new React single page application. 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 >= 6 on your machine. You can use Serve, which lets you share it on your network with a single command and Now to deploy it to the internet with a single command.
Tip #3: Try new things from the React.js ecosystem
ReactJS has an incredible ecosystem, you can almost always find a ready-to-go solution for your problems. If you find something new don’t be afraid to try if you have the time. You can anytime go to awesome-react list and find what draws you attention. You can also explore the example projects when you need inspiration to build something new. Also make sure to check out many tooling, styling, and state management libraries.
Tip #4: Go offline
The Offline Cookbook gives a detailed overview about the different offline caching strategies with Service Workers. This is still pretty new tech, but browser support is catching up.
Create-react-app gives your app shell offline support out of the box, which is a nice start. You still have to prepare your data for offline usage though. Google Workbox and Firebase can get you started.
Tip #5: Optimize for slow devices
The web-app you are creating may be used on low-end devices also with an awful connections. Use Lighthouse to get a rough idea about what needs improvement, then go on with the new webpack dashboard or webpack bundler analyzer to see where can you cut down on size.
If you really need everything you import, performance can still be improved with code plitting and dynamic imports, and the new prefetching link attributes – to name a few.
Ultimately it’s not only about the size of the code, but the quality too. Improve your apps performance with the official React.js optimization tips. It’s a pretty good list.