Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Writing Scalable React Applications: Introduction

Мы предлагаем курс из 2 лекций по React:

- Первая лекция: React Basics
- Вторая лекция: Dive into React

На первой лекции мы расскажем, что такое React и его плюсы/минусы по отношению к другим решениям. Второй вебинар, более практический, опишет, как писать приложения с использованием библиотеки React.

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Writing Scalable React Applications: Introduction

  1. 1. Web history
  2. 2. React is small
  3. 3. Development tools
  4. 4. Trending
  5. 5. Prerequisite
  6. 6. Babel ▫ babel-preset-react ▫ babel-preset-es2015 ▫ babel-plugin-transform-class-properties
  7. 7. What is React? ▫ No models ▫ No controllers ▫ No templates ▫ No directives ▫ No services ▫ Only components
  8. 8. React Components
  9. 9. EmployeeList
  10. 10. JSX ▫ Syntax sugar for Javascript ▫ Similar to HTML ▫ Still Javascript ▫ HTML attributes = JSX properties ▫ Transpiled by Babel
  11. 11. JSX after transpile
  12. 12. EmployeeListItem
  13. 13. Lifecycle Methods
  14. 14. Component state
  15. 15. Use state in render
  16. 16. Add handlers
  17. 17. Use function passed via props
  18. 18. Break UI into components Establish communication between components using props
  19. 19. Virtual DOM ▫ Result of render() ▫ Simple object representing DOM ▫ Very fast
  20. 20. Virtual DOM benchmarks
  21. 21. Render 1000 elements
  22. 22. Reconciliation ▫ Initial render() call ▫ Save result (snapshot) ▫ Update component (setState or props change) ▫ Lifecycle methods ▫ Call render() ▫ Compare snapshots ▫ Update only changed nodes
  23. 23. Updating DOM node
  24. 24. To be continued.. ▫ Lifecycle methods ▫ DOM events ▫ Application structure ▫ Data organization
  25. 25. Read this ▫ React docs ▫ Presentational and Container Components ▫ Higher Order Components ▫ Webpack ▫ Babel
  26. 26. Questions?

×