Some tips for getting started with React

I’ve been developing web applications for many years but until recently was constrained to developing on (and for) a Java stack that had to support old versions of Internet Explorer. This left me mostly casting envious glances at modern web development tools, frameworks and practices — dreaming of a working life filled with ES6 and flexbox.

A few months ago I was finally able to start devoting the majority of my time researching, prototyping and finally developing in a number of different frameworks. I initially spent an equal amount of time looking at Angular, Aurelia, React and Vue… but eventually settled on React.

This isn’t to say that I think that React is “better” just that it was the best fit for my specific requirements.

I’m a great believer in using the right tool for the job, you may have the best hammer in the world — but you shouldn’t try to use it to screw something together.

React is a mature library so many best practices have been established, however I found that I didn’t fall into them immediately and had to learn them the hard way.

If you’re a newcomer to React (and bear in mind that I’m no expert) you may find this advice useful…

Start with “create-react-app”

When I started out in the world of Node.js / npm based development I began by building a development environment from scratch.

Whilst this was a valuable learning exercise I later found that not only did the “create-react-app” project provide a great starting point but the awesome comments throughout the “react-scripts” project (that you can browse in your node_modules folder or gain access to through ejecting) were incredibly informative.

You might find that you don’t keep using it in the long term, but as a playground for getting up and running with React to learn it I don’t think it can be beaten.

Keep reading the Official Documentation

There are loads of great articles, tutorials and blogs out there but I’ve found myself repeatedly going back to the official docs. I found that a lot of information didn’t sink in on the first read but only became relevant as I got further into development.

Like a good album it reveals itself over time and from experience I’ve found that the answers to most of my questions are located there. It is very clear on what you should probably not use to avoid problems in the future.

Set refs with functions, not strings

This is an example of information readily available in the docs but I didn’t heed at first. Instead I was merrily setting refs with strings until I tried to import my components into another project. At this point I found that nothing worked and exceptions in my browser console. Fortunately the error messages in React are exceptionally good and lead me straight back to the right page in the documentation that explained and solved the problem.

Set state with a function, not an object

I’ve seen this recently in blogs and tweets. Although it’s not caused me any problems I’m learning my lesson from the previous example and will update my code now to avoid issues in the future.

Pick the right editor

I’d been a Sublime Text user for years and still absolutely love it. Like many people who hadn’t yet appreciated the benefits of JSX, I was appalled at the idea of mixing JavaScript and HTML together and trying to use Sublime Text didn’t help (even after I tried the Babel Sublime package). A colleague showed me a React project in Visual Studio Code and I never looked back. I still use Sublime Text for other JavaScript projects (just as I use Eclipse for Java projects) but Visual Studio works for me… as I wrote earlier, always pick the right tool for the job.

Learn the Life Cycle

I’ve found that when creating React components I need to think differently about how to approach problems and that understanding the component life-cycle really helps find the solutions.

One really valuable tip I’ve found is to make sure that if a component needs to derive state from props then you need to process those props in both the constructor and componentWillReceiveProps (especially when the component is going to be receiving new properties from its ancestors) as this has caught me out on more than one occasion.

I would certainly recommend working through problems more than once (and a good set of unit tests can really help here) as switching my way of thinking from an object-oriented approach to a functional composition approach can be quite challenging at first.

⚛️ Summary

Hopefully these tips will be useful to someone out there. I don’t expect them to be revelatory to anyone with a great deal of React experience but it was valuable to me to think about and log what I’ve learned over the past few months.

If you have any feedback or suggestions for other good practices then please let me know!