Skip to content

Latest commit

 

History

History
124 lines (98 loc) · 5.75 KB

CHALLENGE_MAP.md

File metadata and controls

124 lines (98 loc) · 5.75 KB
Raw

#Challenge Map:#

  • ✅ Challenge is fully QA'd and ready to ship
  • 📘 Challenge has been reviewed and is ready for QA
  • 📝 Challenge is fully written
  • ✏️ Challenge is being written

###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 our Messages App
    • 📘 9: Extract Local State into Redux
    • 📘 10: Moving Forward From Here