Internal workshop react-js-mruiz

ReactA JS library for building user interfaces

What we will see...● Meet React

● Fundamentals

● Components + JSX

● Props, PropType and State

● React Lifecycle

● Demo

● Want more?

Introduction

1. Not jet another JS Framework

2. Just a library for creating User

Interfaces

3. Renders your UI and respond to

events

> ReactJS has no...

● Controllers

● Directives

● Templates

● Global Event listeners

● Models

> Just components!

First fundamental...

Everything is a COMPONENT

> Changes always flow

down via props, never

up

> Callbacks and

actions will flow up

Second fundamental...

Unidirectional Data Flow

1. React builds a new

virtual DOM subtree

2. Diffs it with the

old one

3. Computes the

minimal set of DOM

mutations and puts

them in a queue

4. Batch executes all

updates

Third fundamental…

Virtual DOM Makes re-rendering on

every change fast

Creating components

“We think that markup and the code that generates it are intimately tied together”

React Docs

● Every component has

state and props

● Data is handled from

parent to child

● Owner-ownee VS

Parents-Children

● It acts as an

inmutable DOM and re-

render de app once

the state changes

wait...what´s {that}?...Angular?

Component example

JSX

{}

> Why should we learn

another template

language?

JSX

JSX → Javascript Syntax

Extension that looks

similar to XML

1. JSX is faster because

it performs

optimization while

compiling code to

JavaScript

2. It is also type-safe

and most of the

errors can be caught

during compilation

JSX

> Easy right? React conversions

Props, PropTypes & State

> Used to pass parameters

from parent to childrenProps

PropTypes> Used to catch a lot of

bug by typechecking props

> When should I use

state?

Respond to user input

Server requests

The passage of time

> Calling setState({...})

re-renders the component

State

> When should I use

state?

Respond to user input

Server requests

The passage of time

> Just use props to pass

data & event handlers

down to your child

components.

Props vs State

React Lifecycle

> componentDidMount()

Make an Ajax request to

fetch some data needed

for this component

> componentWillUnmount()

Remove any listeners you

initially set up

> componentDidMount()

Set up any listeners (ie

Websockets or Firebase

listeners)

https://staminaloops.github.io/

undefinedisnotafunction/images/

react-lifecycle.jpg

Lifecycle

> Demo has:

- Webpack (Babel &

Imports)

- React Hot Loader

- Bootstrap 3

> Steps to reproduce:

- git clone

https://github.com/B

ackSpaceTech/react-

bootstrap-

boilerplate

- npm i && npm start

DEMO TIME

What more…?React Native

Flux

Redux

ES6 Internal Workshop

Thanks!

migueloop.github.io