How to setup React-ES6-Redux app with Express server? Introduction to libraries.

Dependencies

First of all, we need to install dependencies- libraries to run your app.

React

React, also called the “view” library from MVC, helps us to create reusable components. Imagine that the whole webpage consists of many logical components. Sometimes just a single row in a <table> or <div> can be a component. For instance:

react app components example

http://coenraets.org/blog/wp-content/uploads/2014/12/uimockscript.png

If an EmployeeListItem (new employee) will be added to this app, Redux store changes. React listens on store change and rerenders only the EmpolyeeList component. There is no need for a programmer to rerender the whole App. It is very effective.

Next thing we will need is react-dom package. It will create an entry point for rendering in Document Object Model using React.

Redux

Install redux package for creating client-side store. Store holds the whole state tree (one big json) of our app. Every action of user, makes an reaction. Also store can be changed only if an action is dispatched.

Let’s explain it. If a user submits a form, which is part of some React component, action will be dispatched and consequently store will be changed. React reads the data from the store, listens on store change and rerenders every particular component. Especially relevant thing to mention, that there is strict unidirectional data flow. It means, that components can not write into the Redux store. They can only read from it.

strict unidirectionaldataflow redux app

https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/standard8/files/2015/02/Screen-Shot-2015-02-09-at-20.33.39.png

react-redux package

Those components, which are connected to the store and read the state from it, are called ‘containers’ or ‘container components’. To connect React component with store, we need to install react-redux package.
Dan Abramov, the author of Redux wrote a nice article about difference between components and containers.

Packages for translation ES6 and JSX syntax

Because we want to develop our app in ES6, which doesn’t have default browser support yet, we need to translate it to ES5 (ECMAScript [Javacsript], the 5th version). Therefore we need Babel. Babel consists of a few packages – babel, babel-core, babel-loader (to connect webpack with babel), babel-preset-es2015 (for translating es6 syntax), babel-preset-react (for translating jsx syntax).

Webpack or Browserify

But we still need ‘the main brain’ of compiling, something, that knows, what to translate first and which translator to use – we need module bundler. Webpack or alternatively Browserify. In this tutorial we’ll use Webpack. It takes your file with ES6 and JSX code and with help of Babel translates it.

Good thing to mention is, that React (with other particular libraries like redux, react-router) is suitable mainly for single-page apps.

Tutorial

Finally, let’s type some commands.

  • 1.First, create a directory, where will be your project located in your computer and entry it:
  • mkdir myApp cd myApp
  • 2. It is useful to use npm because nobody wants to manage their dependencies manually. Therefore initialize your project with npm as a package manager (hit enter to all those prompts).:
  • npm init
  • 3.Install the production dependencies and notice them into the `package.json`(- -save).:
  • npm i react react-dom react-redux redux express --save
  • 4.Now install the development dependencies and notice them into the `package.json`(- -save-dev):
  • npm i babel babel-core babel-loader babel-preset-react babel-preset-es2015 webpack --save-dev
  • 5.Create particular files in your directory:
  • touch index.html index.js server.js webpack.config.js

 

Info! npm i==npm install
Info! There is a difference between production and development dependencies. Production dependency like Redux is needed every time when user visits our web app. Development dependency is needed only during developing our web app. For instance: We translate and bundle the app before we publish it online. And than a user will be served the bundled files. So therefore it is no need to use Babel in production.

 

index.html

webpack.config.js

index.js

server.js

package.json

Create `public` directory in myApp directory, so that your’s app structure looks like this one.

myApp/
    node_modules/
    public/
        bundle.js
    index.html
    index.js
    package.json
    webpack.config.js
    server.js

Of course, you don’t have bundle.js! As you maybe noticed I added some scripts to package.json. First run

 npm run build 

which creates your bundle.js file in public directory. And than

 npm start

to start your server, which serves you the index.html including this bundled file. As a result visit in browser localhost:3000 and there you’ll see your app. 🙂

2 Comments

  1. Jim

    Hello! I’ve been following your site for some time now and finally got the
    bravery to go ahead and give you a shout out from Kingwood Tx!
    Just wanted to say keep up the fantastic work!

Comments are closed.