The goal of this exercise is to learn React Router and how to fetch data into your app. There are thousands of tutorials online but there's no better way to learn than hacking it yourself.
You need to be comfortable writing JavaScript (ES6: Module system, class, JS context vs scope, arrow functions).
You need to have node
(at least version 4.4.5) and git installed in your computer.
Clone this repository and run npm start
git clone https://github.com/alexlbr/react-course
cd react-course
npm install
Now you can run your application by running: npm start
Good to read about React and fetching data before solving the exercise
- https://medium.com/@learnreact/container-components-c0e67432e005#.btkvoecha
- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.oy1l2u2ew
- http://andrewhfarmer.com/ajax-libraries/
- https://github.com/reactjs/react-router/tree/master/docs
- Implement the following route http://localhost:3456/#/workshops. Hint: Check this file app/config/Routes.js
- Refactor UserList so it implements the container component pattern. Use UserListContainer. Hint: You also need to change app/config/Routes.js
- Clicking on a user on the list should display the user's profile. Hint: Check UserListContainer, should it return children components?
- Refactor UserProfile so it implements the container component pattern. Hint: You also need to change app/config/Routes.js
- Implement WorkshopList and WorkshopListContainer using http://localhost:3456/data/workshops.js
Have fun!
- React Native
- React Isomorphic apps
- State management with Redux
- Data management with Relay
Stay tuned for more information and course material for React training