JavaScript React Course

React Course Overview

Table of Contents

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

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	✅	👶 introduction	❌	✅	✅	❌	❌
2	what-is-jsx	✅	👶 introduction	❌	✅	✅	❌	❌
3	one-way-data-binding	✅	👶 introduction	❌	✅	✅	❌	❌
4	what-i-need-to-use-react	✅	👶 introduction	❌	✅	✅	❌	❌
5	why-use-react	✅	👶 introduction	❌	✅	✅	❌	❌

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	✅	👶 introduction	❌	✅	✅	❌	❌
2	the-react-component	✅	👶 introduction	❌	✅	✅	❌	❌
3	what-are-props	✅	👶 introduction	❌	✅	✅	❌	❌
4	what-is-state	✅	👶 introduction	❌	✅	✅	❌	❌
5	functional-components	✅	👶 introduction 🦑 deep	❌	✅	✅	❌	❌

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	✅	👶 introduction	❌	✅	✅	❌	❌
2	component-lifecycle-methods	✅	👶 introduction	❌	✅	✅	❌	❌
3	rendering-multiple-components	✅	👶 introduction	❌	✅	✅	❌	❌
4	forms-in-react	✅	🦑 deep	❌	✅	✅	❌	❌
5	event-handling-in-react	✅	🦑 deep	❌	✅	✅	❌	❌

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	✅	👶 introduction	❌	✅	✅	❌	❌
2	conditional-rendering-part-2	✅	👶 introduction	❌	✅	✅	❌	❌
3	the-ref-callback-attribute	✅	🦑 deep	❌	✅	✅	❌	❌
4	jsx-spread-attributes	✅	🦑 deep	❌	✅	✅	❌	❌
5	destructuring-arguments	✅	🦑 deep	❌	✅	✅	❌	❌

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	✅	🦑 deep	❌	✅	✅	❌	❌
2	load-initial-data-via-ajax	✅	🦑 deep	❌	✅	✅	❌	❌
3	reactdom-render-ref	✅	🦑 deep	❌	✅	✅	❌	❌
4	null-value-for-controlled-components-in-react	✅	🦑 deep	❌	✅	✅	❌	❌
5	fragments-in-react	✅	🦑 deep	❌	✅	✅	❌	❌

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	✅	🦑 deep	❌	✅	✅	❌	❌
2	if-else-statements-in-jsx-and-react	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	self-closing-tags-in-jsx	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	using-false-in-jsx	✅	🦑 deep	❌	✅	✅	❌	❌
5	react-in-line-styles	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌

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	✅	👶 introduction	❌	✅	✅	❌	❌
2	default-values-for-props	✅	👶 introduction	❌	✅	✅	❌	❌
3	enhanced-prop-validation	✅	🦑 deep	❌	✅	✅	❌	❌
4	custom-validations-for-props	✅	🦑 deep	❌	✅	✅	❌	❌
5	custom-proptype-s-to-be-required	✅	🦑 deep	❌	✅	✅	❌	❌

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	✅	🦑 deep	❌	✅	✅	❌	❌
2	dealing-with-this-props-children	✅	🦑 deep	❌	✅	✅	❌	❌
3	type-of-the-children-props	✅	🦑 deep 💪 workout	❌	✅	✅	❌	❌
4	specify-a-single-child	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	props-in-constructor-state-is-an-anti-pattern	✅	🦑 deep	❌	✅	✅	❌	❌

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	✅	🦑 deep	❌	✅	✅	❌	❌
2	shallow-compare-in-react	✅	🦑 deep	❌	✅	✅	❌	❌
3	shortcut-for-transferring-props	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	use-proptypes-on-stateless-components	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌

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	✅	👶 introduction	❌	✅	✅	❌	❌
2	the-redux-store	✅	👶 introduction	❌	✅	✅	❌	❌
3	understanding-pure-impure-functions	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	export-selectors-with-related-reducers	✅	👶 introduction	❌	✅	✅	❌	❌

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	✅	🦑 deep	❌	✅	✅	❌	❌
2	avoid-array-mutations	✅	🦑 deep	❌	✅	✅	❌	❌
3	avoid-object-mutations	✅	🦑 deep	❌	✅	✅	❌	❌
4	combine-reducers-in-redux	✅	🦑 deep	❌	✅	✅	❌	❌

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

Insights:

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. conditional-rendering-part-1
15. conditional-rendering-part-2
16. prop-validation
17. default-values-for-props
18. use-redux-with-react
19. the-redux-store
20. understanding-pure-impure-functions
21. export-selectors-with-related-reducers

⚠️ 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

Insights:

1. if-else-statements-in-jsx-and-react
2. self-closing-tags-in-jsx
3. react-in-line-styles
4. type-of-the-children-props
5. specify-a-single-child
6. shortcut-for-transferring-props
7. use-proptypes-on-stateless-components
8. understanding-pure-impure-functions

⚠️ 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

Insights:

1. functional-components
2. forms-in-react
3. event-handling-in-react
4. the-ref-callback-attribute
5. jsx-spread-attributes
6. destructuring-arguments
7. immutability-helpers-in-react
8. load-initial-data-via-ajax
9. reactdom-render-ref
10. null-value-for-controlled-components-in-react
11. fragments-in-react
12. dangerously-set-innerhtml
13. if-else-statements-in-jsx-and-react
14. self-closing-tags-in-jsx
15. using-false-in-jsx
16. react-in-line-styles
17. enhanced-prop-validation
18. custom-validations-for-props
19. custom-proptype-s-to-be-required
20. children-in-react
21. dealing-with-this-props-children
22. type-of-the-children-props
23. specify-a-single-child
24. props-in-constructor-state-is-an-anti-pattern
25. clone-elements-in-react
26. shallow-compare-in-react
27. shortcut-for-transferring-props
28. use-proptypes-on-stateless-components
29. async-flow-in-redux
30. avoid-array-mutations
31. avoid-object-mutations
32. combine-reducers-in-redux

⚠️ 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.

✅ All content has been tagged with aspects.