At Atomic Object, a lot of our teams have been using React lately. Because of this, we’ve designed some of our recent bootcamps to ramp new employees up on it. In this post, I’ll go over some of the steps I would recommend when introducing yourself to React.
1. Set Up Your Environment
The first thing you’ll want to do is set up an environment that supports at the very least
JSX, the XML-like syntax most React code relies upon. You’ll probably also want all the niceties of ES6 or ES7, and maybe even TypeScript.
If you are just setting up your first React project and want to dive into tutorials rather than messing with configuration, I would recommend using Create React App, which will generate all the boilerplate you need to get started.
Create React App will likely not provide the level of custom configuration you want down the road, but when you get to that point, it allows you to “eject” the project, giving you control over the build steps.
2. Get the React Extension for Your Browser
The React extension adds another tab to your browser’s dev tools, allowing you to look through React components the same way you would look at HTML elements. Along with the structure of the components, it also shows the props, state, and context a component contains. This can be a big help when debugging.
3. Dive into the Tutorial
Okay, so you’ve got the tools. Now it’s time to write some code. React’s documentation provides a tutorial that goes over the steps to create a tic-tac-toe game. It offers a light intro to the syntax and basic concepts of React so you can get up and running before you dig into more details in the documentation.
4. Read the React Docs
The docs give a good overview of the basics you’ll need to understand React development. Below are a few of the topics I’d focus on reading:
Embracing composition over inheritance
Especially if you come from a strong OOP background, you may have the urge to extend a Component to create a subclass to specialize a class. This is discouraged in React; the idiomatic way to accomplish the usual method of inheritance is by passing different props or children to a Component.
Passing in callback functions as props
This is frequently done when a child component needs to update the state of a parent component. A common example here is that a parent component may pass an event listener to a child component, which binds it to a button using
These are typically form elements on which you attach event listeners to detect changes, and then pass the new value to the element in the form of props. A common example is to manage the state of a text input, rather than to let the input box handle it itself.
5. Start Testing
The standard for testing React components is Enzyme. Enzyme builds wrappers around components so they can be rendered either in isolation or inside of other components, and appear in your webapp. It allows you to easily simulate user interaction like mouse clicks and entering text.
The Jest testing framework is often used along Enzyme for testing your components. One of its features is “snapshot” testing. The first time a snapshot test is run on a component, it documents how the component renders–what text is present, the elements, any child components, etc. Any subsequent run of the test just verifies that nothing has changed.
Any time the rendering of the component changes, you will be alerted via a failing test. If the change was unintended, you will see the diff and be able to easily correct it. If the change was intended, you can easily update the snapshot.
Thanks for reading. If you can think of anything I’ve missed, let me know!