https://javascript30.com is a great hands on resource for learning practical javascript. It teaches you to Build 30 things in 30 days with 30 tutorials.

IMO advantage is the predictability of state over multitudes of ui changes. Everything that changes in app (data/ui state) is contained in a single object called the state.

I like the details they put in into Intuits Harmony style guide. The guide is comprised of web, ios and android styles. For instance you will find detailed explanation on designing navigation on each of the platform in its unique way. http://harmony.intuit.com/ Blog post - https://developer.intuit.com/hub/blog/2015/01/08/new-year-new-look-introducing-intuits-harmony-toolkit

I agree @fibric. I like his teaching style. I recommend his advanced javascript course on FM to everyone. https://frontendmasters.com/courses/advanced-javascript/

I found free youtube videos on functional programming by Mattias Petter Johansson (mpj) useful as a beginner. https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84 Frontendmasters.com recently published an online course titled 'Functional Lite Programming' by Kyle Simpson (paid).

I do not quite get why we do this using provideplugin. plugins.push( new webpack.ProvidePlugin({ $: 'jquery' , jQuery: 'jquery' , React: 'react' })); I know benefits of creating chunks of code. But I want to understand proper ways to create them and would like to know how webpacks makes them work internally.

We recently started using CSS Modules in our SPA and it's been super-useful. We use CSS Modules in our dumb reusable components. To use CSS modules alongside bootstrap (which we treat as global) I named each css file as mycomponent .module.css and created following webpack config: CSS Modules for component CSS : { test : /\.module\.css$/ loader: ExtractTextPlugin. extract ( 'style-loader' , 'css?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]' ) } No CSS Modules for bootstrap etc global CSS : { test : /^((?!\.module).)*\.css$/, loader: ExtractTextPlugin. extract ( 'style-loader' , 'css' ) }

NFL - The National Football League. They have contributed a lot to React Ecosystem. From their Medium post: The National Football League adopted React in December of 2014. For the past year we have iterated and built on React’s core concepts, various Flux implementations, JSX, Babel, experimental proposals, and functional approaches. You name it and we’ve probably evaluated it and possibly use it in production. Read on for a review of the NFL’s year in React. https://medium.com/nfl-engineers/nfl-react-84e9cd11d384#.udqgrbm1z

Don'ts: I would not get bogged down by webpack/es6/babel/redux/immutable. I would only focus on learning about React and React only the way they have shown in official docs. I would not go through so many 'starter kits'. Dos I would begin by learning through Stephen Grider's React course on Udemy.com I would build my own simple app only using React. And at a later stage I will port it to use Redux. At this stage I will learn about immutability and its importance in Redux apps. Study through other people's code on github - Sound-redux and itsquizwall repos. These live apps that are actively being developed on Github.

Learning node can get intimidating at first when you try to understand 'event loop' and 'streams'. I would suggest not to worry even if you do not understand those concept initially. Don't stop there. Move on to learn express js. Express is easy and it will give you required boost to move forward into concepts of event loop and streams. Get any beginner level express js book and create a simple website using express framework. Next step would be to learn about socket.io and real time communication.