Migrate React-Redux Curriculum into FCC Codebase #16138

bonham000 · 2017-12-02T06:37:52Z

Key:

✅ Challenge is migrated and solution has been successfully QA'd in FCC editor.
🥇 Challenge copy has been QA'd and confirmed, ready to ship.

React Challenges:

✅ 🥇 1: Create a Simple JSX element
✅ 🥇 2: Create a Complex JSX Element
✅ 🥇 3: Add Comments in JSX
✅ 🥇 4: Render HTML Elements to the DOM
✅ 🥇 5: Define an HTML Class in JSX
✅ 🥇 6: Learn About Self-Closing JSX Tags
✅ 🥇 7: Create a Stateless Functional Component
✅ 🥇 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
✅ 🥇 14: Pass a String to a Functional Component
✅ 🥇 15: Pass an Array as Props
✅ 🥇 16: Use Default Props
✅ 🥇 17: Override Default Props
✅ 🥇 18: Use PropTypes to Define the Props You Expect
✅ 🥇 19: Access Props Using this.props
✅ 🥇 20: Using Props with Stateless Functional Components
✅ 🥇 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
✅ 🥇 33: Use the Lifecycle Method componentWillMount
✅ 🥇 34: Use the Lifecycle Method componentDidMount
✅ 🥇 35: Add Event Listeners
✅ 🥇36: Manage Updates with Lifecycle Methods
✅ 🥇 37: Optimize Re-Renders with shouldComponentUpdate
✅ 🥇 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 Note: Pete, refactor with simulate()
✅ 🥇 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:

✅ 🥇 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
✅ 🥇 13: Write a Counter with Redux
✅ 🥇 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:

✅ 🥇 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

Notes

There is no support for async tests in the automated test environment (we skip them currently).
These challenges rely on editor.getOriginalCode() to provide the original, untranspiled code string.
Transpiled head and tail code is required in the FCC editor during for some of these challenges but is currently not working.
Preview function is currently not working for these challenges.

Type of Change

New feature (non-breaking change which adds new functionality)
Closes [beta] Add React and Redux challenges to seed directory once they're working #16115

Description

Migrate the React-Redux Curriculum from the prototype module into the FCC codebase.

Checklist

Populate challenge files (title, description, seed code, solution).
Challenge solutions pass tests under automated test suite.
Manually check solutions work in app.
QA challenge & test copy

Motivational Images

camperbot · 2017-12-02T06:39:36Z

@bonham000 updated the pull request.

camperbot · 2017-12-03T21:38:52Z

@bonham000 updated the pull request.

camperbot · 2017-12-04T00:25:09Z

@bonham000 updated the pull request.

camperbot · 2017-12-04T04:03:21Z

@bonham000 updated the pull request.

camperbot · 2017-12-05T05:34:51Z

@bonham000 updated the pull request.

camperbot · 2017-12-05T22:11:20Z

@bonham000 updated the pull request.

camperbot · 2017-12-06T00:07:33Z

@no-stack-dub-sack updated the pull request.

camperbot · 2017-12-06T01:27:53Z

@bonham000 updated the pull request.

camperbot · 2017-12-06T07:05:52Z

@bonham000 updated the pull request.

…ge (and passes!)

camperbot · 2017-12-07T06:13:33Z

@bonham000 updated the pull request.

Ethan-Arrowood · 2017-12-08T06:02:13Z

@bonham000 I'm interested in helping you move over the react and redux challenges. Let me know how I can help!

bonham000 · 2017-12-08T18:07:10Z

Sounds good @Ethan-Arrowood I sent you a message on Gitter.

camperbot · 2017-12-09T19:09:43Z

@bonham000 updated the pull request.

Ethan-Arrowood · 2017-12-14T07:05:27Z

Going to use this comment to track my textual QA of the migrated challenges.

Completed Challenges: All React

camperbot · 2017-12-14T07:22:59Z

@bonham000 updated the pull request.

camperbot · 2017-12-14T07:38:28Z

@bonham000 updated the pull request.

camperbot · 2017-12-14T08:04:29Z

@bonham000 updated the pull request.

camperbot · 2017-12-14T08:10:28Z

@bonham000 updated the pull request.

bonham000 · 2017-12-14T08:14:54Z

@Ethan-Arrowood sounds great! Thanks for QA'ing them. Keep updating here and we'll add medals 🥇 to the passing challenges in the comment above.

We've finished migrating all the challenges so this final review is the last checklist item. Thanks again for your help!

Ethan-Arrowood · 2017-12-14T18:46:45Z

@bonham000 I'll get through all of them today (in batches). 🎉

camperbot · 2017-12-14T23:03:35Z

@Ethan-Arrowood updated the pull request.

camperbot · 2017-12-14T23:47:45Z

@Ethan-Arrowood updated the pull request.

Ethan-Arrowood · 2017-12-14T23:48:46Z

All React challenges are QA'd Redux and React-Redux coming this evening.

camperbot · 2017-12-15T01:32:21Z

@no-stack-dub-sack updated the pull request.

camperbot · 2017-12-15T02:46:16Z

@Ethan-Arrowood updated the pull request.

Ethan-Arrowood · 2017-12-15T02:58:55Z

Redux done. React-Redux up next 💯

camperbot · 2017-12-15T03:04:09Z

@Ethan-Arrowood updated the pull request.

client/frame-runner.js


+          if (helpers.isPromise(test)) {


client/frame-runner.js

+    const editor = {
+      getValue() { return source; },
+      getOriginalCode() { return originalCode; }
+    };


common/app/routes/Challenges/redux/execute-challenge-epic.js

+                originalCode = files.indexjsx.contents;
+                build.sources.originalCode = originalCode;
+              }
+              return frameTests(build);


common/app/routes/Challenges/redux/index.js

@@ -113,7 +113,7 @@ export const classicEditorUpdated = createAction(
 export const modernEditorUpdated = createAction(
  types.modernEditorUpdated,
  null,
-  createFilesMetaCreator
+  updateFileMetaCreator


common/app/routes/Challenges/utils/frame.js

@@ -101,6 +101,7 @@ const writeTestDepsToDocument = frameReady => ctx => {
  // default for classic challenges
  // should not be used for modern
  tests.__source = sources['index'] || '';
+  tests.__originalCode = sources['originalCode'] || '';


BerkeleyTrue · 2017-12-15T22:15:05Z

This is continued in PR #16200

BerkeleyTrue added the status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. label Dec 2, 2017

no-stack-dub-sack added the status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer. label Dec 2, 2017

BerkeleyTrue added status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer. and removed status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer. labels Dec 3, 2017

bonham000 and others added 10 commits December 6, 2017 22:13

feat: crudely enables test to run solution code against React challen…

2dbdaad

…ge (and passes!)

feat: Updates comment

f772bc2

feat: Adds React 2 and 3, validates challenges in app

e9c456b

feat: Adds React 4, validates tests

5c3fda6

feat: Adds Peter's migrated challenge seed files for all challenges

856cef9

feat: Adds redux, react-redux imports, adds tests for React 7,

660113f

feat: Adds tests for React 08

2810d03

fix(challenges): wrap reserved words in <code> and add tests

3966082

feat: complete first two tests for React 9

389406a

feat: modifies tests in React 09

cb85379

bonham000 force-pushed the feature/react-redux-migration branch from 4eabb78 to cb85379 Compare December 7, 2017 06:13

feat: Adds working tests for React 37, including async setState tests

6887800

feat: Escape hatch to avoid async tests in automated test suite

a440bc1

feat: Final migration and QA of Redux, except for Redux 9

e45ca7f

feat: migrates React 36 and QAs

ca281b0

feat: Rewrites Redux 09 and migrates

9528010

feat: refactors pull request and cleans up code

17dbef8

style(challenges): QA React challenges

2852a83

style(challenges): QA react challenges

b165cbb

fix(challenges): fix react 41 and 45 tests

e7de59c

style(challenges): QA redux challenges

d97c1d6

style(challenges): QA react and redux challenges

2489a8e

bonham000 changed the title ~~WIP: Migrate React-Redux Curriculum into FCC Codebase~~ Migrate React-Redux Curriculum into FCC Codebase Dec 15, 2017

BerkeleyTrue suggested changes Dec 15, 2017

View reviewed changes

BerkeleyTrue mentioned this pull request Dec 15, 2017

Feat: react redux migration #16200

Merged

BerkeleyTrue closed this Dec 15, 2017

BerkeleyTrue removed status: blocked Is waiting on followup from either the Opening Poster of the issue or PR, or a maintainer. status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. labels Dec 15, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate React-Redux Curriculum into FCC Codebase #16138

Migrate React-Redux Curriculum into FCC Codebase #16138

bonham000 commented Dec 2, 2017 •

edited

camperbot commented Dec 2, 2017

camperbot commented Dec 3, 2017

camperbot commented Dec 4, 2017

camperbot commented Dec 4, 2017

camperbot commented Dec 5, 2017

camperbot commented Dec 5, 2017

camperbot commented Dec 6, 2017

camperbot commented Dec 6, 2017

camperbot commented Dec 6, 2017

camperbot commented Dec 7, 2017

Ethan-Arrowood commented Dec 8, 2017

bonham000 commented Dec 8, 2017

camperbot commented Dec 9, 2017

Ethan-Arrowood commented Dec 14, 2017 •

edited

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

bonham000 commented Dec 14, 2017 •

edited

Ethan-Arrowood commented Dec 14, 2017

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

Ethan-Arrowood commented Dec 14, 2017

camperbot commented Dec 15, 2017

camperbot commented Dec 15, 2017

Ethan-Arrowood commented Dec 15, 2017

camperbot commented Dec 15, 2017

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

BerkeleyTrue commented Dec 15, 2017

Migrate React-Redux Curriculum into FCC Codebase #16138

Migrate React-Redux Curriculum into FCC Codebase #16138

Conversation

bonham000 commented Dec 2, 2017 • edited

Key:

React Challenges:

Redux Challenges:

React-Redux Challenges:

Notes

Type of Change

Description

Checklist

Motivational Images

camperbot commented Dec 2, 2017

camperbot commented Dec 3, 2017

camperbot commented Dec 4, 2017

camperbot commented Dec 4, 2017

camperbot commented Dec 5, 2017

camperbot commented Dec 5, 2017

camperbot commented Dec 6, 2017

camperbot commented Dec 6, 2017

camperbot commented Dec 6, 2017

camperbot commented Dec 7, 2017

Ethan-Arrowood commented Dec 8, 2017

bonham000 commented Dec 8, 2017

camperbot commented Dec 9, 2017

Ethan-Arrowood commented Dec 14, 2017 • edited

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

bonham000 commented Dec 14, 2017 • edited

Ethan-Arrowood commented Dec 14, 2017

camperbot commented Dec 14, 2017

camperbot commented Dec 14, 2017

Ethan-Arrowood commented Dec 14, 2017

camperbot commented Dec 15, 2017

camperbot commented Dec 15, 2017

Ethan-Arrowood commented Dec 15, 2017

camperbot commented Dec 15, 2017

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

BerkeleyTrue commented Dec 15, 2017

bonham000 commented Dec 2, 2017 •

edited

Ethan-Arrowood commented Dec 14, 2017 •

edited

bonham000 commented Dec 14, 2017 •

edited