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

 

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

Introduction to React Ecosystem

By Carlos Goyeneche

Made with Slides.com

Introduction to React Ecosystem

Introduction to ReactJS

  • 323

More from Carlos Goyeneche