Introduction to React

@GoyeSays

Carlos Goyeneche

@GoyeSays

https://github.com/Goye

Questions about the last session?

Introduction To React Ecosystem

What is ReactJS?

A library for creating user interfaces

but is more about the same?

https://facebook.github.io/react/

A bit of history

2006 - jQuery is the best framework!

DOM manipulation, Ajax, Effects and animations, among others.

2009 - 2012 MVC, MVVM, MVP

My MVC is better than your MVC

My MVVM is better than your MVC

My MVC is better than you MVVM

The frameworks pattern

“Cool” Framework comes out
Learn “Cool” Framework
Create “Cool” web app
Next year…
“COOLER” Framework comes out
Abandon “Cool Legacy” web app
Learn “COOLER” Framework
Build new and improved “COOLER” web app
Rinse, Wash, Repeat

Framework vs components - https://goo.gl/iU3BEo

Introduction To React Ecosystem

Traditional MV* separation of concerns

A lot of complexity

Model	Controller	ModelView	View
Data	DisplayLogic	Database data	Template

Introduction To React Ecosystem

https://facebook.github.io/react/

What is ReactJS?

Everything is a component!

Web Components are a set of features currently being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications.

https://www.webcomponents.org/

Web Components the new Light

https://www.webcomponents.org/

Custom Elements
Shadow DOM
HTML Imports
HTML Templates

Web Components the new Light

@michaellnorth

HTML IMPORTS

require() for HTML
onload, onerror events
can bring in css/html/js
closure-like js characteristics

Web Components the new Light

@michaellnorth

CUSTOM ELEMENTS

Custom HTML vocabulary
Life-cycle
Extensibility

Web Components the new Light

@michaellnorth

HTML TEMPLATES

Insert HTML in the DOM
Goodbye handlebars/jade/etc…

Web Components the new Light

@michaellnorth

SHADOW DOM

CSS Encapsulation
DOM encapsulation
Each component has own subtree in parent page

Web Components the new Light

@Goye

HTML TEMPLATE EXAMPLE

<template id="customTemplate">
  //Css
  <style type="text/css">
    .title {
    	text-transform: uppercase;
    }
  </style>
  //Script
  <script type="text/javascript" />
  //Content
  <div class="main">
    <h3> Hello everyone! </h3>
  </div>
</template>

//Grab the template
var tmpl = document.querySelector('#customTemplate');
//Add the fragment to the DOM
document.body.appendChild(
  document.importNode(tmpl.content, true)
);

Web Components the new Light

Shadow DOM

Document

Custom Component

Shadow DOM

Web Components the new Light

Shadow DOM - CSS Encapsulation

Shadow DOM

@michaellnorth

Web Components the new Light

Shadow DOM

@Goye

Imperative vs Declarative programming

Imperative	Declarative
Explicit instructions	Describe the outcome
The system is stupid, you're smart	The system is smart, you don't care
Ultimate flexibility	Limited flexibility

Rackspace

How vs What

Imperative vs Declarative programming

Imperative

Declarative

Go to kitchen
Open fridge
Remove chicken from fridge
...
Bring food to table

I want a dinner with chicken.

What's NPM?

"Easy, fast, robust, and consistent package manager"

https://www.npmjs.com/

What's BabelJS?

https://babeljs.io/

Use next generation JavaScript, today.

What's WebpackJS?

https://webpack.js.org/

Bundle your styles
Bundle your scripts
Bundle your assets

First React Component - Homework!

https://github.com/facebook/create-react-app

More cool stuff!

Questions?

https://github.com/Goye

Thanks a lot!

https://github.com/Goye