1 of 14

Welcome!

Workshop:

JS to know for React

React Week 01

Topic Name

2 of 14

01

02

03

04

05

Arrow functions + destructuring

Break!

forEach, map, filter and reduce

Break

Modules

spread and rest operators

60 min

50 min

10 min

modules, imports & exports

10 min

50 min

3 of 14

How we’ll run each block

  • Intro
  • Live coding
  • A bit of theory
  • Exercises
  • Final QA
  • QA
  • QA
  • QA

​

4 of 14

01 Arrow functions + destructuring

5 of 14

01 Arrow functions + destructuring

Notes about arrow functions:

https://www.notion.so/binarylights/Arrow-Function-Notes-0504ec3f0f5140169a878c4b7e61cb48

Notes about destructuring:

https://www.notion.so/binarylights/Destructuring-Spreading-notes-338898a19b1f4eb4b6650a439696123c

Codesandbox:

https://codesandbox.io/live/n6psci0

​

6 of 14

Exercises

​

Arrow functions:

Exercise 1 : https://javascript.info/task/rewrite-arrow

Exercise 2: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions

​

Destructuring:

Exercise 1: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects

Exercise 2: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects

Exercise 3: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays

Exercise 4: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters

7 of 14

Break!

See you at 15:15!

8 of 14

03 forEach, map, filter and reduce

9 of 14

03 forEach, map, filter and reduce

Some notes: https://www.notion.so/binarylights/forEach-map-reduce-filter-notes-d6494a1c73314c99b57086473ac210c4

Codesandbox: https://codesandbox.io/live/kk8igrt

​

10 of 14

Exercises

​

forEach:

Exercise 01

https://codesandbox.io/s/js-to-know-for-react-foreachmapfilterreduce-foreach-exercise-01-znt1v

​

filter:

Exercise 01: https://codesandbox.io/s/js-to-know-for-react-foreachmapfilterreduce-filter-exercise-2i0dp

Exercise 02: https://codesandbox.io/s/js-to-know-for-react-foreachmapfilterreduce-filter-exercise-02-9ixbm

​

map:

Exercise 01: https://codesandbox.io/s/js-to-know-for-react-foreachmapfilterreduce-map-exercise-01-hp40m

Exercise 02: https://codesandbox.io/s/js-to-know-for-react-foreachmapfilterreduce-map-exercise-02-5pi2i

​

Reduce:

Exercise 01: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data

11 of 14

05 Modules

12 of 14

05 Modules

https://codesandbox.io/live/tkvelhw

,

13 of 14

Exercises

​

Exercise 01: https://codesandbox.io/s/js-to-know-for-react-modules-exercise-01-fie8k

Exercise 01: https://codesandbox.io/s/js-to-know-for-react-modules-exercise-02-cc5lm

​

14 of 14

Final questions?