reacttraining / classic-react-workshop Goto Github PK

Currently, the tests for 02-Components and 03-Props-vs-State are failing in React 16. I believe it's a regression in React 16, so I filed an issue in facebook/react#12772

Tracking here so we can follow up when it's resolved.

So we can use React.Fragment with empty tags. See https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax

In the section for Arrow Functions, it reads:

// which can be shorter with explicit expression return
const add = (x, y) => x + y;

// if we want multiline, we can create an expression with ()
const add = (x, y) => x + y;

These seem the same, but I think the second example is supposed to be different.

In the Readme file it says 'git clone https://github.com/ReactTraining/react-workshop.git'. This seems to load files required for the other course (i.e. React Workshops).

For this course (Classic React Workshop) I think installation guideline should use 'https://github.com/ReactTraining/classic-react-workshop.git' path. In other words, to add word 'classic' in cloning the repo guideline

On running npm install i get this error.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! path /media/programmersedge/New_Volume/devs/react-workshop/node_modules/supervisor/lib/cli-wrapper.js
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/media/programmersedge/New_Volume/devs/react-workshop/node_modules/supervisor/lib/cli-wrapper.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/programmersedge/.npm/_logs/2018-03-19T12_53_37_108Z-debug.log

Failed to compile.

./subjects/17-Chat-App/utils.js
Module not found: Error: Can't resolve 'firebase/app' in 'C:\Users\Admin\Downloads\classic-react-workshop\subjects\17-Chat-App'

webpack-dev-server runs fine but when i run node scripts/build.js i get following error:

return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);

Error: ENOENT: no such file or directory, open '/Users/apple/Work/react-subjects/subjects/ReduxDataFlow/lecture.html'

ReduxDataFlow doesn't exist in subjects dir.

Why u did remove Calculator exercise?

Isn't passing value enough?

Here:
https://github.com/ReactTraining/react-workshop/blob/13748e43467581c2933dbd878f1cc1aef6a08263/subjects/07-Compound-Components/solution.js#L62-L66

Can do this instead:

  select(value) {
    this.setState({ value }, () => {
      this.props.onChange(value); // no need to do this.state.value
    });
  }

Also having eslint installed would have flagged that value as an unused param.

What are your thoughts on including middleware in the Redux.gif?

The use of middleware is a compelling reason to use Redux. In my experience Redux is often chosen as default with no compelling reason.

https://github.com/ReactTraining/react-workshop/blob/master/slides/Redux.gif

See https://github.com/smooth-code/error-overlay-webpack-plugin

Hey @mjackson @ryanflorence 👋

While completing your Tabs example in the Advanced React course, I ported it to the new Context api: https://codesandbox.io/s/01p15lx5rn

But this mapping over children is still bothering me.

<TabsContext.Consumer>
      {({ activeIndex, onActivate }) => {
        const children = React.Children.map(
            this.props.children,
            (child, index) =>
              React.cloneElement(child, {
                isActive: index === activeIndex,
                onClick: () => onActivate(index)
              })
          );
        return <div style={styles.tabList}>{children}</div>;
     }}
 </TabsContext.Consumer>

Mapping over children to pass them props might end up breaking the ui and the api contract for children if someone inserts a div in between. How do I pass onClick and isActive flag to children without mapping over children?

I there any way to avoid it? 🙁

https://reacttraining.com/ is not rendering any content.

npm ERR! code 1
npm ERR! path C:\Users\Admin\Downloads\classic-react-workshop\node_modules\grpc
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ./node_modules/.bin/node-pre-gyp install --fallback-to-build --library=static_library
npm ERR! '.' n'est pas reconnu en tant que commande interne
npm ERR! ou externe, un programme ex�cutable ou un fichier de commandes.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Local\npm-cache_logs\2021-08-12T11_49_24_573Z-debug.log

Was looking through the workshop resources and was curious about the possibility of introducing components as just functions. May be a useful path into introducing the idea of composition and showing how much you are able to accomplish with this model without having to use classes for managing state.