Full Stack Web Development With React.js (Flux / Redux) + Webpack + Node.js / Meteor.js

It's quite a long time working in this stacks and the more I work in this stack - the more I get love to use this stack , well to be honest at first time it's seems like pain to set up everything then to have a very single component make a full structure (to maintain good practices in the same) , but once it's done it's feels like wow , you can use a single component in multiple places easily and performance is excellent as well , it's come with awesome features this new technologies provide (e.g. es5/es6 import/export , using npm packages in full stack i.e using npm packages in browser as well ) and there is excellent packages available to use ,  easy to get and integrate .

Now I see many fresher javascript programmers also wanted to grasp this technologies but they are facing difficulties and I am getting multiple request to give them training or help them directly which is not possible in my current work schedule as being Individual programmer I am always busy in existing projects . 

So I have decided to provide a detail process on how to use this techs and what resources I followed to grasp this. 

Set Up Basic React.js Application: 

For setting up react react.js official site i.e https://facebook.github.io/react/docs/tutorial.html is excellent option 

but best practice is to use web pack https://github.com/webpack/webpack and babel (since browser directly desn't support jsx it need to compiled into vanilla JavaScript )

Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Babel is a transpiler for JavaScript best known for its ability to turn ES6 (the next version of JavaScript) into code that runs in your browser (or on your server) today.

Below is very good article I found useful for starters to use / understand how to set react for es6 using web pack and babel 

https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Now if are good at understanding of how to use react.js with es5 /es6 , webpack and babel , let's proceed next. 

To use full working Node.js + React.js + web pack (with babel) you can use below starter package:

https://github.com/webpack/react-starter

or

https://github.com/kriasoft/react-starter-kit 

or

https://github.com/choonkending/react-webpack-node

To use full working Meteor.js (with supported Node.js packages) + React.js + web pack (with babel) you can use below starter packages and tutorials:

Tutorial Url: https://marmelab.com/blog/2015/11/27/meteor-webpack-react-redux.html

Git Repos:

https://github.com/jedwards1211/meteor-webpack-react (I personally like this one)

https://github.com/thereactivestack/kickstart

I suggest best way is use Flux / Redux way , below is links to know further about Flux and Redux

Flux:

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

https://facebook.github.io/flux/docs/overview.html

Tutorials (even I followed in past):

 https://tylermcginnis.com/reactjs-tutorial-pt-3-architecting-react-js-apps-with-flux/

https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux

https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture

https://www.codementor.io/reactjs/tutorial/react-js-flux-architecture-tutorial

Redux:

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

https://github.com/reactjs/redux

https://redux.js.org/docs/introduction/index.html

Tutorials :

https://egghead.io/series/getting-started-with-redux

https://redux.js.org/docs/basics/UsageWithReact.html

https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/

https://www.jchapron.com/2015/08/14/getting-started-with-redux/

https://blog.krawaller.se/posts/a-react-redux-example-app/

I hope above resources will help fresh javascript / React.js developer to learn more and make great applications in future . 

Thanks for reading!

Did you find any of these tips useful? please like and share with others . 

Do you know more about this topic or just know better resources ? do give comment and share with others :) 

About the Author

Sandip Das is a tech start-up adviser as well as working for multiple international  IT firms , tech-entrepreneurs as Individual IT consultant / Sr. Web Application developer / JavaScript Architect , worked as a team member, helped in development and in making IT decision . His desire is to help both the tech-entrepreneurs & team to help build awesome web based products , make team more knowledgeable , add new Ideas to give WOW expression in product.

More on Sandip here at LinkedIn