My solution proposals for the React exercises.
freeCodeCamp module description:
"React is a popular JavaScript library for building reusable, component-driven user interfaces for web pages or applications. React combines HTML with JavaScript functionality into its own markup language called JSX. React also makes it easy to manage the flow of data throughout the application. In this course, you'll learn how to create different React components, manage data in the form of state props, use different lifecycle methods like componentDidMount, and much more."
- 01 - Create a Simple JSX Element
- 02 - Create a Complex JSX Element
- 03 - Add Comments in JSX
- 04 - Render HTML Elements to the DOM
- 05 - Define an HTML Class in JSX
- 06 - Learn About Self-Closing JSX Tags
- 07 - Create a Stateless Functional Component
- 08 - Create a React Component
- 09 - Create a Component with Composition
- 10 - Use React to Render Nested Components
- 11 - Compose React Components
- 12 - Render a Class Component to the DOM
- 13 - Write a React Component from Scratch
- 14 - Pass Props to a Stateless Functional Component
- 15 - Pass an Array as Props
- 16 - Use Default Props
- 17 - Override Default Props
- 18 - Use PropTypes to Define the Props You Expect
- 19 - Access Props Using this.props
- 20 - Review Using Props with Stateless Functional Components
- 21 - Create a Stateful Component
- 22 - Render State in the User Interface
- 23 - Render State in the User Interface Another Way
- 24 - Set State with this.setState
- 25 - Bind 'this' to a Class Method
- 26 - Use State to Toggle an Element
- 27 - Write a Simple Counter
- 28 - Create a Controlled Input
- 29 - Create a Controlled Form
- 30 - Pass State as Props to Child Components
- 31 - Pass a Callback as Props
- 32 - Use the Lifecycle Method componentWillMount
- 33 - Use the Lifecycle Method componentDidMount
- 34 - Add Event Listeners
- 35 - Optimize Re-Renders with shouldComponentUpdate
- 36 - Introducing Inline Styles
- 37 - Add Inline Styles in React
- 38 - Use Advanced JavaScript in React Render Method
- 39 - Render with an If-Else Condition
- 40 - Use && for a More Concise Conditional
- 41 - Use a Ternary Expression for Conditional Rendering
- 42 - Render Conditionally from Props
- 43 - Change Inline CSS Conditionally Based on Component State
- 44 - Use Array.map() to Dynamically Render Elements
- 45 - Give Sibling Elements a Unique Key Attribute
- 46 - Use Array.filter() to Dynamically Filter an Array
- 47 - Render React on the Server with renderToString