Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
José Padilla /jpadilla1
Slide 3
Slide 3 text
What’s React?
Slide 4
Slide 4 text
An open-source JavaScript library for creating user interfaces.
Slide 5
Slide 5 text
AKA: The V in MVC
Slide 6
Slide 6 text
Let’s take a step back.
Slide 7
Slide 7 text
What is a web application made of anyway?
Slide 8
Slide 8 text
Recommended structure • Separate files for your HTML, CSS and JavaScript • Link your CSS and JavaScript files in your HTML
Slide 9
Slide 9 text
What React encourages • HTML and CSS in JavaScript • Let JavaScript take complete control of your app
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Yes. HTML will live in your JavaScript. Yes. CSS will live in your JavaScript. Yes. JavaScript will control everything.
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
React seems wrong, why should I use it?
Slide 14
Slide 14 text
Components
Slide 15
Slide 15 text
Hello World example
Slide 16
Slide 16 text
Everything in React is a component
Slide 17
Slide 17 text
Reduce coupling. Increase cohesion.
Slide 18
Slide 18 text
Coupling The degree to which each program module relies on each of the other modules.
Slide 19
Slide 19 text
Cohesion The degree to which the elements of a module belong together.
Slide 20
Slide 20 text
Use components to separate your concerns.
Slide 21
Slide 21 text
Components are reusable.
Slide 22
Slide 22 text
Components are composable.
Slide 23
Slide 23 text
Components are unit testable.
Slide 24
Slide 24 text
Virtual DOM
Slide 25
Slide 25 text
Re-render the whole app on every update
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Extremely fast.
Slide 28
Slide 28 text
http://run.plnkr.co/plunks/Wwgjjpl9NHMO5Nd1TUyN/ DB Monster
Slide 29
Slide 29 text
https://www.youtube.com/watch?v=x7cQ3mrcKaY Pete Hunt: React: Rethinking best practices
Slide 30
Slide 30 text
http://builtwithreact.io User interfaces built with React.
Slide 31
Slide 31 text
Other tools used with React Redux
Slide 32
Slide 32 text
Thank you.