A React Journey
2 likes943 views
The document provides an overview of trends in the React ecosystem. It introduces React concepts like components, props, state and lifecycles. It also discusses tools like Babel and Webpack. For state management, it covers Redux and MobX. Redux uses a single state tree, pure functions called reducers, and actions to change state. MobX uses observable state and computed values. The document also summarizes routing with React Router, and React bindings for Redux like react-redux and middleware like redux-saga and redux-thunk.
![[Fevr] Can't live if livin' is without rendering](https://cdn.slidesharecdn.com/ss_thumbnails/presentation-171129171603-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to A React Journey (20)
Ad
More from LinkMe Srl (7)
Ad
Recently uploaded (20)
A React Journey
- 1. A React Journey A tour of the latest trends in the React ecosystem
- 2. JS Frontend Developer at LinkMe Srl Twitter: @_denb In love with React and Javascript in general. I’m a 7-month-old dad Daniele Bertella
- 3. JS Frontend Jr Developer at LinkMe Srl Twitter: @paolorovella In love with React and sushi, i’m an incurable tv shows binge watcher Paolo Rovella
- 4. React Ecosystem React JSX, State/Props, HoC, Routing State management Redux, Mobx Tools Babel, Webpack, CSS Modules, Testing
- 5. React React is a JavaScript library for creating user interfaces https://facebook.github.io/react
- 6. ReactMain concepts Just the UI React is only concerned about rendering UI Virtual DOM React uses a Virtual DOM Diff implementation for ultra-high performance Data Flow React introduces one-way reactive data flow
- 7. Components
- 8. ReactA basic component JSX is a XML-like syntax extension to ECMAScript JSX uses className because “class” in JavaScript is a reserved word
- 9. ReactProps Input data that is passed into the component and can be accessed via this.props The propTypes object allows you to validate props being passed to your components PropTypes validation provided https://facebook.github.io/react/docs/reusable-components.html#prop-validation
- 10. ReactState Internal state data A component can maintain internal state data (accessed via this.state) Re-render on state changes When a component's state data changes, the rendered markup will be updated by re-invoking render()
- 11. ReactComponent Lifecycles Various methods are executed at specific points in a component's lifecycle https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods
- 12. React ECMAScript 6 (ES6) is the upcoming sixth major release of the ECMAScript language specification. ES6 support is different among browsers (https://kangax.github.io/compat-table/es6/) You can use ES6 today thanks to transpilers like Babel ECMAScript 6 (ES6)
- 13. Babel Javascript compiler Transpile ES6/ES7 in ES5 (Classes / Destructuring / Arrow functions / Spread operator ...) http://babeljs.io http://babeljs.io/docs/learn-es2015/
- 14. ReactES5 to ES6 Classes ECMAScript 6 equivalents in ES5 by @addyosmani https://github.com/addyosmani/es6-equivalents-in-es5
- 15. React ES6 Destructuring ES6 Arrow function Expression that make it possible to extract data from arrays or object into dinstinct variables Shorter syntax compared to function expressions and binds the “this” value (not its own this). They are always anonymous
- 16. React ES6 Object Spread operator ES6 Decorators Copy properties from one object to another. The specification order is important Syntactic sugar which lets you annotate and modify classes at design time
- 17. ReactStateless Functional Components Kill boilerplate code Dumb and predictable component No state, no component lifecycles
- 18. ReactHigh Order Components Reuse other components functionalities Reduce duplication of code
- 19. ReactHigh Order Components Thanks @cef62 (Matteo Ronchi) https://speakerdeck.com/cef62/higher-order- components-in-react-at-voxxed-days-ticino-2016
- 21. State management
- 22. ReduxBy Dan Abramov (@dan_abramov) https://github.com/reactjs/redux Predictable state container for JavaScript apps. Three principles - Single source of truth - State is read only - Changes are made with pure functions
- 23. ReduxApp state App state described as a plain object This object is like a “model” except that there are no setters
- 24. ReduxActions The only way to mutate the state is to emit an action, an object describing what happened
- 25. ReduxReducers A function that takes previous state and action as arguments, and returns the next state of the app Split reducers in smaller functions managing parts of the state
- 26. ReduxReducers A reducer that manage the complete state can call other small reducers
- 27. ReduxAPI combineReducers Combine different reducers in one createStore Two arguments, combined reducers and persisted state (optional)
- 28. Redux subscribe Adds a change listener. Called any time an action is dispatched, and some part of the state tree may potentially have changed getState Returns an object with the current state tree of your application dispatch Dispatches an action. This is the only way to trigger a state change Store
- 29. Reduxreact-redux React bindings for Redux embrace the idea of separating presentational and container components.
- 30. Provider makes the store available to all container components in the app only need to use it once when you render the root component Reduxreact-redux
- 31. Reduxreact-redux connect(params)(Component) connects a React component to a Redux store. returns a new, connected component class
- 32. Reduxreact-redux mapStateToProps a function that tell how to transform the current Redux store state into the props you want to pass. mapDispatchToProps a function that receives dispatch() method and returns a callback props.
- 33. ReduxMiddlewares Suggested way to extend Redux with custom functionality They are called after an action is dispatched and before it reaches the reducer Multiple middlewares can be combined together
- 34. Redux Saga middleware let you create Sagas, which are generators responsible for orchestrating complex/asynchronous operations, to gather all your side effects logic in a central place Redux redux-thunk https://github.com/gaearon/redux-thunk Middlewares Redux Thunk middleware allows you to write action creators that return a function instead of an action The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met redux-saga https://github.com/yelouafi/redux-saga
- 35. MobXBy Michel Weststrate (@mweststrate) https://github.com/mobxjs/mobx MobX is a library that makes state management simple and scalable by transparently applying functional reactive programming
- 36. Functional reactive programming Functional reactive programming is programming with asynchronous data streams which you can listen to and react accordingly The introduction to Reactive Programming you've been missing https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
- 37. MobXStore (observable/computed) @observable state observable capabilities to objects, arrays and class instances annotating properties with the @observable decorator @computed values that will be derived automatically when relevant data is modified
- 38. @action action is anything that modify the state and is always triggered by some event (DOM events, websockets etc) MobXStore (action)
- 39. MobX @observer observer function / decorator is used to turn ReactJS components into reactive components. In this component store can be passed as a prop mobx-react
- 40. MobXFlow API overview https://mobxjs.github.io/mobx/refguide/api.html In-depth explanation of MobX https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth- explanation-of-mobservable-55995262a254