mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-20 12:03:11 -04:00
2f34e67331
* fix(Challenges.): Prevent source from being overwritten * fix(Challenges): Tests should use name * fix(seed/react): Namespace tests for now
79 lines
4.7 KiB
JSON
79 lines
4.7 KiB
JSON
{
|
|
"name": "React",
|
|
"order": 5,
|
|
"time": "5 hours",
|
|
"helpRoom": "Help",
|
|
"required": [
|
|
{
|
|
"src": "https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.development.js"
|
|
}
|
|
],
|
|
"challenges": [
|
|
{
|
|
"id": "587d7dbc367417b2b2512bb1",
|
|
"title": "Create a Simple JSX Element",
|
|
"description": [
|
|
"<strong>Intro:</strong> React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications.",
|
|
"React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned, however there are a few key differences that will be covered throughout these challenges.",
|
|
"For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: <code>{ 'this is treated as JavaScript code' }</code>. Keep this in mind, since it's used in several future challenges.",
|
|
"However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process. For your convenience, it's already added behind the scenes for these challenges. If you happen to write syntactically invalid JSX, you will see the first test in these challenges fail.",
|
|
"<hr>",
|
|
"<strong>Instructions:</strong> The current code uses JSX to assign a <code>div</code> element to the constant <code>JSX</code>. Replace the <code>div</code> with an <code>h1</code> element and add the text <code>Hello JSX!</code> inside it."
|
|
],
|
|
"files": {
|
|
"indexjsx": {
|
|
"key": "indexjsx",
|
|
"ext": "jsx",
|
|
"name": "index",
|
|
"contents": [
|
|
"",
|
|
"const jsx = <div></div>;",
|
|
""
|
|
]
|
|
}
|
|
},
|
|
"tests": [
|
|
"assert(Enzyme.shallow(jsx).type() === 'h1', 'message: The constant JSX should return an <code>h1</code> element.');",
|
|
"assert(Enzyme.shallow(jsx).contains( 'Hello JSX!'), 'message: The <code>h1</code> tag should include the text <code>Hello JSX!</code>');"
|
|
],
|
|
"type": "modern",
|
|
"isRequired": false,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"id": "5a24c314108439a4d4036168",
|
|
"title": "Write a React Component from Scratch",
|
|
"releasedOn": "December 25, 2017",
|
|
"description": [
|
|
"Now that you've learned the basics of JSX and React components, it's time to write a component on your own. React components are the core building blocks of React applications so it's important to become very familiar with writing them. Remember, a typical React component is an ES6 <code>class</code> which extends <code>React.Component</code>. It has a render method that returns HTML (from JSX) or <code>null</code>. This is the basic form of a React component. Once you understand this well, you will be prepared to start building more complex React projects.",
|
|
"<hr>",
|
|
"Define a class <code>MyComponent</code> that extends <code>React.Component</code>. Its render method should return a <code>div</code> that contains an <code>h1</code> tag with the text: <code>My First React Component!</code> in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too.",
|
|
"Render this component to the DOM using <code>ReactDOM.render()</code>. There is a <code>div</code> with <code>id='challenge-node'</code> available for you to use."
|
|
],
|
|
"files": {
|
|
"indexjsx": {
|
|
"key": "indexjsx",
|
|
"ext": "jsx",
|
|
"name": "index",
|
|
"contents": [
|
|
"// change code below this line",
|
|
""
|
|
]
|
|
}
|
|
},
|
|
"backup-tests": [
|
|
"(getUserInput) => assert(getUserInput('index').replace(/\\s/g, '').includes('classMyComponentextendsReact.Component{'), 'message: There should be a React component called MyComponent')"
|
|
],
|
|
"head": [],
|
|
"tail": [],
|
|
"solutions": [
|
|
"// change code below this line\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>My First React Component!</h1>\n </div>\n );\n }\n};\n\nReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));"
|
|
],
|
|
"type": "modern",
|
|
"isRequired": false,
|
|
"translations": {},
|
|
"react": true
|
|
}
|
|
]
|
|
}
|