8 Tips to Build Awesome React Apps in 2018

New year, better code: mind these React.js best practices to improve the quality of your code. This post is a short collection of essential React.js tips and tricks for 2018. I hope that everyone finds something useful among them.

Tip #1: Use React 16

React 16 was released 4 months ago! 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. My favorites are the Fiber Architecture and the support for custom DOM attributes. Pick your top features from the official release notes and start using them.

Tip #2: Keep it simple

Choose your tools wisely and never overcomplicate. Create-react-app bootstraps new projects in seconds, serve lets you share it on your network with a single command and now deploys it to the internet … with a single command.

Work with easy-to-use tools that you are comfortable with. Let the project develop over time and never throw in complex technologies when you don’t need them.

Tip #3: Learn React.js patterns

Libraries come and go, but good patterns are immortal. Learn the common patterns that inspire your favorite React.js projects from the React Patterns page.

If any of them draws your interest you can deepen your knowledge in the following articles about higher order components, container and presentational components, controlled and uncontrolled inputs and function as child components.

Tip #4: Try new things from the React.js ecosystem

Don’t be afraid to try new things if you have the time. React.js has an incredible ecosystem, you can almost always find a ready-to-go solution for your problems. Run through the awesome-react list and find what draws you attention. Be sure to check out the many tooling, styling and state management libraries and take a look at the example projects when you are out of inspiration.

Tip #5: Embrace the platform

Users expect wep apps to be navigable with history buttons, to be shareable by URL and to keep session in web storage. When any of these are missing, people get frustrated. Make that extra effort and integrate properly with the browser.

While you get these right, get familiar with the new Web APIs. Things have changed a lot in the last few years. Web pages have increasing control over the underlying device, make good use of it!

Tip #6: Go offline

Be awesome and optimize for shaky connections. 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.

Don’t worry if the cookbook is overwhelming at first. 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 #7: Optimize for slow devices

People may use your web app on low-end devices with awful connections. Do not be satisfied with its speed on your MacBook, but never get obsessed with performance either. Stick to this simple rule: measure before you act.

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, HTTP/2’s multiplexing and push capabilities 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.

Tip #8: Look under the hood

Learning the concepts behind React.js is time well spent. Create a dummy project without JSX to get closer to the underlying vDOM. By deepening your understanding of the vDOM and reconciliation, you can optimize your apps more efficiently.

Get familiar with the context API and all of its issues. It gives a sneak peak into the context sharing of popular libraries — like MobX and Redux. Finally, grasping the broad overview of React.js Fiber gives a sense of control.

Become confident with React.js

Would you like to know more about how building Modern Front-End Apps with React.js? We have good news for you!

We organize React.js training sessions throughout Europe in the upcoming months:

• Berlin (March 12 — March 13)
• Tel-Aviv (April 16 — April 17)
• Barcelona (May 17 — May 18)
• Warsaw (June 21 — June 22)

Make sure to reserve your tickets online so we know we can count on you. See you there!

These trainings are perfect for you if you want to improve your front-end skills, build application prototypes rapidly, and create complex and maintainable websites. Take a look at the detailed agenda here.

In case you have any questions regarding this training, or you’d like to invite our team to provide a training exclusively for your company, please reach out to us at [email protected].

What tips would you add?

These are just a handful of React.js tips and tricks, but I hope you found them useful. Keep these advices always in mind to optimize the performance of your React.js code. If you think that I missed something, please share it in the comments.

Thanks!

Originally published at blog.risingstack.com on January 23, 2018.