{
"name": "React",
"isUpcomingChange": false,
"dashedName": "react",
"order": 5,
"time": "5 hours",
"template": "${ source || '' }",
"required": [
{
"src": "https://unpkg.com/react@16.4.0/umd/react.production.min.js"
},
{
"src": "https://unpkg.com/react-dom@16.4.0/umd/react-dom.production.min.js"
}
],
"superBlock": "front-end-development-libraries",
"superOrder": 3,
"challengeOrder": [
[
"587d7dbc367417b2b2512bb1",
"Create a Simple JSX Element"
],
[
"5a24bbe0dba28a8d3cbd4c5d",
"Create a Complex JSX Element"
],
[
"5a24bbe0dba28a8d3cbd4c5e",
"Add Comments in JSX"
],
[
"5a24bbe0dba28a8d3cbd4c5f",
"Render HTML Elements to the DOM"
],
[
"5a24c314108439a4d4036160",
"Define an HTML Class in JSX"
],
[
"5a24c314108439a4d4036161",
"Learn About Self-Closing JSX Tags"
],
[
"5a24c314108439a4d4036162",
"Create a Stateless Functional Component"
],
[
"5a24c314108439a4d4036163",
"Create a React Component"
],
[
"5a24c314108439a4d4036164",
"Create a Component with Composition"
],
[
"5a24c314108439a4d4036165",
"Use React to Render Nested Components"
],
[
"5a24c314108439a4d4036166",
"Compose React Components"
],
[
"5a24c314108439a4d4036167",
"Render a Class Component to the DOM"
],
[
"5a24c314108439a4d4036168",
"Write a React Component from Scratch"
],
[
"5a24c314108439a4d4036169",
"Pass Props to a Stateless Functional Component"
],
[
"5a24c314108439a4d403616a",
"Pass an Array as Props"
],
[
"5a24c314108439a4d403616b",
"Use Default Props"
],
[
"5a24c314108439a4d403616c",
"Override Default Props"
],
[
"5a24c314108439a4d403616d",
"Use PropTypes to Define the Props You Expect"
],
[
"5a24c314108439a4d403616e",
"Access Props Using this.props"
],
[
"5a24c314108439a4d403616f",
"Review Using Props with Stateless Functional Components"
],
[
"5a24c314108439a4d4036170",
"Create a Stateful Component"
],
[
"5a24c314108439a4d4036171",
"Render State in the User Interface"
],
[
"5a24c314108439a4d4036172",
"Render State in the User Interface Another Way"
],
[
"5a24c314108439a4d4036173",
"Set State with this.setState"
],
[
"5a24c314108439a4d4036174",
"Bind 'this' to a Class Method"
],
[
"5a24c314108439a4d4036176",
"Use State to Toggle an Element"
],
[
"5a24c314108439a4d4036177",
"Write a Simple Counter"
],
[
"5a24c314108439a4d4036178",
"Create a Controlled Input"
],
[
"5a24c314108439a4d4036179",
"Create a Controlled Form"
],
[
"5a24c314108439a4d403617a",
"Pass State as Props to Child Components"
],
[
"5a24c314108439a4d403617b",
"Pass a Callback as Props"
],
[
"5a24c314108439a4d403617c",
"Use the Lifecycle Method componentWillMount"
],
[
"5a24c314108439a4d403617d",
"Use the Lifecycle Method componentDidMount"
],
[
"5a24c314108439a4d403617e",
"Add Event Listeners"
],
[
"5a24c314108439a4d4036180",
"Optimize Re-Renders with shouldComponentUpdate"
],
[
"5a24c314108439a4d4036181",
"Introducing Inline Styles"
],
[
"5a24c314108439a4d4036182",
"Add Inline Styles in React"
],
[
"5a24c314108439a4d4036183",
"Use Advanced JavaScript in React Render Method"
],
[
"5a24c314108439a4d4036184",
"Render with an If-Else Condition"
],
[
"5a24c314108439a4d4036185",
"Use && for a More Concise Conditional"
],
[
"5a24c314108439a4d4036187",
"Use a Ternary Expression for Conditional Rendering"
],
[
"5a24c314108439a4d4036188",
"Render Conditionally from Props"
],
[
"5a24c314108439a4d4036189",
"Change Inline CSS Conditionally Based on Component State"
],
[
"5a24c314108439a4d403618a",
"Use Array.map() to Dynamically Render Elements"
],
[
"5a24c314108439a4d403618b",
"Give Sibling Elements a Unique Key Attribute"
],
[
"5a24c314108439a4d403618c",
"Use Array.filter() to Dynamically Filter an Array"
],
[
"5a24c314108439a4d403618d",
"Render React on the Server with renderToString"
]
]}