Free Code Camp Walkthrough 38 | Front End Development Libraries - React

In this tutorial I'll show you how to get through the React - Front End Development Libraries Certification course on Free Code Camp.

Do the exercises yourself on freecodecamp.org and refer to the walkthrough when you get stuck - btw, as the name suggests: freecodecamp is free to use.

Free Code Camp | https://www.freecodecamp.org/learn/front-end-development-libraries/
-------------------------------------------------------------------
Timestamps/Tasks:
0:00 Intro
0:27 Create a Simple JSX Element
1:05 Create a Complex JSX Element
2:57 Add Comments in JSX
3:39 Render HTML Elements to the DOM
5:54 Define an HTML Class in JSX
6:46 Learn About Self-Closing JSX Tags
7:26 Create a Stateless Functional Component
8:15 Create a React Component
9:29 Create a Component with Composition
10:43 Use React to Render Nested Components
11:48 Compose React Components
13:24 Render a Class Component to the DOM
15:16 Write a React Component from Scratch
17:51 Pass Props to a Stateless Functional Component
19:48 Pass an Array as Props
22:44 Use Default Props
23:54 Override Default Props
24:53 Use PropTypes to Define the Props You Expect
26:20 Access Props Using this.props
27:59 Review Using Props with Stateless Functional Components
30:15 Create a Stateful Component
31:51 Render State in the User Interface
32:32 Render State in the User Interface Another Way
33:40 Set State with this.setState
34:48 Bind 'this' to a Class Method
36:46 Use State to Toggle an Element
38:46 Write a Simple Counter
41:29 Create a Controlled Input
44:59 Create a Controlled Form
48:11 Pass State as Props to Child Components
49:37 Pass a Callback as Props
52:03 Use the Lifecycle Method componentWillMount
52:37 Use the Lifecycle Method componentDidMount
53:50 Add Event Listeners
55:47 Optimize Re-Renders with shouldComponentUpdate
57:39 Introducing Inline Styles
58:59 Add Inline Styles in React
1:00:58 Use Advanced JavaScript in React Render Method
1:03:13 Render with an If-Else Condition
1:05:58 Use && for a More Concise Conditional
1:07:00 Use a Ternary Expression for Conditional Rendering
1:10:15 Render Conditionally from Props
1:14:13 Change Inline CSS Conditionally Based on Component State
1:15:21 Use Array.map() to Dynamically Render Elements
1:18:05 Give Sibling Elements a Unique Key Attribute
1:19:32 Use Array.filter() to Dynamically Filter an Array
1:22:02 Render React on the Server with renderToString
1:22:53 Outro
-------------------------------------------------------------------
All my Free Code Camp Walkthroughs | https://www.youtube.com/playlist?list=PLJO7vAdVP8x0BF4qzwIk5OAmx71rVz8lQ
-------------------------------------------------------------------
Music by Silent Partner
-------------------------------------------------------------------
Odyssey | https://odysee.com/$/invite/@michaelbrig:0