Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

React Redux AntD and Umi js

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Redux Saga - Under the hood
Redux Saga - Under the hood
Cargando en…3
×

Eche un vistazo a continuación

1 de 20 Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a React Redux AntD and Umi js (20)

Anuncio

Más reciente (20)

Anuncio

React Redux AntD and Umi js

  1. 1. Reactjs,Redux,AntD and Umi js By:Isuru Samaraweera
  2. 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. 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. 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. 5. Main React constituents ● Virtual Dom ● JSX ● Props/PropTypes ● States ● LifeCycle
  6. 6. Virtual Dom ● ●
  7. 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. 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. 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.
  10. 10. componentwillreceiveprops <Component value={15} />
  11. 11. 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
  12. 12. Actions and reducers ● Javascript obect representing event {type: 'CREATE_POST', payload: { body: 'This is body' }} ●
  13. 13. 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);
  14. 14. Asynchronous calls
  15. 15. 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 }
  16. 16. Redux Saga Effects
  17. 17. ● 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 }, ● });}}
  18. 18. Umi js Dva based State management ● Sessionstorage ● Localstorage

×