5 things to learn before learning React

If you haven’t built a single-page application before, React really forces you to level-up your skill set. React as a library has a lot to offer – you can build shareable components that have a clear flow of data (which makes debugging much, much easier). Many times, React just lets you write JavaScript to get your work done.

For the last year or so, I’ve been writing apps with React and Redux, and working at a coding bootcamp part-time, where I help people learn React and Redux. After watching people struggle with out-of-date tutorials and blog posts, and the JavaScript ecosystem in general, I compiled a list of things you might want to know BEFORE you start learning React. The list below may sound exhaustive, but once you feel fluent in these concepts and skills, it will make building your first app in React easier and more fun.

Learn faster. Dig deeper. See farther.

Join the O'Reilly online learning platform. Get a free trial today and find answers on the fly, or master something new and useful.

Learn more

1. Read other people’s code

React is changing so quickly that there are a lot of out-of-date blog posts and tutorials. It’s frustrating to follow some instructions as a beginner to React, and then encounter an error or, worse, have your code silently fail without explanation.

When you go to a repo, two folders will be your best friends:

• examples
• tests

If you clone the repo, run the examples, and find that the example code isn’t working, it’s totally okay to raise an issue with the maintainer. Be nice about it, however. Remember, these folks aren’t getting paid! Clearly list the error message you’re getting, how you got the error, and if you have suggestions for documentation, include the pencil or book emoji – or better yet, take a shot at writing the documentation (many open source maintainers would be happy to have help with this).

Often you will find the examples folder is actually more up-to-date than the README or other documentation. This also tends to be true for the tests folder. The tests folder is really good for non-component libraries to see how the api for that library works.

2. Know your development environment

It’s impossible to be a frontend developer (or frontend engineer) without knowing your development environment.

Frontend development has a huge focus on taking regular JavaScript and using it to do a variety of things — for example, making newer JavaScript work in older browsers via polyfills, transforming styles with Javascript plugins, animating and styling SVGs — in general, using JavaScript to get around browser constraints.

To use JavaScript nowadays, developers use tools such as webpack, rollup, gulp, and browserify. We also track changes in our code using version control tools such as git. Here are some skills that will make your life easier when using these tools:

• Know how to open your Terminal / Command Line / Bash / zsh.
• Understand the $PATH variable — what it is, what it does, and how to edit it.
• Know what an alias is and how to write one to save yourself from typing.
• Know what sudo is and why you would want to use it (or not use it).
• Have a working idea of what a web server is, and what localhost means.

3. Know a bit about npm

NPM is the Node Package Manager. You can use either npm or another tool called yarn to install packages (JavaScript libraries of code) to your node_modules folder. (There is a bit of controversy over which tool to use; they both work.) So, instead of going to a website and downloading a JS file, you just use the command line to grab those JS files from a central place called the npm registry.

When you use npm or yarn to install a node module to your React project, you can also tell it to write down the name of the module to a file called package.json by using a flag called —save:

npm install <package-name> --save
yarn add <package-name> --save

That way, if you share the project with another person, they can just type npm install or yarn install in the Terminal and they will have the same node modules as you.

4. Know CSS and how to make things look good

Knowing CSS goes a long way with React. Based on my experience, there’s a ridiculous shortage of React developers who can code and make things look pretty — or want to. React is JavaScript, but with responsive design, being good at CSS has become a speciality in itself.

That being said, there is only so much React you can write using existing component libraries, and at some point your designer or product owner is going to want to have something that looks more bespoke.

Other Javascript libraries (cough, cough, jQuery) will let you change UI state via show(), hide(), fadeIn(), and fadeOut() and so on But with React you have to learn to start describing your state in terms of CSS classes like .show, .hide, .disabled, .active, and .focus.

Finally, another great thing about being good at React and CSS is that you can combine the two to create custom typography and layout components (for example, a <Grid> component) that other people can re-use to enforce a consistent style on your site. Componentizing your styles using React greatly reduces the chance of technical debt from badly written CSS.

5. Be ready for change

React.createClass is no longer available in the latest version of React (you have to import it as a separate module), and PropTypes is a module you also now have to import. These breaking changes are things you wouldn’t know about if you didn’t read the React blog, and if you’re following tutorials, they may be out of date and not work for you.

Earlier React projects used function.bind for their event handling binding, but newer versions you might see using the experimental property initializer syntax.

handleClick = () => {
    console.log('this is:', this);
}

What you might not be aware of is that this use of arrow functions in ES6 classes is only at stage 2, which means that you definitely have to use babel to have this feature.

Conclusion

There’s a lot that goes into making beautiful, responsive, fast web applications. Having a good grasp of command line, npm, CSS and vanilla JavaScript might seem like an overwhelming task — but keep in mind that knowing these things won’t just help you learn React, it will also help you become a stronger developer.

Being able to read example code and test code — not just follow documentation — will help you get up and running quickly. Having a good mental model of recent JavaScript module systems (ES6, CommonJS) will help you when importing other people’s code.

Have more things you wished you knew before you learned React? I’d love to hear about it.

Ready to take the next step? Check out React and React Native resources from O’Reilly, including:

• Learning React Native by Bonnie Eisenman
• Learning React by Alex Banks and Eve Porcello