React Redux AntD and Umi js form an enterprise level UI framework

1. Reactjs,Redux,AntD and Umi js
By:Isuru Samaraweera

2. Agenda
● Introduction to Reactjs and Ant Design
● Key constituents of ReactJs
● Introduction to Redux
● State management with Redux
– Actions
– Reducers
– Effects,Generators
● Umi js as a UI framework

3. What is ReactJs
● API to develop User Interfaces
– View on MVC
– One way binding
– Reusable components
– Responsive
– React js vs React native
● Client base
– Facebook,Microsoft
– Netflix,Uber
– Espn,Wallmart
– BBC,Atalassian and more

4. Ant Design● Ant Design
– An Enterprise-class UI design language
– https://ant.design/
● Ant Design of React
– UI components out of the box, based on React.
– http://react-component.github.io/badgeboard/
● Ant Design Pro
– An out-of-box UI solution for enterprise applications
– Umijs(react,redux dva,jest,mockapi)+antD react components
– https://pro.ant.design/
● Ant Design Mobile
– Mobile UI specification and React implementation.
– https://mobile.ant.design/

5. Main React constituents
● Virtual Dom
● JSX
● Props/PropTypes
● States
● LifeCycle

6. Virtual Dom
●
●

7. JSX
● Write code that looks like HTML
●
●
● Make large trees easier to read
● JSX Preprocessor
– converts JSX to javascript
● Babel
– a transpiler that turns code to be compatible with
older browser
● Webpack
– Build tool/Auto refresh/Bundler

8. Props,proptypes and state
● Props
– pass parameters from parents to children components
● static propTypes = {
incrementBy: PropTypes.number,
};
– Bool,number,string,func,array etc
● <Hello incrementBy={1}/>
– this.props.incrementBy
– Props are immutable
● State
– To manage state I e respond to user input
– SetState to update currentstate to next state
– Rerender on state change

9. Reactjs Life cycle
● 2 Major types
– Will methods—Called right before something
happens
– Did methods—Called right after something happens
● Based on phase of life cycle
– Initialization—When a component class is being
instantiated.
– Mounting—A component is being inserted into the
DOM.
– Updating—A component is being updated with new
data via state or props.
– Unmounting—A component is being removed from
the DOM.

11. componentwillreceiveprops
<Component value={15} />

12. Redux
● Provide State management layer for React.
● Store
– Holds all application state in a single state tree
– Updated only with actions
– An object describing an event.
● Reducers to transform application state

13. Actions and reducers
● Javascript obect representing event
{type: 'CREATE_POST',
payload: {
body: 'This is body'
}}
●

14. Connect to redux store
● import { connect } from 'react-redux';
● class App extends Component {
● render() {
● return (
● <div className="main-content">
● <TasksPage tasks={this.props.tasks} />
● </div>);}}
● function mapStateToProps(state) {
● return {tasks: state.tasks}}
● export default connect(mapStateToProps)(App);

15. Asynchronous calls

16. Generators
● Functions
– Can be paused and resumed
– Handle complex async events efficiently
– Prevent call back hell
● function* count() {
● yield 1;
● yield 2;
● yield 3;
● }
● Const iterator = count()
● Iteraor.next()=>{ value: 1, done: false }
● Iteraor.next()=>{ value: 2, done: false }
● Iteraor.next()=>{ value: 3, done: false }
● Iteraor.next()=>{ value: undefined, done: true }

17. Redux Saga Effects

18. ● function* fetchTasks() {
● try {
● const { data } = yield call(api.fetchTasks);
● yield put({
● type: 'FETCH_TASKS_SUCCEEDED',
● payload: { tasks: data },
● });
● } catch (e) {
● yield put({
● type: 'FETCH_TASKS_FAILED',
● payload: { error: e.message },
● });}}

19. Umi js Dva based State
management
● Sessionstorage
● Localstorage