presentation react

Hamza

@ham_ism

React.js For Humans

@ham_ismismnoiet@gmail.com

Oran tech meetup - March 4th, 2017

We’ve got stickers

• What is react • React Element • React Component • State & props • Proptypes • JSX • Lifecycle Hooks • Presentational & container components

Table of Content

React is a library for building user interfaces.

What is React

React.js

Ember.js

Angular.js 2

Angular.js 1

Stats

f(d) = v

d = state,props

What is React

React Element

Once react element is rendered it can’t be updated (it represents the state of UI at a given time).

Is a plain object representation of a DOM node.Is not what you are going to see in the screen.Can be composed of other react components.

Reconciliation is the process of generating an object representation of the DOM and is performed :

React Element

Every time setState or ReactDOM.render is called.

When the state changes the react component is re-rendered (thanks Virtual DOM)

Components are the building blocks for react.

A component is a class or a function that optionally accepts input and returns a react element.

If a component is a function then it is stateless(has no state and no event hooks).

React Component

State & props

State : data that is associated with the componentProps : variables passed from the parent to the component

Proptypes

Enforce properties type.

JSX is always going to get transpiled to React.createElement invocations via babel JSX is only an abstraction over React.createElement

JSX

JSX is simply a Javascript code with the declarativeness and familiarity of HTML

React.createElement( "div", null, React.createElement( "p", null, "Hello There" ) );

<div> <p>Hello There</p> </div> JSX Transpiler

(babel REPL)

JSX

constructorcomponentWillMountrendercomponentDidMountblabla…

componentWillUnmount

…

Lifecycle Hooks(events)

Presentational & container components(smart & dumb)

When you Have different concerns it is time to split

Questions

?

https://www.reddit.com/r/reactjs/comments/5gmywc/what_were_the_biggest_aha_moments_you_had_whilehttps://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html

https://facebook.github.io/react

https://www.youtube.com/watch?v=kp-NOggyz54https://egghead.io/courses/getting-started-with-redux

https://medium.com/@learnreact/container-components-c0e67432e005#.kjold6xbv

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

Resources