Practise exercises for students of the React course of ReDI School of Digital Integration in Berlin

How to use

Click the below links to load a specific branch from this repository into codesandbox.

Key links to related course resources

• 2019 Fall curriculum

Level: Beginner

Topic: Render

• 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

Topic: Props

• 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

Topic: Conditional rendering

• 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)

Topic: Iterating through list of elements

• 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

Topic: Input fields

• 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 # form
• Input 05: Display a combo to select a piece of fruit

Level: Intermediate

Topic: State

• 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

Topic: Input fields

• 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!

Topic: Buttons

• Button 01: Press me!
• Button 02: Toggle driver details
• 03 (To be created)
• 04 (To be created)
• 05 (To be created)

Topic: Lists

• 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)

Topic: Composing components

• 01 (To be created)
• 02 (To be created)
• 03 (To be created)
• 04 (To be created)
• 05 (To be created)

Level: Expert

Topic: Forms

• 01 (To be created)
• 02 (To be created)
• 03 (To be created)
• 04 (To be created)
• 05 (To be created)

Topic: Backend communication

• 01 (To be created)
• 02 (To be created)
• 03 (To be created)
• 04 (To be created)
• 05 (To be created)

Topic: Routing

• 01 (To be created)
• 02 (To be created)
• 03 (To be created)
• 04 (To be created)
• 05 (To be created)

Topic: Data handling <->

• 01 (To be created)
• 02 (To be created)
• 03 (To be created)
• 04 (To be created)
• 05 (To be created)

How to update this repo

1. Open Kodiri. Link to all beginner-level topics: https://kodiri.com/platform/training/reactjs/beginner (protip: replace beginner with intermediate or expert to access other levels)
2. 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)
3. Clone the exercises repo or fetch latest: https://github.com/ReDI-School/react-berlin-2019-fall-codesandbox-exercises.git
4. 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.
5. 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
6. Adapt the following elements from Kodiri to our repo:
   1. On the repo open the src/index.js. There you will find a component called ExerciseDescription 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 example src="https://www.youtube.com/embed/pKQwMjkVwXc" in this case the id will be pKQwMjkVwXc.
   • Then update the exerciseFilename, signifies the file of the exercise (e.g. Score.js). With other words is the js file that our Component lives.
   2. 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.
7. Commit, push
8. Add the exercise to the curriculum doc.
9. 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.
10. Switch to master branch, and from there create a PR with the updated README.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.

Credits

Exercises copied from kodiri.com