The goal of this exercise is to learn how to think in React.
You need to be comfortable writing JavaScript (ES6: Module system, class syntax, destructuring assignment).
You need to have nodeand npminstalled in your computer.
git clone git@github.com:leanjscom/thinking-in-react.git && cd thinking-in-react && npm install && npm start
Before you start, there are two types of components Functional Components and Class Comonents. Try to use a Functional component if the component doesn't have state, you'll need to refactor code a few times during the next exercise :)
1- Refactor the “about” and “footer” sections by creating a stateless component for each. Make sure everything works.
2- Refactor the navbar by creating a stateless component and pass the dependencies via props. Make sure everything works.
3- Refactor the books section by creating a stateless component and pass the dependencies via props. Make sure everything works.
4- Is there any state in app that should be in the Books component? Refactor <Books> books if appropriate. Should <Books> be a Functional Component or a Class Component now?
5- Break <Books> down into <BookList> and <BookFilter>
6- What do you think it would make sense to componentize next? Are there any parts on that view that you can reuse? Try to explain to a mentor what you want to refactor before you code :)
- https://reactjs.org/docs/introducing-jsx.html
- https://reactjs.org/docs/thinking-in-react.html
- babel repl example
This material is available for private, non-commercial use under the GPL version 3.