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

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

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

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.