SlideShare a Scribd company logo

React basic by Yoav Amit, Wix

•Download as PPTX, PDF•
•
C
Chen Lerner

This document provides an overview of React including: - React components have state and props and use a render function. - Getting started with React requires including React and ReactDOM scripts in HTML. - Flux and Redux separate logic and views, with stores holding state and React rendering based on state. - Redux uses a single store to manage all application state and triggers events when state changes. - Testing React components can be done with Enzyme. - React Native allows building mobile apps using React and rendering native UI elements.

Related slideshows

Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7Integrating AngularJS with Drupal 7
Integrating AngularJS with Drupal 7
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
1 of 18
R E A C T
Who am I? • Background • Onavo • Battlehacks • OpenRest • Wix Restaurants yoava@wix.com https://github.com/3LOK
React – General Principle • You write components • Components have a state and props • Each components has a render function Render Props State Virtual DOM
React – Get Started <!DOCTYPE html><html><head> … <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://npmcdn.com/babel- core@5.8.38/browser.min.js"></script> … </head> <body style="direction:rtl" > <div id='main'></div> <script type="text/babel" src="index.jsx"></script> </body> </html>
React Hot • Live Coding • Lets see it in action…
• Separation of Logic (Flux, Reflux, Redux) and Views (React) • Store(s) - Hold the state. • React – Renders according to state. • Actions / Reducers – Update the store according to events Flux - ?
Flux - ? Stores (hold app state) React Components (transform app state to virtual dom) Actions update state
Redux • Components are divided to two – Dumb: No state, no actions, all props – Smart: State from store, wrap dumb components, calls actions • Store – Single Store. Stores all application state – Triggers event
Redux
Redux-Thunk (Basic) • Async Actions • Actions dispatch actions and accesses state
Redux-Saga (Advanced) • Generators • Write your code in stories (sagas) – Change the state to show a welcome screen – Wait for the user to press continue – Change the state to show the checkout process
Enzyme • JavaScript Testing Utility for React • Similar to jQuery
React Native • Why Mobile?
React Native render: function() { var movie = …; return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); }
React Native • Write in Javascript (ES6+) – Use all libraries you’re used to. • Code is bundled using WebPack into a single JS file. • React Native Infrastructure rubs code using JavaScriptCore • “Catches” UI elements generations and executes using OS API “Fast-forward a couple of months, and I’m confident enough to say I may never write an iOS app in Objective-C or Swift again” (link)
React – Two Common Pitfalls • Changing state and props directly (react and redux) • Not using ‘keys’ return ( <div> { restaurants.map((rest, index) => <Restaurant title={rest.title} description={rest.description} key={rest.id} /> )} </div> );
Conclusion • Webpack • React 15 • Redux • Redux-Saga • Enzyme + Mocha • React Native • Dan Abramov
Q u e s t i o n s ?

More Related Content

React basic by Yoav Amit, Wix

  • 1. R E A C T
  • 2. Who am I? • Background • Onavo • Battlehacks • OpenRest • Wix Restaurants yoava@wix.com https://github.com/3LOK
  • 3. React – General Principle • You write components • Components have a state and props • Each components has a render function Render Props State Virtual DOM
  • 4. React – Get Started <!DOCTYPE html><html><head> … <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://npmcdn.com/babel- core@5.8.38/browser.min.js"></script> … </head> <body style="direction:rtl" > <div id='main'></div> <script type="text/babel" src="index.jsx"></script> </body> </html>
  • 5. React Hot • Live Coding • Lets see it in action…
  • 6. • Separation of Logic (Flux, Reflux, Redux) and Views (React) • Store(s) - Hold the state. • React – Renders according to state. • Actions / Reducers – Update the store according to events Flux - ?
  • 7. Flux - ? Stores (hold app state) React Components (transform app state to virtual dom) Actions update state
  • 8. Redux • Components are divided to two – Dumb: No state, no actions, all props – Smart: State from store, wrap dumb components, calls actions • Store – Single Store. Stores all application state – Triggers event
  • 10. Redux-Thunk (Basic) • Async Actions • Actions dispatch actions and accesses state
  • 11. Redux-Saga (Advanced) • Generators • Write your code in stories (sagas) – Change the state to show a welcome screen – Wait for the user to press continue – Change the state to show the checkout process
  • 12. Enzyme • JavaScript Testing Utility for React • Similar to jQuery
  • 14. React Native render: function() { var movie = …; return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); }
  • 15. React Native • Write in Javascript (ES6+) – Use all libraries you’re used to. • Code is bundled using WebPack into a single JS file. • React Native Infrastructure rubs code using JavaScriptCore • “Catches” UI elements generations and executes using OS API “Fast-forward a couple of months, and I’m confident enough to say I may never write an iOS app in Objective-C or Swift again” (link)
  • 16. React – Two Common Pitfalls • Changing state and props directly (react and redux) • Not using ‘keys’ return ( <div> { restaurants.map((rest, index) => <Restaurant title={rest.title} description={rest.description} key={rest.id} /> )} </div> );
  • 17. Conclusion • Webpack • React 15 • Redux • Redux-Saga • Enzyme + Mocha • React Native • Dan Abramov
  • 18. Q u e s t i o n s ?