diff --git a/challenges/03-front-end-libraries/react.json b/challenges/03-front-end-libraries/react.json index 40d274aee7c..c254a3f852d 100644 --- a/challenges/03-front-end-libraries/react.json +++ b/challenges/03-front-end-libraries/react.json @@ -6,27 +6,33 @@ "challenges": [ { "id": "587d7dbc367417b2b2512bb1", - "title": "Introduction to the React Challenges", + "title": "Create a Simple JSX Element", "description": [ - [ - "", - "", - "React is a JavaScript library designed to make it easier to build complex user interfaces. React does this in a few ways:

  1. React allows HTML to render from a JavaScript file.
  2. React breaks a website's parts into Components that can then be combined to build pages.
  3. React Components can pass data to each other as properties


React uses a virtual Document Object Model. Instead of changing the DOM directly, React makes a simplified copy of the DOM (the virtual DOM) when the page loads. This allows React to make changes to elements on the page without re-rendering the entire page. This can improve the responsiveness and functionality of single-page applications.

While not part of the React library and not required, JSX is often paired with React. JSX is a preprocessor for JavaScript written in a syntax akin to XML that results in more readable code.

Fun fact: freeCodeCamp is built using React.", - "" - ], - [ - "", - "", - "The React challenges have not been ported into freeCodeCamp yet. You can visit this link to work through the alpha version of these challenges. If you have feedback, you can open an issue (or pull request) directly on this repository.", - "" - ] + "Intro: 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: { 'this is treated as JavaScript 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.", + "
", + "Instructions: The current code uses JSX to assign a div element to the constant JSX. Replace the div with an h1 element and add the text Hello JSX! inside it." ], - "releasedOn": "Feb 17, 2017", - "challengeSeed": [], - "tests": [], - "type": "waypoint", - "challengeType": 7, - "isRequired": false, + "files": { + "indexjsx": { + "key": "indexjxs", + "ext": "jsx", + "name": "index", + "contents": [ + "", + "var jsx =
;", + "" + ] + } + }, + "tests": [ + "assert(Enzyme.shallow(jsx).type === 'h1', 'message: The constant JSX should return an h1 element.');", + "assert(Enzyme.shallow(jsx).children() === 'Hello JSX!', 'message: The h1 tag should include the text Hello JSX!');" + ], + "type": "modern", + "isRequired": true, "translations": {} } ]