Internal workshop react-js-mruiz
-
Upload
miguel-ruiz-rodriguez -
Category
Software
-
view
156 -
download
1
Transcript of 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