Introduction to React.js

Transcript

1. Introduction to React Annika Sundberg
2. What is React? “React isn’t an MVC framework. It’s a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.” https://facebook.github.io/react/blog/2013/06/05/why-react.html
3. Presentation Outline 1. Introduction 2. History & philosophy of React 3. Framework vs library 4. Getting started 5. Resources
4. Introduction
5. Trending tech on Stack Overflow (2016 survey answered by 56,000 coders)
6. npm trends (npm.trends react vs angular vs backbone)
7. History & philosophy
8. ‘jQuery soup’
9. Single page apps - Enable you to write one file per view and then attach a template to it. - Backbone used to be the most popular one. - In Backbone you call a render function which updates the DOM. - But updating the DOM is expensive . . .
10. Virtual DOM patching
11. Backbone vs React DOM updating
12. Framework vs Library
13. FRAMEWORK: - It calls you - It’s in control - Brings together common functionality - lets you focus on the unique parts of your app - Examples: Angular, Backbone LIBRARY: - You call it - You’re in control - Packages of code that get called by your app to perform a task - Examples: React, jQuery
14. Getting started
15. Starting point
16. React Components & Render function JSX
17. Passing on properties (parent-to-child) Property passed to the child component (Question)
18. Changing state
19. Communication between child & parent Property given to ‘Answer’ by the parent component, which calls a function declared there
20. Resources: - Create-React-App: https://github.com/facebookincubator/create-react-app - https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ - Egghead - React Fundamentals: https://egghead.io/courses/react-fundamentals - Another great tutorial I used: reactjsprogram.com - JSX: https://facebook.github.io/jsx/ - Coming to React from Angular: http://blog.stridenyc.com/blog/coming-to-react-from-angular/ - Another interesting read comparing Angular & React: https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker