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
Make it interactive
You‘re ready for the next step: interactivity. You’ll need two ingredients: event handlers and
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.