presentation react

Download Presentation react

Post on 20-Mar-2017

117 views

Category:

Engineering

1 download

Embed Size (px)

TRANSCRIPT

  • Hamza

    @ham_ism

    React.js For Humans

    @ham_ismismnoiet@gmail.com

    Oran tech meetup - March 4th, 2017

    mailto:ismnoiet@gmail.com?subject=

  • 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

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

    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)

    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

    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.htmlhttps://facebook.github.io/reacthttps://www.youtube.com/watch?v=kp-NOggyz54https://egghead.io/courses/getting-started-with-reduxhttps://medium.com/@learnreact/container-components-c0e67432e005#.kjold6xbvhttps://github.com/facebookincubator/create-react-app