Introduction to React 

@GoyeSays

Carlos Goyeneche

@GoyeSays

https://github.com/Goye

Some time ago the web world looks like this...

Amazon.com - 1994

oh dude, what was that?

A history of Javascript Frameworks

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

  • 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

What is ReactJS?

A library for creating user interfaces​

but is more about the same?

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

+

What is ReactJS?

Traditional MV* separation of concerns

Model Controller ModelView View
Data Display logic Database data Templates

A lot of complexity

What is ReactJS?

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

JSX

What is ReactJS?

Markup with code

What is ReactJS?

Markup with code

Markup and display logic both share the same concern

Pete hunt - Ex-Facebook and Instagram

What is ReactJS?

JSX

import React from 'react';

const Button = () => {
  return (
    <button>
      Hey! I'm a button
    </button>
  );
};

export default Button;

What is ReactJS?

JSX

That's ugly but functional

What is ReactJS?

Props

import React from 'react';

const Button = (props) => {
  return (
    <button name={props.name}>
      Hey! I'm a button
    </button>
  );
};

const Container = () => {
  return (
    <Button name="save" />
  );
};

export default Button;

What is ReactJS?

Props vs State

What is ReactJS?

Everything is a component!

What is ReactJS?

Everything is a component!

What is ReactJS?

Virtual DOM

 

Re-rendering everything on every update:

 

  • Create lightweight description of component UI
  • Diff it with the old one
  • Compute minimal set of changes to apply to the DOM

What is ReactJS?

Virtual DOM

 

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

More cool stuff!

Questions?

https://github.com/Goye

Thanks a lot!

https://github.com/Goye

Introduction to React (Design)

By Carlos Goyeneche

Made with Slides.com

Introduction to React (Design)

Introduction to reactJS

  • 351

More from Carlos Goyeneche