mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-08 12:04:29 -05:00
213 lines
5.6 KiB
JSON
213 lines
5.6 KiB
JSON
{
|
|
"name": "React",
|
|
"isUpcomingChange": false,
|
|
"dashedName": "react",
|
|
"helpCategory": "JavaScript",
|
|
"template": "<body><div id='root'></div><div id='challenge-node'></div>${ source || '' }</body>",
|
|
"required": [
|
|
{
|
|
"src": "https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"
|
|
},
|
|
{
|
|
"src": "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"
|
|
},
|
|
{
|
|
"src": "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom-test-utils.production.min.js"
|
|
},
|
|
{
|
|
"src": "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom-server.browser.production.min.js"
|
|
}
|
|
],
|
|
"challengeOrder": [
|
|
{
|
|
"id": "587d7dbc367417b2b2512bb1",
|
|
"title": "Create a Simple JSX Element"
|
|
},
|
|
{
|
|
"id": "5a24bbe0dba28a8d3cbd4c5d",
|
|
"title": "Create a Complex JSX Element"
|
|
},
|
|
{
|
|
"id": "5a24bbe0dba28a8d3cbd4c5e",
|
|
"title": "Add Comments in JSX"
|
|
},
|
|
{
|
|
"id": "5a24bbe0dba28a8d3cbd4c5f",
|
|
"title": "Render HTML Elements to the DOM"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036160",
|
|
"title": "Define an HTML Class in JSX"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036161",
|
|
"title": "Learn About Self-Closing JSX Tags"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036162",
|
|
"title": "Create a Stateless Functional Component"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036163",
|
|
"title": "Create a React Component"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036164",
|
|
"title": "Create a Component with Composition"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036165",
|
|
"title": "Use React to Render Nested Components"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036166",
|
|
"title": "Compose React Components"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036167",
|
|
"title": "Render a Class Component to the DOM"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036168",
|
|
"title": "Write a React Component from Scratch"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036169",
|
|
"title": "Pass Props to a Stateless Functional Component"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403616a",
|
|
"title": "Pass an Array as Props"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403616b",
|
|
"title": "Use Default Props"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403616c",
|
|
"title": "Override Default Props"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403616d",
|
|
"title": "Use PropTypes to Define the Props You Expect"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403616e",
|
|
"title": "Access Props Using this.props"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403616f",
|
|
"title": "Review Using Props with Stateless Functional Components"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036170",
|
|
"title": "Create a Stateful Component"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036171",
|
|
"title": "Render State in the User Interface"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036172",
|
|
"title": "Render State in the User Interface Another Way"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036173",
|
|
"title": "Set State with this.setState"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036174",
|
|
"title": "Bind 'this' to a Class Method"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036176",
|
|
"title": "Use State to Toggle an Element"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036177",
|
|
"title": "Write a Simple Counter"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036178",
|
|
"title": "Create a Controlled Input"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036179",
|
|
"title": "Create a Controlled Form"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403617a",
|
|
"title": "Pass State as Props to Child Components"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403617b",
|
|
"title": "Pass a Callback as Props"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403617c",
|
|
"title": "Use the Lifecycle Method componentWillMount"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403617d",
|
|
"title": "Use the Lifecycle Method componentDidMount"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403617e",
|
|
"title": "Add Event Listeners"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036180",
|
|
"title": "Optimize Re-Renders with shouldComponentUpdate"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036181",
|
|
"title": "Introducing Inline Styles"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036182",
|
|
"title": "Add Inline Styles in React"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036183",
|
|
"title": "Use Advanced JavaScript in React Render Method"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036184",
|
|
"title": "Render with an If-Else Condition"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036185",
|
|
"title": "Use && for a More Concise Conditional"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036187",
|
|
"title": "Use a Ternary Expression for Conditional Rendering"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036188",
|
|
"title": "Render Conditionally from Props"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036189",
|
|
"title": "Change Inline CSS Conditionally Based on Component State"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403618a",
|
|
"title": "Use Array.map() to Dynamically Render Elements"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403618b",
|
|
"title": "Give Sibling Elements a Unique Key Attribute"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403618c",
|
|
"title": "Use Array.filter() to Dynamically Filter an Array"
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d403618d",
|
|
"title": "Render React on the Server with renderToString"
|
|
}
|
|
],
|
|
"blockLayout": "legacy-challenge-list"
|
|
}
|