uidotdev / react-course Goto Github PK
View Code? Open in Web Editor NEWCode for ui.dev's "Classic React" course
Home Page: https://ui.dev/classic-react
Code for ui.dev's "Classic React" course
Home Page: https://ui.dev/classic-react
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"
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.
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.
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
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
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.
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! 🎉
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.
Hi you have a misspelling on "produdction": "webpack -p"
which could throw someone off. FYI.
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!
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
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?
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
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 😞
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.
Bootstrap columns must always be nested under .row
s, and should not be nested under other columns. The examples incorrectly nest columns inside other columns without containing rows. Further, all .row
s must have a .container
as a direct parent: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
<!-- 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>
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!
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!!
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!
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
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.
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)
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
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.
produdction = production
#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)
}
}
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.
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!`
if you are caching the this.state.username why are you not using the cached variable?
is anyone else having this problem?
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;
"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
Instead of yielding the expected text "Results", the battle function seems to be outputting "Not Found".
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!
in the repository code you have 'playerTwo' going to onReset rather than props.id as per you video.
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. ;)
is throwing error
seems to fix the problem.
Opened a pull request about it.
Thank you.
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!
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
....
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!
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
`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
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.
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?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.