React Redux AntD and Umi js
- 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 ¨C Actions ¨C Reducers ¨C Effects,Generators ¡ñ Umi js as a UI framework
- 3. What is ReactJs ¡ñ API to develop User Interfaces ¨C View on MVC ¨C One way binding ¨C Reusable components ¨C Responsive ¨C React js vs React native ¡ñ Client base ¨C Facebook,Microsoft ¨C Netflix,Uber ¨C Espn,Wallmart ¨C BBC,Atalassian and more
- 4. Ant Design¡ñ Ant Design ¨C An Enterprise-class UI design language ¨C https://ant.design/ ¡ñ Ant Design of React ¨C UI components out of the box, based on React. ¨C http://react-component.github.io/badgeboard/ ¡ñ Ant Design Pro ¨C An out-of-box UI solution for enterprise applications ¨C Umijs(react,redux dva,jest,mockapi)+antD react components ¨C https://pro.ant.design/ ¡ñ Ant Design Mobile ¨C Mobile UI specification and React implementation. ¨C https://mobile.ant.design/
- 5. Main React constituents ¡ñ Virtual Dom ¡ñ JSX ¡ñ Props/PropTypes ¡ñ States ¡ñ LifeCycle
- 7. JSX ¡ñ Write code that looks like HTML ¡ñ ¡ñ ¡ñ Make large trees easier to read ¡ñ JSX Preprocessor ¨C converts JSX to javascript ¡ñ Babel ¨C a transpiler that turns code to be compatible with older browser ¡ñ Webpack ¨C Build tool/Auto refresh/Bundler
- 8. Props,proptypes and state ¡ñ Props ¨C pass parameters from parents to children components ¡ñ static propTypes = { incrementBy: PropTypes.number, }; ¨C Bool,number,string,func,array etc ¡ñ <Hello incrementBy={1}/> ¨C this.props.incrementBy ¨C Props are immutable ¡ñ State ¨C To manage state I e respond to user input ¨C SetState to update currentstate to next state ¨C Rerender on state change
- 9. Reactjs Life cycle ¡ñ 2 Major types ¨C Will methods¡ªCalled right before something happens ¨C Did methods¡ªCalled right after something happens ¡ñ Based on phase of life cycle ¨C Initialization¡ªWhen a component class is being instantiated. ¨C Mounting¡ªA component is being inserted into the DOM. ¨C Updating¡ªA component is being updated with new data via state or props. ¨C Unmounting¡ªA component is being removed from the DOM.
- 12. Redux ¡ñ Provide State management layer for React. ¡ñ Store ¨C Holds all application state in a single state tree ¨C Updated only with actions ¨C 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);
- 16. Generators ¡ñ Functions ¨C Can be paused and resumed ¨C Handle complex async events efficiently ¨C 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 }
- 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