First of all, we need to install dependencies- libraries to run your app.
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
<div> can be a component. For instance:
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.
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.
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.
Finally, let’s type some commands.
- 1.First, create a directory, where will be your project located in your computer and entry it:
- 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).:
- 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
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
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. 🙂