Three Steps to Learn React

Have you looked at the React documentation already, but are still confused about how to go about building your first prototype? Try these steps on the path to React mastery.

Sculpt the UI

With React, you create functions called React components, which return parts of the user interface. Then you use components to create custom elements for your page. Sketch the interface first; then build it with React, but don‘t worry about interactivity: just practice nesting the elements inside one another. I suggest you use JSX straight away, but use Babel standalone to transform it to regular JavaScript in the browser. That way you won‘t get stuck setting up a build. For runtime performance, do set up a build as soon as you plan to use JSX in production.

Make it interactive

You‘re ready for the next step: interactivity. You’ll need two ingredients: event handlers and setState(). setState() is a function built into React that captures changes, like adding new items to a list or toggling an option, into a special variable called state. Event handlers are function you pass to React elements to detect user interactions, like clicking. Pick the simplest functionality, like toggling a checkbox, and implement it with setState() and event handlers.

Untwist the data

Once you have mastered setState(), structure your data to increase maintainability and performance. Passing a large object many levels down the element hierarchy is generally bad for both. Try passing each component only the data it needs. Use container components to isolate your presentational components from changes in your data structures.

Experiment first with a small part of your application to get an idea of the challenges. Then take the jump into more critical functionality. Looking for a detailed tutorial? React for Real guides you through these steps and further into testing, production builds and Redux.