bonham000 / fcc-react-tests-module

The original freeCodeCamp React/Redux alpha curriculum.

/* **************************************************************************************************

________                                             __             .___._.
\______ \   ____ _____________   ____   ____ _____ _/  |_  ____   __| _/| |
 |    |  \_/ __ \\____ \_  __ \_/ __ \_/ ___\\__  \\   __\/ __ \ / __ | | |
 |    `   \  ___/|  |_> >  | \/\  ___/\  \___ / __ \|  | \  ___// /_/ |  \|
/_______  /\___  >   __/|__|    \___  >\___  >____  /__|  \___  >____ |  __
        \/     \/|__|               \/     \/     \/          \/     \/  \/

**************************************************************************************************** */

This is the original project used to develop the React/Redux curriculum for freeCodeCamp. This curriculum has been migrated to freeCodeCamp and will be accessible there from now on. Any issues related to these challenges should be posted in the freeCodeCamp Github. This project is now deprecated and will not be maintained any further. 💣

The original challenges (which require an out of date version of Enzyme), will continue living at their original home.

---

freeCodeCamp React/Redux Curriculum

This repository contains the code for the Alpha version of the freeCodeCamp React/Redux Curriculum Expansion.

Overview:

• 50 React Challenges
• 18 Redux Challenges
• 10 React-Redux Challenges

---

Curriculum Map:

• ✅ Challenge is fully QA'd and ready to ship
• 📘 Challenge has been reviewed and is ready for QA

React Challenges:

• Introducing JSX Elements

  • ✅ 📘 1: Create a Simple JSX element
  • ✅ 📘 2: Create a Complex JSX Element
  • ✅ 📘 3: Add Comments in JSX (may need to revise test for comment)
  • ✅ 📘 4: Render HTML Elements to the DOM
  • ✅ 📘 5: Define an HTML Class in JSX
  • ✅ 📘 6: Learn About Self-Closing JSX Tags

• Introducing React/Components

  • ✅ 📘 7: Create a Stateless Functional Component (introduce ES6 arrow syntax here?)
  • ✅ 📘 8: Create a Component with React
  • ✅ 📘 9: Create a Component with Composition
  • ✅ 📘 10: Use React to Render Nested Components
  • ✅ 📘 11: Compose React Components
  • ✅ 📘 12: Render a Class Component to the DOM
  • ✅ 📘 13: Write a React Component from Scratch

• Props

  • ✅ 📘 14: Pass a String to a Functional Component
  • ✅ 📘 15: Pass an Array as Props
  • ✅ 📘 16: Use Default Props
  • ✅ 📘 17: Override Default Props (cannot check defaultProps on child)
  • ✅ 📘 18: Use PropTypes to Define the Props You Expect (regex .includes test for propTypes)
  • ✅ 📘 19: Access Props Using this.props
  • ✅ 📘 20: Using Props with Stateless Functional Components (regex .includes test for propTypes)

• State

  • ✅ 📘 21: Create a Stateful Component
  • ✅ 📘 22: Render State in the UI
  • ✅ 📘 23: Render State in the UI Another Way
  • ✅ 📘 24: Set State with this.setState
  • ✅ 📘 25: Bind 'this' to a Class Method
  • ✅ 📘 26: Bind 'this' with an ES6 Arrow Function
  • ✅ 📘 27: Use State to Toggle an Element
  • ✅ 📘 28: Write a Simple Counter
  • ✅ 📘 29: Create a Controlled Input
  • ✅ 📘 30: Create a Controlled Form
  • ✅ 📘 31: Pass State as Props to Child Components
  • ✅ 📘 32: Pass a Callback as Props

• Component Lifecycle

  • ✅ 📘 33: Use the Lifecycle Method componentWillMount
  • ✅ 📘 34: Use the Lifecycle Method componentDidMount
  • ✅ 📘 35: Add Event Listeners is the explanation correct?
  • ✅ 📘 36: Manage Updates with Lifecycle Methods
  • ✅ 📘 37: Optimize Re-Renders with shouldComponentUpdate

• Advanced Rendering

  • ✅ 📘 38: Introducing Inline Styles
  • ✅ 📘 39: Add Inline Styles in React
  • ✅ 📘 40: Use Advanced JavaScript in React Render Method
  • ✅ 📘 41: Render with an If/Else Condition
  • ✅ 📘 42: Use && for a More Concise Conditional
  • ✅ 📘 43: Return null to Prevent Rendering
  • ✅ 📘 44: Use a Ternary Expression for Conditional Rendering
  • ✅ 📘 45: Render Conditionally from Props
  • ✅ 📘 46: Change Inline CSS Conditionally Based on Component State
  • ✅ 📘 47: Use Array.map() to Dynamically Render Elements
  • ✅ 📘 48: Give Sibling Elements a Unique Key Attribute
  • ✅ 📘 49: Use Array.filter() to Dynamically Filter an Array
  • ✅ 📘 50: Render React on the Server with renderToString

Redux Challenges:

• Basic Redux: Store, Actions, & Reducers

  • ✅ 📘 1: Create a Redux Store
  • ✅ 📘 2: Get the State of the Redux Store
  • ✅ 📘 3: Define a Redux Action
  • ✅ 📘 4: Define an Action Creator
  • ✅ 📘 5: Dispatch an Action Event
  • ✅ 📘 6: Handle an Action in the Store
  • ✅ 📘 7: Use a Switch Statement to Handle Multiple Actions
  • ✅ 📘 8: Use const for Action Types
  • ✅ 📘 9: Register a Store Listener
  • ✅ 📘 10: Combine Multiple Reducers
  • ✅ 📘 11: Send Action Data to the Store
  • ✅ 📘 12: Use Middleware to Handle Asynchronous Actions (Async testing... hacked with regex of course)
  • ✅ 📘 13: Write a Counter with Redux

• Enforcing State Immutability

  • ✅ 📘 14: Never Mutate State
  • ✅ 📘 15: Use the Spread Operator on Arrays
  • ✅ 📘 16: Remove an Item from an Array
  • ✅ 📘 17: Copy an Object with Object.assign
  • ✅ 📘 18: Use the ES6 Spread Operator with Objects

React-Redux Challenges:

• Use react-redux to Manage a List of Messages

  • ✅ 📘 1: Getting Started with React Redux
  • ✅ 📘 2: Manage State Locally First
  • ✅ 📘 3: Extract State Logic to Redux
  • ✅ 📘 4: Use Provider to Connect Redux to React
  • ✅ 📘 5: Map State to Props
  • ✅ 📘 6: Map Dispatch to Props
  • ✅ 📘 7: Connect Redux to React
  • ✅ 📘 8: Connect Redux to the Messages App
  • ✅ 📘 9: Extract Local State into Redux
  • ✅ 📘 10: Moving Forward From Here

---

To run this project locally, clone the repository, install the dependencies, and run npm start. Now you can view all the finished challenges live in the browser.

This project is running tests against React components, ES6 code, and plain JavaScript which users write directly into an in-browser code editor. To accomplish this we are using the Babel standalone package to transpile JavaScript and the testing library Enzyme to conduct tests. At a basic level the tests we're writing for React components generally look like this:

assert(Enzyme.mount(<App />).type() === 'div', 'The component renders a div element');

---

This project was bootstrapped with Create React App.

---

fcc-react-tests-module's Issues

Redux 16 test

one of the tests says:
removeToDo and immutableReducer are both functions

There is no removeToDo function, I believe it should say removeItem?

Challenge 12: Typo

...simply pass in the name of the elmemt that we want...

elmemt -> element

Challenge 6: Comment error

Challenge name: React 06: Learn About Self-Closing JSX Tags

The second to last line in the editor of this challenge should be deleted:

const JSX = (
<div>
	{/* change code below this line */}
	<p>Welcome to React!<p> <br >
	<img src="https://goo.gl/ErGBQs" alt="React Logo">
	{/* change code above this line */}
</div>
);
// change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));

The answer requires code to be changed above that line, as the JSX comments point out.

Text wrap after 62 characters in the editor

Force the text to wrap to a preferred line length, for example 62 characters

Challenge 10: Wording

The use of compositions allow us to decompose a UI into separate components, allowing us to separate our code from our logic.

The first allow should be allows to agree with the singular subject of the sentence ("_The use of...").

If I could be so bold, the sentence may sound better thusly:

"The use of compositions allows us to decompose a UI into separate components, and to separate our code from our logic."

Challenge 3 : Where to put the comment

In the instruction it says

Instructions: We've provided a JSX element similiar to what you just wrote. Add a comment after the h1.

I added the comment like this:

const JSX = (
<div>
	<h1>This is a block of JSX</h1>
	<p>Here's a subtitle</p>
  {/* hey */}
</div>);

Solution code:

const JSX = (
<div>
	<h1>This is a block of JSX</h1>
	{ /* this is a JSX comment */ }
	<p>Here's a subtitle</p>
</div>);

Does it have to be just after h1 and before p, or is it okay to put it anywhere within the JSX?

---

A small typo:

- similiar
+ similar

Challenge 22: Typo

There is a comma missing - first line after "Now that we have learned how to define a component's initial state" (comma goes after 'state')

lint warnings from {Redux,React}TestComponent.js

Would it make sense to set an ignore for these?

Warning in ./src/test-components/ReactTestComponent.js

/Users/jasonb/Self/projects/fcc-react-tests-module/src/test-components/ReactTestComponent.js
   97:41   warning  There should be no space before '='  react/jsx-equals-spacing
   97:41   warning  There should be no space after '='   react/jsx-equals-spacing
   97:58   warning  There should be no space after '='   react/jsx-equals-spacing
...
✖ 80 problems (0 errors, 80 warnings)

Challenge 14: Unclear Instructions

It is unclear that you are supposed to enter props.username into {}, because that part of code is above "change code below this line".

Challenge 19: Add link

To improve user experience, I suggest adding a link at the end of the Intro, where it says:
'Please refer to the documentation for an exhaustive list.'
I think the following is an appropriate link:
https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Challenge 15: Typo

...is an ES6 style comonent, rather than a fucntional ..

comonent -> component
fucntional -> functional

Challenge 46: Typo

Same typo in intro

Challenge: Use Array.map() to Dynamically Render Elements
Intro: Ok, so conditional rendering is pretty cool, right? But what happens when you need your components to render an unknown number of elements? Oftentimes in reactive programming, a programmer has no way to know what the state of an application will be until runtime, becuase so much depends on a user's interaction with that program. In cases like this, programmers need to write their code to correctly handle that unknown state ahead of time, and in React, we can use Array.map() to powerfully illustrate this concept.

Challenge 29: Typo

In the Instructions, second sentence:
"We've already initialized it with an <input/> property in the state set to an empty string."

I believe the word 'input' should not be in HTML tags since it refers to the name of the property

There is the same issue in the second paragraph:
"Set a value attribute which is equal to the <input/> property of the component's state"

Challenge 2 : Typo and Instruction

The second challenge, titled Challenge: Create a Complex JSX Element, has this:

...
The div contains an h1 tag as the second element.
The div contains an p tag as the second element.
...

---

I entered the following solution:

<div>
  <h1>
    Hello
  </h1>
  <p>
    Hello
  </p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

It did not work.

Solution code shows this:

const JSX = (
<div>
	<h1>Hello JSX!</h1>
	<p>Some info</p>
	<ul>
		<li>An item</li>
		<li>Another item</li>
		<li>A third item</li>
	</ul>
</div>);

The const JSX = ( part should ideally be assumed. Or leave that part like this in the codemirror text area

const JSX = (
{/* Add code below */}

{/* Add code above */}
);

Challenge 30: Test description

The second test says:

MyComponent returns a div element which contains an input, a p tag, and an h1 tag.

The p tag isn't used in the sollution and isn't needed to pass the test.

Challenge 40: Typo

While this challenge illustrates this concept in a simple way, rememebr, like with many of these challenges

Challenge 13: Passes w/o constructor call

Issue: Challenge specifies to "don't forget to call your component's constructor" but am able to pass tests without including constructor:

Recommendation: Should a test be added to test for the constructor?

Details:

Sample code that passes

class MyComponent extends React.Component {
	//constructor(props) {
   // super(props);
  //}
  render() {
  return (
    <div>
      <h1>My First React Component!</h1>
      </div>
    );
  }
}
ReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));

Challenge 39: Typo

there are other some important differences that we must note

... there are some other... (?)

bring your components to life an rich and exciting ways!

an -> in

Challenge 41: Typo/Grammar

Currently, we render the same UI everytime.

Two words, every time.

...we return the current markup, otherwise, let's just return the <button/> without the <h1/> element.

Comma splice right after 'markup'.

... we return the current markup. Otherwise...

In the tests:

The render method uses and if/else statement to check the condition of this.state.display.

and -> an

Challenge 19

The text states:

For example, in our last challenge, we accessed the prop username in our JSX code using {props.username}, but if the ReturnUsername component had been an ES6 class component instead, we would have written {this.props.username}.

The bolded bit ("in our last challenge") isn't true. This is challenge 19, but the challenge it is referring to is challenge 14.

Challenge 25: Contradictory instructions

You are required to write code below where it says, // change code above this line.

Challenge 35: Typo

In the last paragraph, in the second sentence there is a typo:

"documet.removeEventListener()"

the word 'document' is missing the letter 'n'

Challenge 36: Typo

We've create

Challenge 7: Function name not capitalized

One important thing to note is that React requires your function name to begin with a capital letter.

The FSC we create in the example is lower case. My first impulse is to correct this, which breaks the test.

const myComponent = function(props) {
	// change code below this line

	// change code above this line
}

React04: Render HTML Elements to the DOM typo on test case

Possible typo for a test case of the challenge Render HTML Elements to the DOM as shown in the highlighted text below:

Test Cases:

• Your JSX code was transpiled successfully.
• The constant JSX returns an
  element.
• The div contains an h1 tag as the second element.
• The div contains an p tag as the second element.
• The provided JSX element is rendered to the DOM node with id 'challenge-node'.

I think it should be first instead of second?

Challenge 8: Wording issue

It is best practice to always call a component's constructor with super and pass in props to each so the component can be initialized properly.

The "to each" seems like a typo or relic of a sentence long past.

Challenge 18: User can circumvent tests

The user can simply specify

Items.defaultProps = {
	quantity: 10
}

Instead of overriding the property in the JSX. As the last lesson was about changing default values, a less attentive camper may do this and miss the point of the lesson entirely.

edit: For that matter, I can also just specify the number 10 in the Items component.

Challenge 24

In the intro:

Update the click method to set the name property in state to equal the string React Rocks!.

In the seed code:

	constructor(props) {
		super(props);
		this.state = {
			name: 'Initial State'
		};
		this.click = this.click.bind(this);
	}

In the test criteria:

The state of MyComponent is initialized with the key value pair { message: 'Initial State'

It looks like the key value pair for state was originally meant to be {message: 'Some string'} but was later changed to {name: 'Some string'}, but now the test criteria no longer matches the intro and seed code. Also, the test criteria is missing the closing brace.

Challenge 29: Typo

We'll call the our method handleInput()

Challenge 43: Wording

In some cases we may not want to render a child element under certain conditions.

There's some redundancy here. I'd suggest

In some cases we may not want to render a child element

or

We may not want to render a child element under certain conditions.

The same can be said here, though there is a difference in meaning.

This can be used in some cases for example where you have a child component that just doesn't need to render under some conditions.

Challenge 38: Typo

In the second paragraph of the Intro, the second sentence:
" Applying inline styles, however, is very common in ReactJS development, and is a bit differnt that what we are used to."

• the word 'different' is misspelled
• it should say 'different than'

Challenge 4 : Live Preview does not work

In Challenge 4 : Challenge: Render HTML Elements to the DOM, the rendering works both with querySelector and getElementById.

However, the live preview is not getting updated. As in, it's not rendering to any visible node. Do we want to display the output here, to give a quick feedback to campers that ReactDOM.render() actually renders?

Tested on Latest chrome on Windows.

QA: General Feedback

This Issue is the place to discuss any general feedback on these challenges.

Challenge 44: Typo

Typo in intro

Challenge: Use a Ternary Expression to Render Conditionally
Intro: Before moving on to dynamic rendering techniques, lets cover one last way in which we can use built in JavaScript conditionals in order to render what we want, when we want it: the ternary operator. The ternary operator is often utilized as a shortcut for if/else statements in JavaScript, and, while not quite as robust as traditional if/else statements, they are very popular among React developers. One of the reasons for this is becuase, due to the way it is compiled, if/else statements cannot be inserted directly into JSX code. You might have noticed this a couple of challenges back — any time we used if/else, it was always outside the context of the return statement. That said, ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX.

Challenge 17

From the code editor as seeded, lines 9-18.

class ShoppingCart extends React.Component {
	constructor(props) {
		super(props);
	}
  render() {
    { /* change code above this line */ }
    return <Items />
    { /* change code below this line */ }
  }
};

In the code editor, the comments { /* change code above this line */ } and { /* change code below this line */ } are reversed.

Challenge 27: Grammar

There are many different ways to accomplish this, here we'll take a simple example.

This is a comma splice. It should use a period and start a new sentence instead.

There are many different ways to accomplish this. Here we'll take a simple example.

Challenge 16: Typo

In this challnege, we'll

challnege -> challenge

Challenge 23

In the Instructions it is not clarified that the 'name' variable should be rendered inside <h1> tag , but the test check for that.
I guess it is implied that it should be the same as the previous challenge (in challenge 22 it is specified to use <h1> tag), but in case the student does not do this challenge right after the previous one, it may be helpful to say it explicitly.

Challenge 44: Missing instructions

The challenge requires students to use the ternary operator, but doesn't show them what it is.

Challenge 33: Typo

The second sentence of the Intro reads:
"These are called lifecycle methods and allow us to catch componets are certain points in time,..."

There are 2 typos:

1. components (second 'n' is missing)
2. should say "at certain points in time" (not "are certain points in time")

Challenge 6: Solution code is incorrect

The solution code doesn't properly fulfill the fifth test.

Challenge 26: tests don't pass if double quotes are used in setMessage

The last test fails with double quotes for the string

setMessage = () => {
    this.setState({ message: "Goodbye!" });
  }

... but passes with single quotes

setMessage = () => {
    this.setState({ message: 'Goodbye!' });
  }

Also, it would be worth mentioning that setMessage doesn't need a variable assignment keyword (var/let/const) since we're using the class syntax.

Challenge 20: Typo/Grammer

...same UI everytime it receives...

This is actually two words: every time.

...one of React's important design principle: React is declarative...

principle should be plural here.

...It does this in a predicatable way...

predicatable -> predictable

...component as a child, however this Camper component...

This is a comma splice and should be split by a period.

component as a child. However, this Camper component

Challenge 11: Typo

Since are able to render simple JSX elements

Missing subject, we.

Challenge 31: Typo

We've provided a MyApp component which renders a Navbar components as a child

components should be singular.

Challenge 20: Intro is unclear

I'm confused as to what the intro to challenge 20 is trying to get across, and its the first time I've felt lost in the whole series. The title is 'Functional Stateless Components', which would lead me to believe that we'll be learning to make FSCs, though we learned that in challenge 7 (there called stateless functional components). The challenge task itself is to assign default props to a FSC, then pass props to it. This is perfectly reasonable, but it doesn't seem to follow from the intro, and it took me a minute to understand what I was supposed to do.

Remember at the beginning of this section...

'This section' is ambiguous for the student since there has never been mention of sections until this point. I argue it's better to point to specific challenges when references covered material.

... when we defined a functional stateless JSX element?

We did define a JSX component, but it wasn't called a "functional stateless JSX element", and this will probably lead to confusion (it has already confused me).

We can do the same thing with React Components.

We can do what thing?

The rest of the intro discusses the declarative nature of React and how it separates state from props, but since state hasn't been discussed before, the distinction is going to be lost to the reader. For many people, learning React will be the first time that they have to tackle the concept of application state, even though they've built several apps at the point of these lessons. So, enough criticism. Here's what I think should be changed:

1. Change the title to be clear about the learning goal (ex. "Default props in functional stateless components")
2. Remove the talk about statelessness and passing data as props. This challenge should be just about applying what was learned over the last couple of lessons to FSCs.
3. Add another challenge after this one that discusses application state, why it must be carefully managed, and what this has to do with React. The challenge itself can be a capstone of what has been learned so far - create a stateful component and a FSC child with default props. I'm perfectly willing and able to put the time into drafting something like this, if you'd like.

edit: I didn't move on to the next challenge where state is pretty clearly discussed. 3) May not need to be done. I think 1) and 2) are still necessary.

Challenge 12: Rendering before ReactDOM API call

The "Live Preview" section renders the components before the API call ... you do not pass the test, but the disconnect between Live Preview and Passing the Code is confusing.

Challenge 24: Typo

about understanding how we our definining the click

our -> are

Challenge 13: editing

I'm not sure what level of nit-picking you're looking for here, so I apologize if these are getting out of hand.

Once you understand this well you will be prepared to start building more complex React projects.

There ought to be a comma between well and you.

Once you understand this well, you will be prepared to start building more complex React projects.

Challenge 12: Typo

The first line of the Intro reads: "One thing you may remenber" The word 'remember' is misspelled.