presentation react

Download Presentation react

Post on 20-Mar-2017




1 download

Embed Size (px)


  • Hamza


    React.js For Humans

    Oran tech meetup - March 4th, 2017

  • Weve 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


    Angular.js 2

    Angular.js 1


  • f(d) = v

    d = state,props

    What is React

  • React Element

    Once react element is rendered it cant 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 is simply a Javascript code with the declarativeness and familiarity of HTML

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

    Hello There JSX Transpiler(babel REPL)


  • constructorcomponentWillMountrendercomponentDidMountblabla


    Lifecycle Hooks(events)

  • Presentational & container components(smart & dumb)

    When you Have different concerns it is time to split

  • Questions