New year, better code: mind these React.js best practices to improve the quality of your code. I hope that everyone finds something useful among them. This post is a short collection of essential React.js tips and tricks for 2018. 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 and the . Pick your top features from the official and start using them. Fiber Architecture support for custom DOM attributes release notes Tip #2: Keep it simple Choose your tools wisely and never overcomplicate. bootstraps new projects in seconds, lets you share it on your network with a single command and deploys it to the internet … with a single command. Create-react-app serve now 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 page. React Patterns If any of them draws your interest you can deepen your knowledge in the following articles about , , and . higher order components container and presentational components controlled and uncontrolled inputs 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 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. awesome-react list 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 . Things have changed a lot in the last few years. Web pages have increasing control over the underlying device, make good use of it! Web APIs Tip #6: Go offline Be awesome and optimize for shaky connections. The gives a detailed overview about the different offline caching strategies with Service Workers. This is still pretty new tech, but browser support is . Offline Cookbook 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. and can get you started. Google Workbox Firebase 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 to get a rough idea about what needs improvement, then go on with the new or to see where can you cut down on size. Lighthouse webpack dashboard webpack bundler analyzer If you really need everything you import, performance can still be improved with , HTTP/2’s and the new — to name a few. code plitting and dynamic imports multiplexing and push capabilities prefetching link attributes Ultimately it’s not only about the size of the code, but the quality too. Improve your apps performance with the . It’s a pretty good list. official React.js optimization tips Tip #8: Look under the hood Learning the concepts behind React.js is time well spent. Create a dummy project to get closer to the underlying vDOM. By deepening your understanding of the vDOM and , you can optimize your apps more efficiently. without JSX reconciliation Get familiar with the . It gives a sneak peak into the context sharing of popular libraries — like MobX and Redux. Finally, grasping the broad overview of gives a sense of control. context API and all of its issues React.js Fiber 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 throughout Europe in the upcoming months: React.js training sessions (March 12 — March 13) Berlin (April 16 — April 17) Tel-Aviv (May 17 — May 18) Barcelona (June 21 — June 22) Warsaw 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 . info@risingstack.com 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.
