2018-10-02 14:02:53 +00:00
|
|
|
{
|
|
|
|
|
"name": "React",
|
2020-09-03 22:07:40 +00:00
|
|
|
"isUpcomingChange": false,
|
2018-10-02 14:02:53 +00:00
|
|
|
"dashedName": "react",
|
|
|
|
|
"order": 5,
|
|
|
|
|
"time": "5 hours",
|
2018-10-04 13:37:37 +00:00
|
|
|
"template": "<body><div id='root'></div><div id='challenge-node'></div>${ source || '' }</body>",
|
|
|
|
|
"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"
|
|
|
|
|
}
|
|
|
|
|
],
|
2021-08-14 02:57:13 +00:00
|
|
|
"superBlock": "front-end-development-libraries",
|
2018-10-02 14:02:53 +00:00
|
|
|
"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"
|
|
|
|
|
]
|
2021-06-03 18:45:01 +00:00
|
|
|
]}
|
