Tweet
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.