/learn-redux-wesbos-cra

Use Create-React-App for the course: Learn Redux by Wes Bos

Primary LanguageJavaScript

Use Create-React-App for the course: Learn Redux by Wes Bos

I always enjoy from Wes's courses and therefore I wanted to do his Redux course.

This is my attempt to do the course with Create React App and with updated dependencies.

The Original Source:

The updated dependencies:

  "react-scripts": "3.0.1",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "redux": "^4.0.1",
  "react-redux": "^7.1.0",

New dependencies that replaced some of the deprecated ones:

  "react-router-dom": "^5.0.1",
  "history": "^4.9.0",
  "connected-react-router": "^6.5.0",
  "react-transition-group": "^4.2.1",

The reduxstagram.js was split between src/index.js (for the hot reloading configuration) and to src/Reduxstagram.js (most of the reduxstagram.js original code).

Changes:

  1. I used the styles package.json scripts configuration from Wes React-For-Beginners course package.json.

  2. In the components I used arrow functions instead of binding.

  3. The src/Main.js component now only displays the app title.

  4. The hot reloading is from this article: "Hot reloading with create-react-app without ejecting" by Brian Han.

  5. src/store.js:

    1. Use Connected React Router instead of react-router-redux which is deprecated and not working with React Router v4+.
    2. I used this basic code example.

  6. Connect the store state and dispatch functions to the components:

    I couldn't think of a way to make one file with the redux connect code such as in the original code (the App component). Mainly because I don't use the {React.cloneElement(this.props.children, this.props)}. From my understanding, I couldn't use it because React Router v4+ doesn't work with children components and therefore I couldn't pass the store props as in the original code.

    In the end, I create one file to handle the redux connect: src/utils/reactReduxConnect.js, such as App in the original code, however, I still need to use it in any of the components that need to use the store.

  7. Use react-transition-group instead of React-addons-css-transition-group as in Wes React-For-Beginners course.

  8. In the src/components/Comments component, in order to get the input values, I replaced the all refs (excluding the one for the form) to state and onChange function.

  9. For Redux devtools extension I used the updated advanced store setup.

  10. I left the Sentry configuration (src/data/config.js and src/Reduxstagram.js) as is because I didn't want to change it from the original source/video, however, the API had been updated since then, for more information about it: "Switching to Sentry-Javascript".

Things that missing:

  1. Not having the exact file/structure.
  2. One file src/reduxstagram.js (can't renamed src/index.js without eject, and also I needed two files for the hot reloading).
  3. Don't have one file with the redux connect code such as in the original code (the App component).
  4. Probably more things that I missed.