Introduction to React and Redux for Backend Developers

If you, like me for a long time, believed that JavaScript is such a “toy” language in which animations are written for menus and falling snowflakes on forums for the new year, and then woke up in 2016 with thoughts of WTF: react, flux redux, webpack, babel ,… do not despair. You are not alone. There are many materials on modern frontend in the network, even too much. Under the cut, there is another alternative view of what it is like to learn JavaScript in 2016 .

So, we will need: React, React Dev Tools, React-Hot-Loader, React-Router, Thunk, Redux, Redux Dev Tools, Semantic-UI, Webpack, Babel and npm.

At first glance, a lot. Compare with the backend: MVC framework, ORM, Data Mapper, IOC container, logger, profiler, queues, configuration management, build and layout ... The list goes on, but I think the idea is clear and so: as the complexity of the tasks increases, the complexity of the tools grows . Increasingly, we use the term Web App instead of Web Site, focusing on the rich features of modern web applications.
')

Why this particular stack?

If you think about it and discard all unnecessary, then the only resource of the post-industrial era, through which all others can be expressed, is time. Mastering each new technology takes time, and therefore more promising are investments in technology that will not become obsolete in the next couple of months. Additional plus receive technologies with a flat curve of training.

React + Redux VS Angular VS Yet Another JS Framework

Only the lazy did not compare Angular with React (attributing to this, they say, the comparison is not correct, Angular is a framework, React is a library). Let's go from the reverse. Why not choose something such as Vue , Ember or, God forbid, Elm ?

1. Support for major vendors
2. Community size

Due to these factors, Angular and React are more likely to survive. Sorry, other great hipster solutions, we are not on the way. So why React? For me personally, the choice was not easy:

1. Scared jsx files
2. I knew something about Angular 1.x and it was psychologically uncomfortable to switch to another technology.
3. ng2 comes with TypeScript by default, which is closer to me as a supporter of static typing
4. ng bribed the "out of the box" approach. There was no wish to delve into the variety of npm-packages.

In short, I forced myself to study all the comparison articles and write the Todo App on React, which tipped the scales in the opposite direction. The key factors for me were:

1. Angular HTML templates are terrible and their syntax changes from version to version. In React, a template is JavaScript, because a component is nothing more than a View. Error messages in React are better.
   
   
2. Oddly enough, TypeScript. A more detailed study turned out that not everything is so beautiful. First, TypeScript is not a full-fledged language with static typing, but transpiler. This greatly limits the use of templates and meta-programming. Secondly, not all npm-packages come bundled with d.ts-files. In short, Flow seemed easier to screw on. Thirdly, TypeScript has both ardent fans and opponents. If TS fans are relatively loyal to ES6, then the opposite is not true. ES6 earns an extra point to the Bus Factor.
   

   If you like TypeScript, nothing prevents you from using it with React. It’s just that he hasn’t given me a critical amount of advantages yet to make me spend time on one more item in the stack.

3. Report by Dan Abramov about "time travel." If your experience in the backend is similar to mine, then you can easily see that the new-fashioned flux is CQRS and Event Sourcing "profile view". Instead of projections - reduser, and instead of teams and domain events - action. And if you worked, for example, with WPF, then dealing with React is generally a matter of a couple of evenings.
   

   Yes, Redux can also be used with Angular, it is not tied to React in any way, but React already has react-redux and react-hot-loader. Probably for Angular, too, but Redux’s main container is clearly on the React side.

For React and Redux , two Chrome extensions are available. I recommend to put both to make debugging enjoyable.

Thus, the React + Redux bundle:

1. - , ui = f(state => props), f — -, state — redux, state => props — react-redux.
3. Tool Support (IDE Chrome)

, React Native, , , , .

flux . ?

, flux — . CQRS flux — . React — . props (read-only) state (mutable). state props -. render. . , React. ( setState), ( props). UI- props.
<button onClick={this.props.handleClick} />.
Redux json-. Redux . , . spread-:

const newState = {...prevState, somethingNew: 'blah-blah'}

react-redux redux state => react component connect. Redux , props dispatch state, Redux. store.dispatch — . «» dispatch .

State Redux, state. ?

Redux . . state .

JSX

JSX – JavaScript. , React JSX, React’. HTML- PHP . Smarty. , . … ?

JSX – JavaScript . , (), { }. . , . , . React — View-. ( .. ) Redux. React «» store, Redux ( ), middleware ( ).

React functional stateless-:

const StatelessComponent = props => (<div>Hello, {props.name}!</div>)

-:

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

. :

export default props => (<div>{props.title}</div>)

, :

const StatelessComponent = props => (<div>{props.title}</div>)
StatelessComponent.propTypes = {…}
export default StatelessComponent

-, , React , . -, WebStorm PropTypes - required props.

Babel

, . JavaScript, JavaScript. ES6 + JSX. JSX – ( <?=$var?> PHP @Model.Param Razor).

ES6 . :

1. JavaScript , -.
2. , .
3. . ECMA , , .
4. Babel – JavaScript … JavaScript. «» JS «», .

Babel JS, JSX, React- ES6.

, React.createElement. React- ES5, ?

, ES6 – . (, ) (, ). - redux-saga redux-thunk, ( ).

Webpack

, ES6 + JSX, JS. . , . ( ), . , , grunt gulp . . , ( ), JS – Webpack — . , webpack — maven msbuild ( ) . , webpack’ , - . , - tutorial webpack, – tutorial .

webpack:

1. -,
2. npm start — dev-
3. npm run build

Webpack JS, sass, svg, , , .

Npm

Ruby gem’, php – composer, .NET – nuget. , JavaScript . npm nodejs- ( — node package manager), bower. - ES6, Webpack TypeScript. , npm package.json, :

"scripts": {
    "build": "webpack --config webpack/config.js -p",
    "start": "webpack-dev-server --config webpack/config.js"
  }

npm run build npm start .

npm build, npm run build, npm, .

React-Hot-Loader

--hot dev- webpack’ « ». , – . HMR (hot moudle replacement) . react-hot-loader . hot-loader’ , — . react-router. if(module.hot) , .

React-Router Thunk

React’ Web – SPA-. SPA- . react-router. . :

1. - history.
2. hot-reload , , route. .
3. RouterMiddleware Redux .
4. , <Route /> JavaScript- <Router routes={routes} />. , , .

Thunk – middleware redux, . . – . – . , middleware.

thunk – redux-saga. , , . , connect Redux . , , , fetch yield then. Redux thunk, .

Semantic-UI

SPA-, , . React Bootstrap, Material UI, Syncfusion Web Essentials ( – jQuery). Sematic-UI. – . Material UI - ( ). Bootstrap Semantic. , -. , . , Semantic UI – , 500.

2016 . , , . -.