React challenges

[QuincyLarson]

@BerkeleyTrue is in charge of coordinating the creation of these challenges, but he needs your help.

Here are the challenges we have currently planned:

• [X] JSX
  • [X] Create a simple JSX element
  • [X] Create a new element with composition
  • [X] Add a CSS class with the className property
  • [X] Create an element using React.createElement (demonstrates jsx turns into plain javascript)
  • [X] Add Comments in JSX
• [X] Rendering
  • [X] Render an HTML element to the DOM
  • [X] Render a component to the DOM
• [x] Components
  • [x] Create a functional component
  • [x] Create a component using the class syntax
  • [x] Render a pair of divs from a component
• [ ] Props
  • [X] Pass a string to a component using JSX
  • [X] Access props using this.props
  • [ ] Pass an array to a component using JSX
  • [ ] Pass an array to a component using React.createElement
  • [ ] Set the default props using the defaultProps static component property
  • [ ] Define your components shape with propTypes
• [x] State
  • [x] Define the initial state within the components constructor
  • [x] Display state with this.state
  • [x] Update state with setState
• [ ] Components, again?
  • [ ] Conditionally render elements from a component
  • [ ] componentWillMount (todo)
  • [ ] Ajax data with componentDidMount
  • [ ] Everybody cleanup with componentWillUnmount
  • [ ] Update state with componentWillReceiveProps
  • [ ] Prevent re-render with shouldComponentUpdate
  • [ ] child lifecycle order (todo)
• [ ] Rendering, node style
  • [ ] render server side with renderToString

edit(@berkeley): proptypes/defaultProps added. Some state challenges added

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is prepopulated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

[t3h2mas]

Solid approach. After propTypes are introduced, we can use

component.propTypes = {
    propArray: React.propTypes.array.isRequired
};

for idiomatic react prop checking

[sjames1958gm]

I updated the challenge component from Class to Bootcamp as I thought Class as a component name could be confused with the keyword class.

[sjames1958gm]

Set the default props using the defaultProps static component property

Challenge Description In a previous challenge we added guard code to protect against using an undefined property with array map as seen here with the property ingredients.

var ingredients = this.props.ingredients || [];

While this method works, it can be error prone and may result in repeated code if other component functions need to access the property.

React provides a mechanism for specifying the default value for a property if it is not supplied by the parent component. By adding the defaultProps property to a component React will initialize any property not provided with the specified default.

By providing the default value of [] for ingredients, the component can be assured that this.props.students is set to a valid array and not undefined.

import { Component } from 'react';

export default class Recipe extends Component {
    constructor(props) {
        super(props);
    }
    render() {
      // this.props.ingredients will be set to an empty array if not provided by the parent.
      // . . .
    }
}

Recipe.defaultProps = {
  ingredients: []
};

Instructions Modify the implementation of the Bootcamp component below adding a default property for students and removing the code that guards against error from this.props.students being undefined.

Challenge Seed

import { Component } from 'react';

export default class Bootcamp extends Component { constructor(props) { super(props); }

render() {
    // If students props not supplied use an empty array
    const students = this.props.students || [];
    return (
      <div>
         <p>The following students are enrolled in this bootcamp</p>
         <ul>
             { students.map((student, index) =>{
                return <li key={index}>{student}</li>
              })}
           </ul>
        </div>
    );
}

}

const students= ["Larry Fine", "Charlie Brown", "Bart Simpson", "Jimmy Neutron"]; ReactDOM.render(

, document.getElementById('container') ); **Challenge Solution** import { Component } from 'react'; export default class Bootcamp extends Component { constructor(props) { super(props); } ``` render() { return (

The following students are enrolled in this bootcamp

{ this.prop.students.map((student, index) =>{ return
• {student}
})}

); } ``` } Bootcamp.defaultProps = { students: [] }; var students= ["Larry Fine", "Charlie Brown", "Bart Simpson", "Jimmy Neutron"]; ReactDOM.render( , document.getElementById('container') );

[t3h2mas]

@BerkeleyTrue Could you provide a simple test example, please? After searching through the main repo it looks like Tape is used, not Mocha?

[t3h2mas]

@sjames1958gm I am under the impression that with default props, you can pass an incorrect variable to the component without an error. Such as <Bootcamp students={'hello free code camp...'} /> The default works, however when you use <Bootcamp />

[sjames1958gm]

In the follow-up challenge on prop types we can cover that case where the wrong type is passed?

[QuincyLarson]

@sjames1958gm you mean how you should handle wrong props in a way that is robust?

[sjames1958gm]

Yes. Introduce prop types as a way to handle invalid props. Build on the last two challenges.

[alayek]

@t3h2mas yeah, JS is not a language that can natively handle all that. Hence a lot of errors read like undefined is not a function. On a funnier note, try out Elm. Really cool stuff, much much better than React and Redux.

I guess we should also point out by either explicitly mentioning these pitfalls or simply setting up traps in our exercise and our test cases to teach them by forcing them to handle null and undefined in their code.

[mmhansen]

@BerkeleyTrue Any help needed with the rest of the challenges here?

[alayek]

@mmhansen sure! How would you like to help?

[mmhansen]

Well, I can finish writing the challenges if you'd like or I can get started on the tests.

[QuincyLarson]

@mmhansen If you start adding tests, we can start QA'ing them. Either way is fine, though. I appreciate all your help with these, and don't want to interrupt your forward momentum.

[mmhansen]

@QuincyLarson I really just don't want to see one little piece holding up all the amazing work others have done toward the curriculum update.

I'll try to get started on the tests.

[QuincyLarson]

@mmhansen I wouldn't worry about that happening - there are a ton of open issues that we're all working on 😉

Thank you for all your hard work on this. Of all the new things we're introducing, the React challenges seem to have campers the most excited 😄

[mmhansen]

@t3h2mas hey, do you want to talk about how you were going to go about testing? It looks like you already put some thought into it.

[t3h2mas]

@mmhansen That is where I have been held up. I'm pretty sure @BerkeleyTrue has a testing stack in place and wants the solution we come up with not to add unneeded dependency weight to the project. (Maybe he can chime in on this, or point us in a direction?) I think a good first step is getting a picture of an example test using tools that Free Code Camp is currently using.

Okay, so far (my thought process on this) I looked for a test configuration that might relate to React in the package.json file here. It looks like tape is being used to test the client, server, and common directories. After manually clicking through the client folder I found this which appears to be on the right track.

Looking through a few common directories and this may be a better starting point. I haven't looked through the rest of the common stuff. I plan on using some command line tools to make sifting through the FreeCodeCamp/FreeCodeCamp repository easier.

I started a new job recently and it took a bigger toll on my time than expected. I believe getting through these tests is going to get the React challenges, that the community has been excited about, rolling towards release. If you make any progress before I do, please post here. Also if you have any questions, post them here as well. I appreciate any help getting this closer to release for our community.

[QuincyLarson]

@t3h2mas congratulations on your new job. I urge you to focus primarily on adapting to that. I will talk with @BerkeleyTrue tomorrow about testing react. You are correct that this is by far the most-anticipated aspect of our expanded curriculum, and we want to remove any blocks or ambiguity so progress can continue on designing these challenges.

[t3h2mas]

@all I combined a few different jsfiddles and came up with a client side test using Mocha, Chai, and ReactTestUtils

http://jsfiddle.net/t3h2mas/pctbbhh3/2/

Hopefully this can provide some direction getting these tests knocked out!

related: https://discuss.reactjs.org/t/whats-the-prefered-way-to-test-react-js-components/26

[QuincyLarson]

@t3h2mas yes - I believe @bonham000 has a similar setup he built in the last day or two. I bet he can link to it and you could give him feedback and see whether there are any obvious ways to improve upon it.

[bonham000]

@all Yes I have something similar put together and after speaking with @QuincyLarson and @BerkeleyTrue we are going to try and move the development of these React/Redux challenges to what I have. I built a prototype tool that lets you write a challenge with its tests and test it in a browser environment. This is important so we can ensure the tests we are writing are testing the specific functionality correctly. Also, it should help with QA.

It's using Enzyme to mock React components and the same node asserts FCC currently uses to actually run the tests against React/ES6 code written in an in-browser code editor. Previously I did use the React-test-utils add-on like @t3h2mas has, but after finding a way to incorporate Enyzme I think this is a better solution and should provide everything we need for testing React.

I have the project set up with templates for both React and Redux challenges and some guidelines that should make adding challenges pretty straightforward. Note that this isn't exactly how the challenges will be implemented in the FCC platform, we will have to pull them in manually similarly to how we were going to pull in everything from these Issues to the JSON seed files, but this tool allows us to verfiy our tests are working correctly.

I've pulled the challenge maps from these React, Redux, and React-Redux Issues to a CHALLENGES_MAP.md file in my project repo which will serve as the updated challenge map moving forward and I'm starting to work on pulling in the challenges that have already been written here to this repo and adding tests to them.

Here is the project GitHub repository And here is the project currently running live

Note that the current challenges in the live version at this time are not meant to represent that actual challenges, I wrote all these to just see if the testing would work properly.

I will be updating this pretty frequently and I think @no-stack-dub-sack will be helping me as well so please comment here if you want to help as well!!!

My target is to have all the React & Redux challenges written and ready for QA within the next few weeks.

[QuincyLarson]

Thanks everyone! I'm closing this thread because our alpha React + Redux challenges are live. Read about them here: https://forum.freecodecamp.com/t/alpha-of-free-code-camps-react-redux-challenges-is-now-live/64492