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

The now live Beta Version of freeCodeCamp's expanded curriculum redirects campers to a separate host site for these React challenges, while we work on merging them into the FCC platform. Eventually, the goal is for all of these challenges to be moved directly into the freeCodeCamp codebase.

Currently, we have finished the initial QA and review of all of these challenges and are quite happy with them. There is still a possibility that there are bugs or typos we have not found yet. If you find something you think needs to be fixed, or have a suggestion for any of the challenges, please open an Issue here first so we can discuss it.

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

• 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

• 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

• 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.strictEqual(shallowRender.type(), 'div', 'The component renders a div element');

This project was bootstrapped with Create React App.