diff --git a/challenges/03-front-end-libraries/react.json b/challenges/03-front-end-libraries/react.json index fc6adf8d7a7..ee7019b9959 100644 --- a/challenges/03-front-end-libraries/react.json +++ b/challenges/03-front-end-libraries/react.json @@ -27,7 +27,7 @@ "name": "index", "contents": [ "", - "var jsx =
;", + "const jsx = ;", "" ] } @@ -39,6 +39,40 @@ "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 ES6class
which extends React.Component
. It has a render method that returns HTML (from JSX) or null
. 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.",
+ "MyComponent
that extends React.Component
. Its render method should return a div
that contains an h1
tag with the text: My First React Component!
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 ReactDOM.render()
. There is a div
with id='challenge-node'
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