JavaScript React Course

React Course Overview

Table of Contents

• Content
• Aspects
  • 👶 Introduction
  • 💪 Workout
  • 🦑 Deep
  • ✨ New
  • 🔮 Obscura
  • Content without aspects

Content

Below you can find the ordered content of the topic, in a linear progression

The linear progression of content aims to cover all content, course by course, workout by workout as follows:

• first course is the only core one, denoted by its manifest
• the next course is denoted by the first item of the next array in each course manifest
• each course has its order of workouts designated by the sections field in the same aforementioned manifest

1. intro-react

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	what-is-react	✅	❌	❌	✅	✅	❌	❌
2	what-is-jsx	✅	❌	❌	✅	✅	❌	❌
3	one-way-data-binding	✅	❌	❌	✅	✅	❌	❌
4	what-i-need-to-use-react	✅	❌	❌	✅	✅	❌	❌
5	why-use-react	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

2. fundamentals

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	the-react-element	✅	❌	❌	✅	✅	❌	❌
2	the-react-component	✅	❌	❌	✅	✅	❌	❌
3	what-are-props	✅	❌	❌	✅	✅	❌	❌
4	what-is-state	✅	❌	❌	✅	✅	❌	❌
5	functional-components	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

3. basics-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	the-component-lifecycle	✅	❌	❌	✅	✅	❌	❌
2	component-lifecycle-methods	✅	❌	❌	✅	✅	❌	❌
3	rendering-multiple-components	✅	❌	❌	✅	✅	❌	❌
4	forms-in-react	✅	❌	❌	✅	✅	❌	❌
5	event-handling-in-react	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

4. basics-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	conditional-rendering-part-1	✅	❌	❌	✅	✅	❌	❌
2	conditional-rendering-part-2	✅	❌	❌	✅	✅	❌	❌
3	the-ref-callback-attribute	✅	❌	❌	✅	✅	❌	❌
4	jsx-spread-attributes	✅	❌	❌	✅	✅	❌	❌
5	destructuring-arguments	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

5. good-to-know

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	immutability-helpers-in-react	✅	❌	❌	✅	✅	❌	❌
2	load-initial-data-via-ajax	✅	❌	❌	✅	✅	❌	❌
3	reactdom-render-ref	✅	❌	❌	✅	✅	❌	❌
4	null-value-for-controlled-components-in-react	✅	❌	❌	✅	✅	❌	❌
5	keyed-fragments-in-react	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

6. gotchas

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	dangerously-set-innerhtml	✅	❌	❌	✅	✅	❌	❌
2	if-else-statements-in-jsx-and-react	✅	❌	❌	✅	✅	❌	❌
3	self-closing-tags-in-jsx	✅	❌	❌	✅	✅	❌	❌
4	using-false-in-jsx	✅	❌	❌	✅	✅	❌	❌
5	react-in-line-styles	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

7. props-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	prop-validation	✅	❌	❌	✅	✅	❌	❌
2	default-values-for-props	✅	❌	❌	✅	✅	❌	❌
3	enhanced-prop-validation	✅	❌	❌	✅	✅	❌	❌
4	custom-validations-for-props	✅	❌	❌	✅	✅	❌	❌
5	custom-proptype-s-to-be-required	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

8. props-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	children-in-react	✅	❌	❌	✅	✅	❌	❌
2	dealing-with-this-props-children	✅	❌	❌	✅	✅	❌	❌
3	type-of-the-children-props	✅	❌	❌	✅	✅	❌	❌
4	specify-a-single-child	✅	❌	❌	✅	✅	❌	❌
5	props-in-getinitialstate-is-an-anti-pattern	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

9. props-iii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	clone-elements-in-react	✅	❌	❌	✅	✅	❌	❌
2	componentwillreceiveprops-not-triggered-after-mounting	✅	❌	❌	✅	✅	❌	❌
3	shallow-compare-in-react	✅	❌	❌	✅	✅	❌	❌
4	shortcut-for-transferring-props	✅	❌	❌	✅	✅	❌	❌
5	use-proptypes-on-stateless-components	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

10. redux-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	use-redux-with-react	✅	❌	❌	✅	✅	❌	❌
2	the-redux-store	✅	❌	❌	✅	✅	❌	❌
3	understanding-pure-impure-functions	✅	❌	❌	✅	✅	❌	❌
4	export-selectors-with-related-reducers	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

11. redux-tips

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	async-flow-in-redux	✅	❌	❌	✅	✅	❌	❌
2	avoid-array-mutations	✅	❌	❌	✅	✅	❌	❌
3	avoid-object-mutations	✅	❌	❌	✅	✅	❌	❌
4	combine-reducers-in-redux	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Aspects

Given the insights are tagged with aspects, we can filter over the linear content progression and create learning sub-paths.

These sub-path progressions will most likely not cover all content, but they will ensure and enforce an unified learning experience, tailor for the user wish.

For example, a user might be interested in new additions and updates of a language, rather than introduction lessions. Note that these sub-paths don't take games into consideration

👶 Introduction

If you are being introduced to the topic for the first time

⚠️ There are no insights tagged with this aspect in react. :warning: There are no exercises tagged with this aspect in react. :warning: There are no games tagged with this aspect in react.

💪 Workout

Theory put into practice/that’s how you achieve X points

⚠️ There are no insights tagged with this aspect in react. :warning: There are no exercises tagged with this aspect in react. :warning: There are no games tagged with this aspect in react.

🦑 Deep

Prerequisite knowledge consisting of 2 or more 👶/💪 workouts

⚠️ There are no insights tagged with this aspect in react. :warning: There are no exercises tagged with this aspect in react. :warning: There are no games tagged with this aspect in react.

✨ New

Recently added/gained traction feature

⚠️ There are no insights tagged with this aspect in react. :warning: There are no exercises tagged with this aspect in react. :warning: There are no games tagged with this aspect in react.

🔮 Obscura

Stories, obscure details that don’t specifically relate to a learning objective

⚠️ There are no insights tagged with this aspect in react. :warning: There are no exercises tagged with this aspect in react. :warning: There are no games tagged with this aspect in react.

Content without aspects

1. what-is-react
2. what-is-jsx
3. one-way-data-binding
4. what-i-need-to-use-react
5. why-use-react
6. the-react-element
7. the-react-component
8. what-are-props
9. what-is-state
10. functional-components
11. the-component-lifecycle
12. component-lifecycle-methods
13. rendering-multiple-components
14. forms-in-react
15. event-handling-in-react
16. conditional-rendering-part-1
17. conditional-rendering-part-2
18. the-ref-callback-attribute
19. jsx-spread-attributes
20. destructuring-arguments
21. immutability-helpers-in-react
22. load-initial-data-via-ajax
23. reactdom-render-ref
24. null-value-for-controlled-components-in-react
25. keyed-fragments-in-react
26. dangerously-set-innerhtml
27. if-else-statements-in-jsx-and-react
28. self-closing-tags-in-jsx
29. using-false-in-jsx
30. react-in-line-styles
31. prop-validation
32. default-values-for-props
33. enhanced-prop-validation
34. custom-validations-for-props
35. custom-proptype-s-to-be-required
36. children-in-react
37. dealing-with-this-props-children
38. type-of-the-children-props
39. specify-a-single-child
40. props-in-getinitialstate-is-an-anti-pattern
41. clone-elements-in-react
42. componentwillreceiveprops-not-triggered-after-mounting
43. shallow-compare-in-react
44. shortcut-for-transferring-props
45. use-proptypes-on-stateless-components
46. use-redux-with-react
47. the-redux-store
48. understanding-pure-impure-functions
49. export-selectors-with-related-reducers
50. async-flow-in-redux
51. avoid-array-mutations
52. avoid-object-mutations
53. combine-reducers-in-redux