Study Tips for React
React itself is not a comprehensive framework. While its learning curve is shallow there is a risk that newcomers become overwhelmed with all the choices and technologies inside React’s and JavaScript’s ecosystem. Having gone through learning React & Co. myself half a year ago I experienced how easy it would have been to become lost. In this article I provide study tips for React to help you focus on the essentials and, hopefully, make informed decisions about additional technologies.
Learning React is as much about understanding its philosophy as it is about getting to grips with the technicalities. React’s official documentation does an excellent job at explaining both. It does not hurt to go through it several times. Before looking for third-party learning resources make sure you truly understood the points in the official documentation.
Take advantage of new JavaScript language features. With ES6 and beyond, React components can be defined much more elegantly: Either using ES6 classes or stateless functions.
React itself does not dictate how to structure the code of your application as a whole. References to Flux, Redux, Relay and similar technologies inadvertently will be found while researching this topic. It is best to ignore these state management and change propagation solutions in the beginning as they are certainly not free in terms of abstraction and infrastructure costs. Try to come up with a straightforward solution specific to the app you want to create. Only when you have identified its shortcomings consider alternatives. An exception is MobX. In my experience, its adoption costs are very low and it already pays off for very small projects. See the following links for more information:
- “You Might not Need Redux” by Dan Abramov, the creator of Redux
- “Eight No-Flux Strategies for React Component Communication” by Andrew H. Farmer
- A comparison between MobX and other state management technologies by Aria Fallah
A big concern of many practical apps is the implementation of asynchronous communication (with a remote API/service). The following links provide some insights about this topic.
When a project matures there is most probably no way around explicitly setting up its infrastructure with build tools. It used to be the way that you had to find some exemplary “boilerplate” project in order to find out how to actually set up all these infrastructure tools. Fortunately, nowadays you can use the official Create React App project which both shields you from thinking about infrastructure and gives you a canonical solution once you you need it. Bear in mind that at some point you should invest the time to understand the infrastructure tools. After that, their scariness disappears.
There are many, many more topics to learn about and to explore: Routing, Drag & Drop, Webpack, CSS or form handling, to name a few. Going into more detail on these would go beyound the scope of this article. Nonetheless, I hope that by following the tips from this article you will be prepared to explore the React ecosystem with confidence.
I’m the co-founder and CTO of techboi. We are a software company based in Berlin. We value efficiency, technology and design. Check out follow.techboi.io to stay in touch.
