The brand new framework based on React + Redux and also our best practices.
Build rich user interfaces with a component-based JavaScript library.
React
- React is only a view library and we can gradually introduce it to an existing project. Even if you work on a few years old legacy application you can still design a new screen using it. It's not all or nothing
- React works with ES5/ES6/ES7
- React is an innovative place
- JSX - Mix up HTML and JavaScript
- React has a simple API
- Lightweight Components => Best Practices keep them lightweight and small yet reusable, composeable and functional without any side effects
- Unidirectional Data Flow
- Works great witht Redux which could help you structuring and managing your web app state
- Close to JavaScript
- Functional Programming
- Community
AngularJS, Inferno, Preact, Vue.js, ...
Need to navigate between pages without refresh the whole pages.(SPA)
react-router@v4
React Router is a declarative routing for React and it is also a collection of navigational components that compose naturally with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.
Needs to structure and manage more complex Web App state than ever before. Mutable state is particularly troublesome.
- Where do I keep all the data regarding my application along its lifetime?
- How do I handle modification of such data?
- How do I propagate modifications to all parts of my application?
Redux
Redux will solve the problems mentiond and ties these all together for you, to sum up, Redux will provide you:
- a place to put your application state
- a mechanism to dispatch actions to modifiers of your application state, AKA reducers
- a mechanism to subscribe to state updates
You don't always need Redux and it's all depending on your requirements.
Need to handle side effects or asynchronous actions in a redux application.
Redux Promise Middelware
Redux Promise Middleware is a lightweight library for resolving and rejecting promises with conditional optimistic updates.
Redux promise middleware enables robust handling of async code in Redux. The middleware enables optimistic updates and dispatches pending, fulfilled and rejected actions. It can be combined with redux-thunk to chain async actions.
redux-thunk, redux-saga, redux-observable, redux-loop, redux-pack, etc.
Need to send AJAX request in node & browser env.
isomorphic-fetch
isomorphic-fetch is a Fetch lib for node and Browserify. Built on top of GitHub's WHATWG Fetch polyfill.