learncodeacademy / react-js-tutorials Goto Github PK

The JSX in the react-router examples uses "class" instead of "className", and with the current version of react (15.4.1) the "class" declarations are ignored. The most obvious impact of this is on the nav bar, which is rendered as a simple list of links. Although there is an npm package named jsx-html-class that will allow the use of "class" in JSX, I don't recall seeing it mentioned during the setup/configuration portion of the tutorial.

When running webpack, I get an error saying that the output file name isn't configured. Any idea what could be going wrong? (I'm new to webpack, but just used unaltered files in the repository)

The best way to learn from a tutorial series like this is to follow along and code with the videos. This repo currently has no way to start the mini-projects from where the videos start and each project is different enough from the others that following along from scratch is difficult.

It would be useful to either have a branch for the starting points, have separate directories for starting points, or even have instructions within each mini-project directory for rolling back commits to a starting point.

when im doing npm start on 4-redux folder, it says cannot find 'start' script. Im new to react.
please help

It seems that
const middleware = applyMiddleware(promise(), thunk, logger())

needs to be written as
const middleware = applyMiddleware(promise, thunk, logger)

for your example code to work

Hello, thank you for the wonderful tutorials! I am trying to work my way through the mobx #1 tutorial and I am having problems. The store object (defined as a TodoStore) is not getting defined correctly. Here is my TodoStore.js file; it is very close to identical (I added some labels in the console.log calls) to yours in the video at 4:30:

import { autorun, observable } from "mobx"

class TodoStore {
@observable todos = ["buy milk", "buy eggs"]
@observable filter = ""
}

var store = window.store = new TodoStore

export default store

autorun(() => {
console.log("Filter: " + store.filter)
console.log("First item: " + store.todos[0])
})

(Sorry, indentation doesn't come out quite right). When I render the HTML, my console window shows:

Filter: undefined
mobx.module.js:2955 [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@1] TypeError: Cannot read property '0' of undefined
at TodoStore.js:14

I can change the value of store.filter with a console assignment, but I cannot assign, inspect, or reference in any way store.todos[0]:

store.todos[0]
VM424:1 Uncaught TypeError: Cannot read property '0' of undefined
at :1:12

Whereas I cannot find anything different between the code in the video at 4:30 (which is not the final checked-in version of the code) and my code, I am the pupil here and I'm sure I have something incorrect. Do you have any advice for me concerning how I might fix this? I am using:

"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"mobx": "^3.1.16",
"mobx-react": "^4.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"

Thanks for any help you can provide.

Hi,
I cloned the repo in my local and run the npm install as directed. However, I kept getting command not found error when try to run webpack. I am wondering if you know there is any path issues involved?

Thank you for your great works. I had finished tutorials of React by using examples in this repository and videos on YouTube. Through I had studied these lectures, I noticed some resources such as webpack, babel, react-router etc. are become some bit old now.

I rewrited some resources with latest packages distributed at the present such as webpack4, react-router4, babel7 etc. And I added some examples about redux-saga that is used as middle-ware of Redux in 4-redux and 5-redux-saga. I hope you will find them helpful.

https://github.com/TsutomuNakamura/react-js-tutorials

I didn't make PR because some of a lot resources were re-written. If there are some good ideas, let me know, please.
Cheers🎉.

Hey
Firstly thanks for your series on YT - very useful for learning the basics.
Trying to get a loader/spinner showing in the UI but I can't see where FETCH_TWEETS is dispatched to update fetching to true.

Sorry, this isn't an "issue" as such - more a question.

Thanks

Hi,

with webpack-dev-server 1.14.1 the localhost:8080 is not working due to bug in this webpack version. It throws an error "Uncaught TypeError: Cannot read property 'replace' of null"

If you edit package.json dependencies to: "webpack.dev.server" : "1.14.0" and run "npm run dev" it will work as it should.

node_modules are not found inside every folder for this tutorial for eg: 2-react-router, 3-flux etc.

So should I grab it each time and install a fresh copy in each of the folders when I want to run those respective tutorials?

Is there a way I can link my systemwide npm to these tutorials?

Thanx for this resource, just getting started with react and it works straight out the box.
I'm running the 3-flux example and getting the warning shown below when I click reload. I also see GET errors (send_focus_event, on_focus and on_blur) when using the nav menu.
There aren't any XMLHttpRequest's as far as I can make out. I'd greatly appreciate it if you could tell me where I'm going wrong.
thanx for your time.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
VM509:62 GET http://nikkomsgchannel/e?006d0051005b005a00360031006b0021005e0055005b005300…5500590050003700640052002d004400590008005a002b005c005f0056002d002b0058002e rapport_nikko_send_focus_event @ VM509:62rapport_nikko_on_focus @ VM509:72
VM509:49 GET http://nikkomsgchannel/e?006d0051005b005a00360031006b0021005e0055005b005300…560054002a0036001200240059004600580009002c005e005f0052002c002c005d002e005a rapport_nikko_on_blur @ VM509:49

Following the part 5 of the tutorial, got this problem;

Syntax error: MyFile.js: Unexpected token (9:0)
>  9 | @connect((store) => {

Also confirmed here

caused by Layout.js

webpack-dev-server will not run. Following the video #3 for Redux I get the following error:

D2rdMac:4-redux d2rd$ npm run dev

> [email protected] dev /Users/d2rd/LambdaSchool/Tutorials/LearnCodeAcademy/react-js-tutorials/4-redux
> webpack-dev-server --content-base src --inline --hot

module.js:540
    throw err;
    ^

Error: Cannot find module 'webpack/bin/config-optimist'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/d2rd/LambdaSchool/Tutorials/LearnCodeAcademy/react-js-tutorials/4-redux/node_modules/webpack-dev-server/bin/webpack-dev-server.js:64:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --content-base src --inline --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additionallogging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/d2rd/.npm/_logs/2018-05-05T23_33_02_290Z-debug.log
D2rdMac:4-redux d2rd$ npm install webpack
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta|| ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@>=1.3.0 <3 butnone is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
updated 1 package in 25.33s
D2rdMac:4-redux d2rd$

Hi,
I am new to react and wanted to run the first (basic react) example. I did "npm install" but on "npm run dev" I get a list of missing dependencies (one after the other) like mime, destroy, unpipe, statuses, http-errors, etc.
Am I supposed to install all these libs or what am I doing wrong?
Thx
w

I'm new to React js and wanted to run 5-redux-react code. But when I clicked Load tweets button, nothing happened and below error on console:

Each child in an array or iterator should have a unique "key" prop. Check the render method of Layout. See https://fb.me/react-warning-keys for more information.

I was following your tutorials on my own machine. i met a bug.
in the handleActions function, we should put 'break' in each switch statement, otherwise there will be an error.

Please revert 2cf5e56

I can use @Inject(store) in components
but when i test my components
it failed with the above error

Been searching around but I've got no solution so far.
I need your help !
Thank !

client.min.js from UglifyJs
Condition always true [..//.npminstall/react/0.14.8/react/lib/ReactMount.js:764,0]
Condition left of && always true [..//.npminstall/json3/3.3.2/json3/lib/json3.js:5,0]
Condition always true [..//.npminstall/react/0.14.8/react/lib/findDOMNode.js:46,0]
Condition always true [..//.npminstall/react/0.14.8/react/lib/instantiateReactComponent.js:80,0]
Dropping unreachable code [..//.npminstall/react/0.14.8/react/lib/shouldUpdateReactComponent.js:40,0]
Condition always true [..//.npminstall/react/0.14.8/react/lib/traverseAllChildren.js:158,0]
Side effects in initialization of unused variable text [./js/reducers/tweetsReducer.js:30,20]
Condition always true [..//.npminstall/punycode/1.3.2/punycode/punycode.js:511,0]
Dropping unreachable code [..//.npminstall/punycode/1.3.2/punycode/punycode.js:518,2]
Side effects in initialization of unused variable freeExports [..//.npminstall/punycode/1.3.2/punycode/punycode.js:5,0]
Side effects in initialization of unused variable freeModule [..//.npminstall/punycode/1.3.2/punycode/punycode.js:7,0]
Dropping unused variable key [..//.npminstall/punycode/1.3.2/punycode/punycode.js:56,0]
Condition always true [..//.npminstall/react/0.14.8/react/lib/ReactDOMComponent.js:907,0]
Dropping side-effect-free statement [..//.npminstall/react/0.14.8/react/lib/ReactEventListener.js:72,0]
Dropping unused function handleTopLevelWithPath [..//.npminstall/react/0.14.8/react/lib/ReactEventListener.js:98,0]
Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [..//.npminstall/react/0.14.8/react/lib/ReactEventListener.js:26,0]
Condition always true [..//.npminstall/webpack-dev-server/1.14.1/webpack-dev-server/client?http:/localhost:8080:9,0]
Side effects in initialization of unused variable scriptHost [..//.npminstall/webpack-dev-server/1.14.1/webpack-dev-server/client?http:/localhost:8080:5,0]
Condition always true [..//.npminstall/webpack/1.13.1/webpack/hot/dev-server.js:6,0]
Dropping unreachable code [../~/.npminstall/webpack/1.13.1/webpack/hot/dev-server.js:62,0]

Happens when I run your example on Windows 7(no warning on Mac). Everything is still working though. Why?

One thing I spotted in the source code (2-react-router post-video code), it appears the article: date: filter: logic is overridden by the ad spot logic in Archives. Is this intentional?

This is my code. I was going through this tutorial

https://www.youtube.com/watch?v=DJ8fR0mZM44&index=19&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

Which middleware runs the reducer when there are two middleware? I have logger and Error middleware. Is there a order or something like that?

Your HTML should be using className="container" instead of class="container"

For example this file should be using className instead of class.

class will throw warnings in the console when using it.

See Tags and Attributes in the React docs.

All attributes are camel-cased and the attributes class and for are className and htmlFor, respectively, to match the DOM API specification.

Seems Webpack changed how they handle Loaders and Plugins. Update webpack config to reflect this change.

I ran webpack for the first tutorial I encountered this issue:

$ webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module has an unknown property 'loaders'. These properties are valid:
  object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
  -> Options affecting the normal modules (NormalModuleFactory).

From serverless/serverless#4788

Fixed by changing loaders to rules in webpack.config.js
But then saving and running webpack again I encountered another issue.

ERROR in ./js/client.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (<skip>..\react-js-tutorials\1-basic-react\node_modules\babel-loader\lib\index.js:103:36)

Hope you can help me on this thanks!

In your webpack.config.js it's better to also add the one liner here in the production section:

new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),

Reasons are found here:

https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build

Thanks for all your tutorials btw, I learned a lot !