is throwing error
seems to fix the problem.
Opened a pull request about it.

Thank you.

#20 In PromptContainer.js, the handleSubmitUser function, the current username is cached yet never used.
The state's username is reset, so in the query's playerTwo field, the cached username should be used instead of the state's one.
This still works since setState is asynchronous and by pure luck, it hasn't got reset yet when we use this.state.username.

The correct code should be:

handleSubmitUser  : function(e){
    e.preventDefault();
    var username  = this.state.username;
    this.setState({
      username: ""
    })
    if(this.props.routeParams.playerOne){
      this.context.router.push({
        pathname: "/battle",
        query:{
          playerOne: this.props.routeParams.playerOne,
          playerTwo: username //the correction
        }
      })
    }
    else {
      this.context.router.push('/playerTwo/'+ this.state.username)
    }
  }

Hi,

On Video 12, to add a key, can we just use a wrapper div instead of cloning the element?

Like this:

<ReactCSSTransitionGroup
  transitionName="appear"
  transitionEnterTimeout={5000}
  transitionLeaveTimeout={5000}>
  <div key={this.props.location.pathname}>
    {this.props.children}
  </div>
</ReactCSSTransitionGroup>

instead of this:

<ReactCSSTransitionGroup
  transitionName="appear"
  transitionEnterTimeout={5000}
  transitionLeaveTimeout={5000}>
    {React.cloneElement(this.props.children, {key: this.props.location.pathname})}
</ReactCSSTransitionGroup>

Thanks!

Bootstrap columns must always be nested under .rows, and should not be nested under other columns. The examples incorrectly nest columns inside other columns without containing rows. Further, all .rows must have a .container as a direct parent: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Examples

<!-- bad -->
<div className='col-sm-8 col-sm-offset-2'>
  <div className='col-sm-6'>
    Player 1 Info
  </div>
</div>

<!-- good -->
<div className="container">
  <div className="row">
    <div className="col-xs-12 col-sm-8 col-sm-offset-2">
      <div className="row">
        <div className="col-xs-12 col-sm-6">
          Player 1 Info
        </div>
      </div>
    </div>
  </div>
</div>

<!-- bad -->
<div className='jumbotron col-sm-12 text-center' style={transparentBg}>
  <h1>Github Battle</h1>
  <p className="lead">What even is a jQuery?</p>
  <Link to='/playerOne'>
    <button type="button" className="btn btn-lg btn-success">
      Get Started
    </button>
  </Link>
</div>

<!-- good -->
<div className='jumbotron' style={transparentBg}>
  <div className="container">
    <div className="row">
      <div className="col-xs-12 text-center">
        <h1>Github Battle</h1>
        <p className="lead">What even is a jQuery?</p>
        <Link to='/playerOne'>
          <button type="button" className="btn btn-lg btn-success">
            Get Started
          </button>
        </Link>
      </div>
    </div>
  </div>
</div>

Hi Tyler,

I copied the code directly from here, ran 'npm install' and 'npm run start', the console shows all green, webpack-dev-server starting etc, all as per your video. But http://localhost:8080/ returns

The localhost page isn’t working

localhost didn’t send any data.
ERR_EMPTY_RESPONSE

Can you please help?

Thanks!
Chetan

http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/806165

Teropa Parviainen should be Tero Parviainen. Tero is his firstname and teropa is his sitename and twitter name. ;)

Section: this.props.children and getting started with React Router

I'm getting the subject error when trying to view the page. Looking at the index_bundle file and I see this:

 var history = this.props.history;
        var _props = this.props,
            routes = _props.routes,
            children = _props.children;

!history.getCurrentLocation ? process.env.NODE_ENV !== 'production' ? (0, _invariant2.default)(false, 'You have provided a history object created with history v2.x or ' + 'earlier. This version of React Router is only compatible with v3 ' + 'history objects. Please upgrade to history v3.x.') : (0, _invariant2.default)(false) : void 0;

I checked and had History 4.3.0. Even tried 3.2.1 and am still getting the error.
Any thoughts?

Not sure why, but I noticed that when the transition animation runs, it shows a duplicate element until the animation completes.

I'm not sure if this is an issue with the library, but I tried downgrading the version, and found this suggestion on Stack Overflow. Unfortunately, it doesn't appear to fix the problem.

but by running "npm run production", the index.html under dist/ does get updated
using "react": "^15.3.2",
"react-dom": "^15.3.2" as "dependencies" in package.json and other newest "devDependencies"

produdction = production

When opening the index.html in chrome after running npm run create, I get the following error in my terminal:

ERROR in ./app/index.css

You may need an appropriate loader to handle this file type.
| body {
| background: green;
| }
@ ./app/index.js 13:0-22
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.js

I installed the webpack-dev-server after this error and got rid of the require statement that required the index.css file in index.js. The app runs perfectly now and any change I make in index.js is reflected in the browser. Is there a way to solve this problem? Thanks in advance!

UPDATE::

As soon as I added in line styling to the body tag, the change was successfully reflected in the browser. In line styling works, but I still cant figure out why. Any help/explanation would be incredibly helpful! Thanks!!

`MacBook-Pro ~/g/react-fundamentals-hosting>
npm run firebase init
npm ERR! missing script: firebase

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2017-06-17T22_21_34_891Z-debug.log`

not happening like the video

near end of first video and I run npm run create. I get

ERROR in ./app/index.js
Module not found: Error: Can't resolve 'react' in 'C:\reactJS\github-battle\app'
@ ./app/index.js 11:12-28

ERROR in ./app/index.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\reactJS\github-battle\app'
@ ./app/index.js 12:15-35

On Setting up your first React component with NPM, Babel, and Webpack video, in webpack.config.js you said that we need to use loaders instead of loader. If we use latests webpack version, it will thrown an error like this if we use loaders

.../github-battle/node_modules/webpack-core/lib/LoadersList.js:81
r.forEach(function(r) {
          ^

TypeError: r.forEach is not a function
....

Mixed content requests are now blocked, the weather api is queried over http and the request gets blocked so the GH pages example app doesn't work.

I checkout this brunch and /playerOne route seems not to working.
I have this error:

index_bundle.js:20302 Warning: [react-router] Location "//playerOne" did not match any routes

Hey, just letting you know that requesting from https://api.github.com/users/[username]/repos&per_page=100 as it is in the axios branch and video doesn't work (for me and now at least), it needs "?per_page" and not "&per_page" directly. (https://developer.github.com/v3/#pagination).

Really liking the tutorial btw!

I think that coffeescript has nothing to do with React, and using it as an example is confusing. I would prefer to use Babel from the beginning, so we can execute the npm commands along.

I downloaded your repository.
Executed npm install
when I tried to execute npm run I got error
ERROR in ./app/config/routes.js
Module parse failed: C:\React-Fundamentals-video12\app\config\routes.js Unexpected token (14:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (14:2)
at Parser.pp$4.raise (C:\React-Fundamentals-video12\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)

Apologies for the noob question, but how do I clone the code from the various lessons?

When I use git clone https://github.com/ReactTraining/react-fundamentals.git all I get is a .git folder and the Notes and Readme files.

Hey! Everything was working fine for me until it came to putting the actual react code in... then when I run npm run production or npm run start I get ...

ERROR in ./app/index.js
Module build failed: SyntaxError: /home/ubuntu/workspace/app/index.js: Unexpected token (7:6)
   5 |   render: function () {
   6 |     return (
>  7 |       <div> Hello ReactJS Program! </div>
     |       ^
   8 |     );
   9 |   }
  10 | });

I just can't figure out why 😞

in the repository code you have 'playerTwo' going to onReset rather than props.id as per you video.

Since there are two PlayerInput components, their labels & username inputs need unique ids. Could be fixed with something like:

• htmlFor={this.props.id + 'Username'}
• id={this.props.id + 'Username'}

Thanks for the amazing tutorials! 🎉

Hi Tyler,

Great course on react. I am a subscriber on Tylermcginnis and currently working my way through.

But I am stuck on the webpack-dev-server page watching/refresh.

Below is my webpackconfig file...

`const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /.(js)$/, use: 'babel-loader' },
{ test: /.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
plugins: [ new HtmlWebpackPlugin({
template: 'app/index.html'
})]
}
`

I run npm-run-start and it runs but once i update my index.js...nothing happens.

Any ideas please?

Thank you!

The repo that we are suppose to clone in the ES6 training is not the same as the one showed in the videos.
Please, help resolve this issue, so we can code along with you on that training

I keep receiving this error message every time I try to run npm run production
npm ERR! Darwin 15.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "production" npm ERR! node v6.2.2 npm ERR! npm v3.9.6 npm ERR! code ELIFECYCLE npm ERR! [email protected] production:webpack -p
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] production script 'webpack -p'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack -p
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-boilerplate
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/user/Desktop/react-boilerplate-master/npm-debug.log`

I've moved my config file to the correct directory, other folks tell me it's a shell error and to just run npm run build this doesn't quite work. What's going on? I can't get the dist folder to populate. Help!`

Hi Tyler! Thank you for your course again, I like it very much.

In video 5 in "PromptContainer.js" you wrote the next line of code:
...
15. var username = this.state.username;
...

Is it necessary here? (Webstorm marked it as gray, it means inactive in my project. When I deleted this line from code, nothing changed - example still works).

Thank you!

Can't progress past Question 2 in this quiz while using Chrome Version 55.0.2883.95 (64-bit): after selecting an answer option, the 'Check' button doesn't function.

Not an issue in Firefox, where I was able to complete the quiz. Using macOS Sierra 10.12.1.

When running npm start on the popular branch I get this error;

Module not found: Error: Can't resolve 'loglevel' in '.../react-fundamentals/node_modules/webpack-dev-server/client'

found this fix
webpack/webpack-dev-server#1000
npm i -D loglevel

Hi you have a misspelling on "produdction": "webpack -p" which could throw someone off. FYI.

How are we supposed to solve code-pens when the result requires stuff that hasn't been introduced (e..g USER_DATA object, and the "user={{")? no explanation of thy the user= has double {}

Also, using html elements names (img) is a really bad idea for teaching

I get this when i run npm run start

[email protected] start C:\reactJS\github-battle
webpack-dev-server --open

events.js:182
throw er; // Unhandled 'error' event
^

Error: addMembership EHOSTUNREACH
at exports._errnoException (util.js:1014:11)
at Socket.addMembership (dgram.js:579:11)
at Socket. (C:\reactJS\github-battle\node_modules\multicast-dns\index.js:53:16)
at emitNone (events.js:110:20)
at Socket.emit (events.js:207:7)
at startListening (dgram.js:144:10)
at _handle.lookup (dgram.js:249:7)
at _combinedTickCallback (internal/process/next_tick.js:105:11)
at process._tickCallback (internal/process/next_tick.js:161:9)
at Function.Module.runMain (module.js:607:11)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --open
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

If setting up the first project manually, and run

npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-core babel-loader babel-preset-react

It installs the following dependency versions (which are substantially different from the ones in https://github.com/ReactjsProgram/React-Fundamentals/blob/video2/package.json ):

  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-react": "^6.23.0",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.3.0",
    "webpack-dev-server": "^2.4.2"
  }
}

And when trying to run npm run production, you get the following error:

c:\wamp\www\github-battle>npm run production

> [email protected] production c:\wamp\www\github-battle
> webpack -p

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.context: The provided value "c:\\wamp\\www\\github-battle" is not an absolute path!

 - configuration.output.path: The provided value "c:\\wamp\\www\\github-battle/dist" is not an absolute path!

Everything is the same as the repo version, apart from the dependency versions. Cloning the video2 branch of the repo and running npm install, the npm run production command does work:

> [email protected] production c:\wamp\www\React-Fundamentals-video2
> webpack -p

Hash: 80a6aab05d5f7cfeee56
Version: webpack 1.14.0
Time: 3629ms
          Asset       Size  Chunks             Chunk Names
index_bundle.js     190 kB       0  [emitted]  main
     index.html  314 bytes          [emitted]
   [0] multi main 28 bytes {0} [built]
    + 159 hidden modules

WARNING in index_bundle.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]
Dropping unreachable code [./~/react/lib/shouldUpdateReactComponent.js:40,0]
Condition always true [./~/react/lib/traverseAllChildren.js:158,0]
Condition always true [./~/react/lib/ReactDOMComponent.js:907,0]
Dropping side-effect-free statement [./~/react/lib/ReactEventListener.js:72,0]
Dropping unused function handleTopLevelWithPath [./~/react/lib/ReactEventListener.js:98,0]
Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [./~/react/lib/ReactEventListener.js:26,0]
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

This isn't a breaking issue, but in PromptContainer.js, on line 26 you wrote this.state.username, but shouldn't that field contain an empty string based on line 17?

Since it works I'm guessing that setState is asynchronous (possibly utilizing ES6 jobs or something). However, if that is the case, what was the point of caching the username in a variable?

If you're going to use the Bootstrap CDN to get the CSS, the integrity hash is now mandatory:

<link
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">

Without it, the file isn't served and a 403 is returned instead.

While you are testing if the loader component is working you go back to the Container (both ConfirmBattle and Results) and change the setState to be always true.

Wouldn't it be better to just change the shorthand that checks if it isLoading? Such as:

`function ConfirmBattle (props) {

return props.isLoading || true

? <Loading />

: ...` 

Just a suggestion though, great videos, thanks a lot!

Hey @tylermcginnis,

I'm following the React Fundamentals course, I'm currently on this lesson, now the lesson's description points to video3 branch, but it has different code from the actual video. While the video shows an example about creating an avatar component using User's Data from a JSON, the branch's code has a Container with a Wrapper component.

"If you do get stuck you can refer to the 'step1' branch."

There is no step1 branch or video1 branch..

React-Fundamentals$ git branch --all

• master
  remotes/origin/HEAD -> origin/master
  remotes/origin/gh-pages
  remotes/origin/master
  remotes/origin/sentry
  remotes/origin/solution
  remotes/origin/video10
  remotes/origin/video11
  remotes/origin/video12
  remotes/origin/video2
  remotes/origin/video3
  remotes/origin/video4
  remotes/origin/video5
  remotes/origin/video6
  remotes/origin/video7
  remotes/origin/video8
  remotes/origin/video9

I think it would be better to show the command to install webpack earlier in the lesson. I had to search through the lesson to find it after some over commands that failed because webpack wasn't installed.

Hi!

For the example on React Router, I keep getting this error even after I copied and pasted the code from the repository:

index_bundle.js:20 Uncaught TypeError: Cannot read property 'location' of undefined
at new t (index_bundle.js:20)
at p._constructComponentWithoutOwner (index_bundle.js:20)
at p._constructComponent (index_bundle.js:20)
at p.mountComponent (index_bundle.js:20)
at Object.mountComponent (index_bundle.js:6)
at performInitialMount (index_bundle.js:20)
at p.mountComponent (index_bundle.js:20)
at Object.mountComponent (index_bundle.js:6)
at a (index_bundle.js:20)
at r.perform (index_bundle.js:6)

Am I missing a dependency? Thanks.

In the example code:

var HelloWorld = React.createClass({
displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "Hello World");
}
});

Why is there 'displayName: "HelloMessage"'?

There is no mention at all of it in the text.

if you are caching the this.state.username why are you not using the cached variable?

Getting this error when trying to hit the PlayerOne continue button.
Uncaught TypeError: Cannot read property 'username' of null(…)

Was told to bind to the constructor and not the render function but it still isn't working. I took out username={this.state.username} in the render fn at line 43 and that got me to PlayerOne route but obviously there is an error when trying to get to playerTwo. Also read through a lot of other issues similar to this and tried those implementations and still am stuck. Thanks for the help!

var Prompt = require('../components/Prompt');

var PromptContainer = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired
  },
  getInitalState: function () {
    return {
      username:''
    }
  },
  handleSubmitUser: function (e) {
    e.preventDefault();
    // var username = this.state.username;
    this.setState({
      username: ''
    });

    if (this.props.routeParams.playerOne) {
      this.context.router.push({
        pathname: '/battle',
        query: {
          playerOne: this.props.routeParams.playerOne,
          playerTwo: this.state.username
        }
      })
    } else {
      this.context.router.push('/playerTwo' + this.state.username)
    }
  },
  handleUpdateUser: function (event) {
    this.setState({
      username: event.target.value
    });
  },
  render: function () {
    return (
      <Prompt
        onSubmitUser={this.handleSubmitUser}
        onUpdateUser={this.handleUpdateUser}
        header={this.props.route.header}
        username={this.state.username} />
    )
  }
});

module.exports = PromptContainer;

Instead of yielding the expected text "Results", the battle function seems to be outputting "Not Found".

is anyone else having this problem?