Click the below links to load a specific branch from this repository into codesandbox.
- Render 01: Get a welcome message
- Render 02: Get a welcome message, in two paragraphs
- Render 03: Dealing with classNames
- Render 04: Mixing selectors
- Render 05: Dealing with nested selectors
- Props 01: Welcome a given user
- Props 02: Display details of US presidents
- Props 03: Show player details
- Props 04: Analyse scores
- Props 05: Display the total score
- Conditional Rendering 01: Welcome users
- Conditional Rendering 02: Creating a ticketing system
- Conditional Rendering 03: Evaluate challenge results
- Conditional Rendering 04: How good a film is?
- Conditional rendering 05: Purchase dance club tickets (To be created)
- Loop 01: Display a list of actor names
- Loop 02: Display a list of actor details
- Loop 03: Display a list of Formula 1 World Champions
- Loop 04: Display the details of a given user
- Loop 05: Reverse starting grid
- Input 01: Display a basic input text
- Input 02: Display an input text with dynamic data
- Input 03: Display a textarea with dynamic data
- Input 04: Display checkboxes on a sign up form
- Input 05: Display a combo to select a piece of fruit
- State 01: Display a message from the component state
- State 02: Display the average score of a player
- State 03: Display the average score of a player after completing a challenge
- State 04: Perform some math operations
- State 05: Add new element to state
- Input 01: Display an input field
- Input 02: Display the expected salary of a player
- Input 03: Clear input with button
- Input 04: Check if email inputs match
- Input 05: Pick a piece of fruit!
- Button 01: Press me!
- Button 02: Toggle driver details
- 03 (To be created)
- 04 (To be created)
- 05 (To be created)
- Lists 01: Display a list of movies
- Lists 02: Display a list of female tennis players
- 03 (To be created)
- 04 (To be created)
- 05 (To be created)
- 01 (To be created)
- 02 (To be created)
- 03 (To be created)
- 04 (To be created)
- 05 (To be created)
- 01 (To be created)
- 02 (To be created)
- 03 (To be created)
- 04 (To be created)
- 05 (To be created)
- 01 (To be created)
- 02 (To be created)
- 03 (To be created)
- 04 (To be created)
- 05 (To be created)
- 01 (To be created)
- 02 (To be created)
- 03 (To be created)
- 04 (To be created)
- 05 (To be created)
- 01 (To be created)
- 02 (To be created)
- 03 (To be created)
- 04 (To be created)
- 05 (To be created)
- Open Kodiri. Link to all beginner-level topics: https://kodiri.com/platform/training/reactjs/beginner (protip: replace
beginner
withintermediate
orexpert
to access other levels) - Open your topic, click Play or "Play test again". Just click "Skip" until you get to the exercise you want to copy. (there are five exercises per topic)
- Clone the exercises repo or fetch latest: https://github.com/ReDI-School/react-berlin-2019-fall-codesandbox-exercises.git
- Check out the branch containing the last exercise/commit that was added to the repo. This step is important since, as we add more exercises there are several changes/improvements being made to the core of the project. Branching from the latest branch/commit will help us maintain and improve this repo.
- Create new branch. If for instance you're preparing: a beginner topic > conditional-rendering > Exercise 05, then create a new branch as such:
git checkout -b kodiri/conditional-rendering/05
- Adapt the following elements from Kodiri to our repo:
- On the repo open the
src/index.js
. There you will find a component calledExerciseDescription
for example. The component has 4 required properties. Your job will be to update those.
- Update the
title
. This will be the title of your exercise, you can find the title in the Kodiri exercise itself, or be creative and improve the Kodiri title. - Update the
description
. This will be the description of your exercise, the description similar to the title can be found on the Kodiri itself. - Update the
youtubeId
. This will update the video of the exercise. You can find the id on the Kodiri exercise when you right click on the video they include. Please make sure to insert the correct youtube video id. For examplesrc="https://www.youtube.com/embed/pKQwMjkVwXc"
in this case the id will bepKQwMjkVwXc
. - Then update the
exerciseFilename
, signifies the file of the exercise (e.g.Score.js
). With other words is thejs
file that our Component lives.
- Update the test source code into the unit test file (e.g.
Score.spec.js
).
- Copy from the Kodiri test the test cases they provide and paste it our test file, for instance
Score.spec.js
. Please make sure you only override from line #9 and down (i.e. keep the imports and setup on lines 1-8) since this is the configuration of the testing suite. - Afterwards, run
npx jest-codemods
to transpile from one unit test format to another. As prompted, select: Which parser do you want to use?Babel, Which test library would you like to migrate from? Chai: Should/Expect BDD Syntax, Which test library would you like to migrate from? Yes, and I'm not afraid of false positive transformations, Will you be using Jest on Node.js as your test runner? Yes, use the globals provided by Jest (recommended
). Hit Enter.
- On the repo open the
- Commit, push
- Add the exercise to the curriculum doc.
- Manually QA your changes: try loading the repo into codesandbox, and solve the challenge you created, also check if the tests are passing after you solved the exercise. We do this in order to avoid students having to solve exercises that might contain errors.
- Switch to
master
branch, and from there create a PR with the updatedREADME.md
. This way someone else can also QA your changes, they can go though your codesandboxes and solve the exercises. Having PRs is a good practise we can follow, to avoid having errors on the exercises during the class.
Exercises copied from kodiri.com