Exercises!

React Week 08

Schedule

01

03

04

02

06

05

05

06

Review

Watch James Live code exercise 1

Exercise 2

Exercise 1

Show homework

Exercise 3

Break

Watch James Live code exercise 2

10 min

20 min

10 min

20 min

5 min

35 min

10 min

10 min

Previously on ReDI React

There are main ways to do Styling in React. What are they?

Inline styles in JSX

The syntax is a bit different in React than HTML.

​

Instead of passing a string with all of the styles to the attribute, we need to assign an object:

CSS Modules

The class defined in our CSS:

​

​

​

​

​

​

​

How we assign this class to an element:

Styled Components

Makes a react component

​

​

​

​

​

​

​

​

Call the component like you would any other HTML tag or React component

Styled Components

Also accepts props that affect the styling

​

​

​

​

​

​

​

​

Pass the props the same way you would any other React Component

Let’s make a clicking Game!

This is what we are going to make:

Tips before we begin

If you are struggling, try again after seeing the live coding.

Ask for help from your breakout room if you need it, we can all help each other :)

If you finish early, try the bonus tasks, ask teachers for feedback

​

Bonus Tasks

• Refactor into smaller components for cleaner code
• Redesign Game Styling
• Redesign Game Mechanics
• Give option to change color scheme

Exercise 1

​

https://codesandbox.io/s/week-8-exercise-1-z4qku?file=/src/App.js�� We need to a heading showing us the current score and a button to increase our score

Exercise 2

Work off your own game, or if you got stuck, you can start here:�https://codesandbox.io/s/week-8-exercise-2-xzg4m?file=/src/App.js

1. Next we need to display the cost of buying a character.
2. Implement the logic for buying a character
3. Change the background of the purchase button to change depending if score is high enough to purchase a character or not

​

Break!

Exercise 3

Next steps:

• Make another button that increases the score per click, it should cost points.
• Make a button to change the whole app’s styling, background color and font color

Advanced

• Create the ability for player to purchase an auto clicker
• Create the ability for player to purchase an auto upgrader and an auto character purchaser

Homework ✏️

Make this game your own.

• Do all the advanced steps

​

• Redesign the game styling
• Adjust the game mechanics
• Fix the container of cards to look presentable
• Present it to the rest of the class next Tuesday!