A step-by-step workshop for learning React fundamentals. Best if accompanied with live facilitation. ๐
- Create React App - makes it painless to spin up a React environment
- React Docs - lots of content has been borrowed from here
- Vincent Budrovich for his Redux tutorial contributions
- ...and other contributors for their docs and code fixes
You need node version 6 or higher. You can install nvm
to manage multiple versions of node.
Fork the repo and create a local clone (be sure to replace <YOUR-USERNAME>
with your own):
git clone https://github.com/<YOUR-USERNAME>/react-workshop.git
Change to end/
directory:
cd react-workshop/end
Install all of the dependencies (yarn
is preferred):
# Yarn
yarn
# ...or NPM
npm install
Start the API server (running at http://localhost:9090/):
# Yarn
yarn run start:api
# ...or NPM
npm run start:api
In a separate terminal window/tab, making sure you're still in the end/
directory, start the app:
# Yarn
yarn start
# ...or NPM
npm start
After the app is initially built, a new browser window should open up at http://localhost:3000/.
All of the exercises make use of ES6, so you may need to brush up on the new JavaScript features if they are unfamiliar. Each step in the workshop builds on top of the previous one. If at any point you get stuck, you can find the answers in the source code of the current step. Any step can be used as a starting point to continue on to the remaining steps.
You can start at the beginning to get setup. Afterwards follow these steps:
- JSX
- Environment setup
- Lists
- Email View
- Email Form
- Submit email form
- Delete email
- Interacting with APIs
- Mark unread/read
- Styling
- Email Form Modal
- API lib
- Action-Reducers
- Redux-y Actions and Reducers
- Connect App and Store
Got questions? Need further clarification? Feel free to post a question in Ben Ilegbodu's AMA!