btholt/complete-intro-to-react

A Complete Intro to React, as Given for Frontend Masters

complete-intro-to-react's Issues

Everything works fine locally, but deploying to real NodeJS server didn't work out

As I've already told, App is working absolutely as expected on my local machine without any errors.
I've registered an account on IBM Bluemix for a trial. Then I pushed an app to the server and then It looks like it doesn't understand es6 in js/App.js.

Missing 'npm install'

Prior to the /My First Component/ section the document doesn't suggest npm install. It's probably a given for those with npm experience but might be worth mentioning for those who are not.

Prettier needs to be at least version 1.7.0 for Atom

Inside of the package.json prettier needs to be at least version 1.7.0 in order for the Atom prettier package to function properly.

extra parens in webpack section

https://btholt.github.io/complete-intro-to-react/

improve text in `More React` section

https://btholt.github.io/complete-intro-to-react/

perhaps something like this? it looks like the line marked is missing a few words

actionCreators.spec.js should call done.fail() on failure

On branch v3-26, test actionCreators.spec.js. you have this test:

test('getAPIDetails', (done: Function) => {
  const dispatchMock = jest.fn();
  moxios.withMock(() => {
    getAPIDetails(strangerThings.imdbID)(dispatchMock);
    moxios.wait(() => {
      const request = moxios.requests.mostRecent();
      request
        .respondWith({
          status: 200,
          response: strangerThings
        })
        .then(() => {
          expect(request.url).toEqual(`http://localhost:3000/${strangerThings.imdbID}`);
          expect(dispatchMock).toBeCalledWith(addAPIData(strangerThings));
          done();
        });
    });
  });
});

The problem is that if one of the expect fails, then the error the test reports is a timeout because you didn't call done().

I found that the done function has a subfunction called fail that you can call to report a failure. So, you need to do done.fail(error) when an error occurs.

Since you are in a then of a promise, adding a .catch(done.fail) should do it.

In other words, your test should be:

test('getAPIDetails', (done: Function) => {
  const dispatchMock = jest.fn();
  moxios.withMock(() => {
    getAPIDetails(strangerThings.imdbID)(dispatchMock);
    moxios.wait(() => {
      const request = moxios.requests.mostRecent();
      request
        .respondWith({
          status: 200,
          response: strangerThings
        })
        .then(() => {
          expect(request.url).toEqual(`http://localhost:3000/${strangerThings.imdbID}`);
          expect(dispatchMock).toBeCalledWith(addAPIData(strangerThings));
          done();
        }).catch(done.fail);  // Fail fast and with nice error in case of expectation failures.
    });
  });
});

v3: link is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

When adding the showcard link I am receiving the following error:
ink is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

I have researched this and the best answer that I can find is that self closing tags do not support inner html.

I am not sure how to move forward.

Cannot find module 'eslint-config-prettier/react'

When using $ eslint **/*.{js,jsx} --quiet I get the following error:

and here is my .eslintrc.json
`{
"extends":[
"airbnb",
"prettier",
"prettier/react"
],
"plugins":[
"prettier"
],
"parserOptions":{
"ecmaVersion":2016,
"sourceType":"module",
"ecmaFeatures": {
"jsx":true
}
},
"env":{
"es6":true,
"browser":true,
"node":true
}
}

Any ideas what I am doing wrong?

Module not found: Can't resolve 'react/lib/ReactDom'

I'm at "Building with Webpack" around 5:09. Attempting to do the first webpack build and am getting this error. I've scoured the issues in the fb/react repo and searched for solutions but haven't found any yet. I've uninstalled and re-installed react and react-dom as well.

Ideas?

No webserver to run the app : Introducing webpack-dev-server

Hi @btholt

There is nowhere in the tutorial an explanation on how to run the app.

So by default I suppose that most people will open index.html in the browser (file system), which works till external resources must be loaded (when starting to load the shows pics in the "browse all" pages which use absolute URLs, which does not work).

My suggestion is to introduce webpack-dev-server just before the React Router section, so once people got familiar with running webpack and start using its "watch" ability.

The addition only asked for a minimal replacement of "webpack" with "webpack-dev-server" in package.json and offers at that moment 1) a UI to the "watch" ability just introduced 2) A basic express server to serve the app, needed for the next section to correctly load shows pics.

No code must be changed, hence the relevancy of introducing/using it to me at that moment.

If you're ok with that I'll send a PR!

[SSR] renderToString returns <!-- react-empty: 1 -->

After I cloned repo, follow instructions and run, it return this error and renderToStrings returns empty string.

(node:57560) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: require.ensure is not a function

fsevents needs to be upgraded

fsevents 1.1.1 is no longer on the registry. I also couldn't get 1.1.2 to work, but I finally solved the build errors by removing my lock file and changing fsevents to 1.1.3 in package.json.

Error log below

yarn install v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
[1/2] ⠐ fsevents: https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v59-darwin-x64.tar.gz
[2/2] ⠐ fsevents: https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v59-darwin-x64.tar.gz
[-/2] ⠐ waiting...
[-/2] ⠐ waiting...
**warning** Error running install script for optional dependency: "path/to/repo/react/node_modules/chokidar/node_modules/fsevents: Command failed.\nExit code: 1\nCommand: node install\nArguments: \n
Directory: path/to/repo/react/node_modules/chokidar/node_modules/fsevents\nOutput:\nnode-pre-gyp info it worked if it ends with ok\nnode-pre-gyp info using [email protected]\nnode-pre-gyp info using [email protected] | darwin | x64\nnode-pre-gyp info check checked for \"path/to/repo/react/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node\" (not found)\nnode-pre-gyp 
http GET https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v59-darwin-x64.tar.gz\nnode-pre-gyp http 404 https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v59-darwin-x64.tar.gz\nnode-pre-gyp 
ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v59-darwin-x64.tar.gz \nnode-pre-gyp 
ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v59 ABI) (falling back to source compile with node-gyp) \nnode-pre-gyp http 404 status code downloading tarball https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.1/fse-v1.1.1-node-v59-darwin-x64.tar.gz \nnode-pre-gyp ERR! build error\nnode-pre-gyp
ERR! stack Error: Failed to execute 'node-gyp clean' (Error: spawn node-gyp ENOENT)\nnode-pre-gyp ERR! stack     at ChildProcess.<anonymous> (path/to/repo/react/node_modules/chokidar/node_modules/node-pre-gyp/lib/util/compile.js:77:29)\nnode-pre-gyp ERR! stack     at ChildProcess.emit (events.js:160:13)\nnode-pre-gyp 
ERR! stack     at Process.ChildProcess._handle.onexit(internal/child_process.js:207:12)\nnode-pre-gyp ERR! stack     at onErrorNT (internal/child_process.js:389:16)\nnode-pre-gyp ERR! stack     at process._tickCallback (internal/process/next_tick.js:152:19)\nnode-pre-gyp ERR! System Darwin 17.4.0\nnode-pre-gyp 
ERR! command\"/usr/local/Cellar/node/9.5.0/bin/node\" \"path/to/repo/react/node_modules/chokidar/node_modules/fsevents/node_modu
**success** Saved lockfile.

Warning "Unexpected unnamed function func-names" under '*new' ESLint rule

my eslint version is 4.4.1, it would give a warning like this:

when defining functions in such a way:
const funct = function () { .... }

http://eslint.org/docs/rules/func-names

Replace `MyTitle` to `MyTitleFact` in Factories section in docs

In Factories section, you should say to replace MyTitle to MyTitleFact in docs.

SSR on v2-25 not working.

Having an issue with SSR on v2-25. It worked on v2-23 when you did a view source, but not v2-25. Thoughts?

CSS not loading on master among other issues

The tutorials start repo has a lot of stuff already predefined so following the video tutorial was not helpful. I had to undo a lot of predefined things in the repo so I could try and follow along with the tutorial. I then tried to just follow the text tutorial which also had a lot of errors I could not get past without hours of debugging. I eventually gave up and decided to just examine the master branch since I only needed a refresher on react/redux. Sadly, even the master branch not loading because the css files cannot be found...

The tutorial is working and easy to follow up until the tooling portion then it more or less falls apart. I could not even get babel to work so es6 syntax was not even available. Wasted a lot of time here and I understand Brian must be really busy and unable to correct this but Frontend Masters should really remove this tutorial until these issues are resolved.

Recommend providing a start repo that has nothing but the required modules

React: State `since`

since

Awesome tutorial, thanks!

Wanted to thank you for this amazing write up and intro to react/redux, one of the best tutorials i had to search the net for to learn react, well done 👍

I have one question please, i'm pretty much using all you've taught in this tutorial and now have got a react/redux universal app running, but i just wanted to ask you, how did you deal with the absolute url's issue that occurs all the time when rendering on server?

update notes - `import { getAPIDetails } from './actionCreators';`

https://btholt.github.io/complete-intro-to-react/

Mocha test fail

@fluent-7
npm run test fails 😢
TypeError: Cannot read property 'shows' of undefined

List of Issues/Errors and fixes for Windows users (and possibly others)

I'm currently using Windows (ugh) which is a complete nightmare but, considering there are bound to be other folks using it, here's my experience with a fresh clone of master as well as some notes and references. I'll keep this post up to date with additional fixes and issues as they roll in.

Current status: es2015 preset must be installed and added to .babelrc to prevent SyntaxError: Unexpected token import and build.

Environment:

• Windows 10
• Node v6.10.3
• Tested with Git Bash (MingW) and CMD
• Make sure your gitconfig is set to check out with the correct line endings git config --global core.autocrlf input

Steps to Reproduce:

git clone [email protected]:btholt/complete-intro-to-react.git
cd complete-intro-to-react
yarn install
yarn dev

• Error
  NODE_ENV not recognized
  Fix
  update dev script in to package.json to:
  "dev": "SET NODE_ENV=development && nodemon server.js",

yarn dev

• Error
  SyntaxError: Unexpected token import
  It seems like webpack isn't honoring the "dev" prefix
  Fix
  To get this working in Windows, I had to add the babel es2015 preset:
  yarn add babel-preset-es2015 --dev
  and add the preset to my .babelrc:

  "presets": [
    "react",
    "es2015",
    ["env", {
    ...
  

yarn dev

At this point the app builds and works correctly. A coworker was able to get this to build without the need to add that preset; I don't understand yet how that's possible. Without that preset, is it supposed to be using the "env" preset that loads the "transform-es2015-modules-commonjs" plugin? If that's the case, why wouldn't babel honor that configuration on my machine?

There's still an error here but it doesn't prevent the app from working.

• Error
  In console: TypeError: require.ensure is not a function

  Fix
  None Yet :D (See #65)

Currently, I'm unable to complete a dev build in Windows from a fresh clone of master. Interested to hear whether any Windows users have gotten this to work.

Parsing error - eslint won't allow es6 stuff

Great tutorial so far, but I have run into a snag. I'm on "Standard.js with React", and I just added the eslintrc.json file and added the preLoader to webpack.config.js. When I run "npm run watch" now, I get:
/Users/dougriblet/Documents/React-intro/complete-intro-to-react/js/ClientApp.jsx 1:1 error Parsing error: The keyword 'const' is reserved
I tried changing all 'const' to 'var', but then I got a parsing error on the arrow function. I tried adding
"env": { "es6": true },
to eslintrc.json, but that did not help. I'm stumped.

How to deploy this project?

Just completed V3. Absolutely great course. However there is one aspect that is not clear to me.

I'm very confused about how should I put this project online.

The build that we get in public folder (as Brian taught in the course - Building for Production) doesn't have any index.html , so I'm a little confused (And if I manually copy the index.html from root to public - it doesn't work).
Generally in create-react-app projects on doing build we get a public/dist folder that can be uploaded to hosting services.
Also in this project after applying server-side rendering we have a server.js too, do we need to host the server and client seperately?
How should I proceed if want this project online?

"My Second Component": `this.props` throwing error, should strip `this`

Hello, thanks for awesome tutorial!

I've encountered error while walking through the "My Second Component" code example:

Current versions:

• react: 15.0.1,
• react-dom: 15.0.1

Introduce data fetching

One area of universal apps that still isn't clear to me is data fetching that can be handled by both client and server.

Your'e using static json in this project. As a feature request, would it be possible to serve the json from an api endpoint and then include both client and server data fetching?

getComponent param is not error, but __webpack.require__()

On a fresh clone and running off the master branch I get the following error on each route. It causes the Search to not render when navigated to.

eslint errors - no-extraneous-dependencies

I am quickly working through Complete Intro to React, v3 (feat. Redux, Router & Flow) and enjoying it, learning a lot, etc.
However, I am getting a consistent eslint error on branch v3-2. Actually two errors….

1:1 error 'react' should be listed in the project's dependencies. Run 'npm i -S react' to add it import/no-extraneous-dependencies

2:1 error 'react-dom' should be listed in the project's dependencies. Run 'npm i -S react-dom' to add it import/no-extraneous-dependencies

I have found I can work around it using a "disable-line" comment such as...

import React from 'react'; // eslint-disable-line import/no-extraneous-dependencies

Is there something else I am missing here that is causing this? Both react and react-dom are in package.json properly.

Getting error in console

(

node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: require.ensure is not a function
/search
(node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: require.ensure is not a function
/
(node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): TypeError: require.ensure is not a function
/search
(node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): TypeError: require.ensure is not a function
/
(node:73353) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 6): TypeError: require.ensure is not a function
/

Git branches and videos - how do they correspond?

When you start watching a certain video on Frontendmasters, how do you know which git branch to start from? I figured maybe a table of contents of branches and how they correspond to videos would be useful, or did I miss something?

Thanks for a great course!

update store.js code listing in Redux section of notes

notes to update

the code listing should be:

the code listing is currently:

[HMR] The following modules couldn't be hot updated: (Full reload needed)

The first update to a file is hot reloaded, but any subsequent updates trigger this console message and HMR no longer works.
[HMR] The following modules couldn't be hot updated: (Full reload needed). This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves.

start branch

When it gets to the webpack section of the course I ran into some problems. I couldn't see the bundle.js output. After some digging I found that you have public/bundle.js hidden through .gitignore. Maybe this is explained later on in the course why you hide it but it definitely gave me some problems.

v2-23 - Uncaught Error: Cannot find module ".App"

When running v2-23 I get the following error in the browser : Uncaught Error: Cannot find module ".App"
Any idea what could cause this?

No index.html file in Start Branch

I just started the frontend masters course and right off the bat, you direct us to open index.html in the 'start' branch. But in that particular branch... that file doesn't exist. Just letting ya know~

Argument List Too Long error - maybe cl eslint not respecting ignore

Trying to follow along with the ESLint video from FEM, but running into a few issues, but here is one.

The following command line does not work.

./node_modules/.bin/eslint **/*.{js,jsx} --quiet

Neither does this:

./node_modules/.bin/eslint **/*.js --quiet

They both return 'zsh: argument list too long: ./node_modules/.bin/eslint'

The following does:

./node_modules/.bin/eslint */*.jsx --quiet

So does this:

./node_modules/.bin/eslint **/*.jsx --quiet

I can only assume that this is because of the number of js files in the node_modules folder? But, eslint is supposed to ignore the node_modules folder by default. I try to run this using the --ignore-pattern flag, but doesn't seem to matter.

I noticed a few glob sort of issues on the eslint repo and symlinks, but a bit over my head at the moment? eslint/eslint#4606

Is anybody else having this problem and is there a workaround?

For the time being, I am just going to use ./node_modules/.bin/eslint **/*.jsx --quiet and roll with it.

v3 class might be easier to follow if Flow were introduced after completing the react app.

Sorry I couldn't find other way to give feedback (is there some other place on the Front End Masters or the feedback can be given here?)

Once flow was added to the class, for me it became more difficult to learn react itself.
Perhaps it would be better to complete all the coding parts and then add the flow, in order to untangle the learning tasks.

I liked the way flow annotations were added after applying redux later in the course.

I'll add one more feedback on the FM class - at some point in the videos you've stopped mentioning which git branch to check out and it became harder to keep the code in sync with the video lectures.

Thank you!

Missing Curly Brace in html script tag within guide.

Following along the written tutorial ( active FrontEndMasters subscriber here. )
I have found a VERY MINOR ISSUE in the guide. Just thought I would help out for anyone still learning. The code displayed on the guide seems to be missing a curly brace.

        var MyFirstComponent = React.createClass({
          render: function () {
            return (
              div(null,
                h1(null, 'This is my first component!')
              )
            )
          }
       }) // <-- Was Missing From Here

        ReactDOM.render(React.createElement(MyFirstComponent), document.getElementById('app'))

Just in case it helps solve any confusion.

So far, this course has been amazing! Thanks!

Suggestion: add comment about System.import must be a string

In the course, you stressed the webpack splitting won't work until you pass a literal string to System.import()

Doesnt work for React 16+

complete-intro-to-react/package.json

Line 16 in 03296d5

"jest-serializer-enzyme"

If you are going to use React 16,
Replace jest-serializer-enzyme to enzyme-to-json/serializer and include enzyme-to-json as a dev dependency.

For enzyme to work with React 16, you need to yarn add enzyme-adapter-react-16 -D

And then, inside your tests,

import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
beforeAll(() => {
    configure({
        adapter: new Adapter()
    });
});
// your tests here..

Refactor to select shows based on imdbID

Right now the materials use index which doesn't jive with search. Shows must be selected by imdbID.

How to share a state of Landing component into App so that I can distinguish a searchTerm into Search component?

Hi,
Can anyone tell me how can I share a state of the Landing component into the App so that I can distinguish a searchTerm in the Search component? Basically, I'd like to make the Landing component working.

This is sth that Brian talks about in the React Wrapper in the chapter 'Data in React' (FEM course).
https://frontendmasters.com/courses/react/wrapper-and-q-a/

I've been trying to refactor Landing.jsx. Now it looks like this:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Landing extends Component {
  state = {
    beforeSearchTerm: ''
  };

  handleSearchTermChange = (event: SyntheticKeyboardEvent & { target: HTMLInputElement }) => {
    this.setState({ beforeSearchTerm: event.target.value });
  };

  render() {
    return (
      <div className="landing">
        <h1>svideo</h1>
        <input
          type="text"
          placeholder="Search"
          onChange={this.handleSearchTermChange}
          value={this.state.beforeSearchTerm}
        />
        <Link to="/search"> Search</Link>
        <Link to="/search">or Browse All</Link>
      </div>
    );
  }
}

export default Landing;

Now I want this beforeSearchTerm state send into Search component so I can distinguish searchTerm, maybe sth like this-> if I pass sth in Landing component (beforeSearchTerm) then let Search state be beforeSearchTerm, if I don't pass any value then let Search state be empty string:

class Search extends Component {
  state = {
    searchTerm: beforeSearchTerm ? {`${beforeSearchTerm}`} : ''
  };

ERROR when importing data.json

Trying to follow along with the Loading JSON Data video but i kept getting this error :

ERROR in ./data.json
Module build failed: SyntaxError: Unexpected token, expected ;

at first i thought that it was an eslint issue but it seems that it happens on the build step, i tried adding a json-loader to webpack but i get the same error, this is a caption of the error i get in the terminal

Any suggestions?

React Router route properties

Now that this is on FEM's site, some individuals are most likely going to hit an issue with passing props via a route component, up until you switch to Redux:

https://github.com/btholt/complete-intro-to-react/blob/fem-final/js/Search.jsx#L17

You will want to access them via this.props.route.shows as this.props.shows will give an undefined and filter will fail.

Errors on Windows

I get a like 3000+ errors when ESlint runs, lint -- --fix reduces it to like 84 errors

Running Windows 10, my other react apps work just fine.

A small portion of the result of running webpack afterwards

 @ ./js/Search.jsx 16:16-37
 @ ./js/App.jsx
 @ ./js/ClientApp.jsx
 @ multi ./js/ClientApp.jsx ./js/ClientApp.js ./public/bundle.js

ERROR in ./js/Header.jsx

C:\Users\alexw\Source\complete-intro-to-react\js\Header.jsx
  8:22  error  Parsing error: Unexpected token :

✖ 1 problem (1 error, 0 warnings)

 @ ./js/Search.jsx 20:14-33
 @ ./js/App.jsx
 @ ./js/ClientApp.jsx
 @ multi ./js/ClientApp.jsx ./js/ClientApp.js ./public/bundle.js

ERROR in ./js/reducers.js

C:\Users\alexw\Source\complete-intro-to-react\js\reducers.js
  6:39  error  Parsing error: Unexpected token :

✖ 1 problem (1 error, 0 warnings)

 @ ./js/store.js 17:16-37
 @ ./js/App.jsx
 @ ./js/ClientApp.jsx
 @ multi ./js/ClientApp.jsx ./js/ClientApp.js ./public/bundle.js

C:\Users\alexw\Source\complete-intro-to-react>

React: State `now reflects`

NPM packages not found

Hi Brian,
I'm excited to take the course, but I'm getting a couple errors that NPM packages aren't found anymore. Specifically infinity-agent and timed-out. It looks like the original author removed the packages. I'm not sure what depends on them.

I forked and pushed up the repo that was there to npm for infinity-agent, but I couldn't do the same with the timed-out package.

Any suggestions?

React.createClass

React.createClass is no longer a thing. I'm having trouble getting this to work.

error `Component` is not defined no-undef

trying to understand where is it coming from

probably has to do with eslint : tried to do /* global Component */ on the js page concerned which compiled but ended up with Component not defined on th page anyways.

using Windows 10 if that helps

didn't change anything from the config files besides what is stated on the course

Suggest location (root) and filename (index.html) for My First Component

It might be nice to suggest a location (the project root) and/or a filename (index.html) for the code in /My First Component/. The index.html filename is mentioned in the next section but not prior.

Cannot read property 'render' of undefined

About 1 in 100 students are not able to load react-dom off their local file system.

If you are seeing "React is not rendered" in your index.html file with getting the "Cannot read property 'render' of undefined" error, that means the react-dom script is not loading from your npm_modules directory.

The patch for this fix if it's happening to you, is to load the file off the network vs locally through unpkg:

<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>