React JS

A javascript Library for building User Interfaces

Some people prefer a more all emcompassing framework

Some people prefer a more all emcompassing framework

React

Web components

Virtual DOM

DOM object representation in javascript

Faster than DOM

Reconciliation algorithm (Diff)

Virtual DOM

Build components , no templates

Display logic with javascript

No controllers 

No Directives

No templates

No Filters 

Composable

Component

Re render the whole app on every update

90's full page refresh

Each rendering is a image of the new state

Inmutable states

Avoid expensive DOM operations

Minimize access to the DOM

Pure JS in memory, represent the DOM

DIff algorithm: miminum set of DOM mutation

Batch update

Faster, pure , optimized

New Image of the state

Events cross browser

created on the top of the DOM

Events are controlled by the Target

A javascript library for building UI

In general we resist adding features that can be implemented in userland. We don't want to bloat your apps with useless library code.

• React Docs

https://facebook.github.io/react/contributing/design-principles.html

High quality with pure functions

Predictable: easy to understand & Easy to test

Reuse more code 

Easier to reason about

Less bugs , Less time

Composition over Inheritence

Pure functions  f() => view 

Inmutable Data

Single source of truth

Composition

Unidirectional data flow

Unidirectional Data Flow

Parent to Children : props and callbacks

Child to parent: actions ( use of callbacks)

Single source of truth

Redux

No use a traditional separation of concerns

Predictable behavior

Redux

Actions

Redux

Reducers and dispatcher

Redux

Redux

Actions

 

Redux

RootReducer

 

 

Redux

Search Reducer

 

Redux

Config Store

Redux

React and Redux 

Redux

Small api

Architectural Pattern

Emite updates and response actions

Store state and notify about changes

React-Redux

A lot of magic to make everything fast

Minimize the amount of call to render

ShouldComponentUpdate method in react cycle

Scalable applications

Scalable applications

Users: User experience 

Developers: Ecosystem, styling , fetching

Testable  & maintainable

High Performance

Create your first React App

Create your First React App

Create your First React App

React App

React Router

inline,   Css Module , styled Components

jQuery

Promesas

Redux-thunk, Redux promise , redux sagas

Huge Ecosystem

React App

A lot of react Boilerplate

React App

React App

Redux (Flux)

Mobx

Relay : graphQL

React = Freedom

Community

React = Freedom

Preact

Inferno

VueJs

React Ecosystem

React Web

React Native

React Virtual Reality

 a better future :) ....

React Server Side Rendering

React SSR

React SSR

React Fiber

React Pros

• Only Javascript  (functions or classes)

• You can start in more or less  1 minute (yarn)

• Oriented to components

• Freedom

• Virtual DOM and Syntetic Events

• Functional Programing  

• One directional flow

• High scalable and testable

• less bugs thanks to explicit data flow and lack of manual DOM management

• single source of truth

React Cons

• Intermediate or advanced level in Javascript

• Change of paradigm

• Freedom

• Different way to work with the DOM

• React makes what they consider enough

• Look into others libraries to create your own app

• Redux is a lot of boilerplate code (JS fatigue)

• CLI official

Gracias !

Questions ?

http://coenraets.org/present/react/

https://www.slideshare.net/nikgraf/react-redux-introduction

https://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome?next_slideshow=1

https://www.slideshare.net/jaisanth/react-js

https://speakerdeck.com/jjrofriloc/react-dot-js-an-introduction

http://slides.com/johnlynch/reactjs#/

https://thebhwgroup.com/blog/intro-to-react

http://benchling.engineering/performance-engineering-with-react/

https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

https://css-tricks.com/project-need-react/

https://medium.com/@dan_abramov/hey-thanks-for-feedback-bf9502689ca4