Post on 20-Mar-2017
Embed Size (px)
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
f(d) = v
d = state,props
What is React
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 :
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).
State & props
State : data that is associated with the componentProps : variables passed from the parent to the component
Enforce properties type.
JSX is always going to get transpiled to React.createElement invocations via babel JSX is only an abstraction over React.createElement
React.createElement( "div", null, React.createElement( "p", null, "Hello There" ) );
Hello There JSX Transpiler(babel REPL)
Presentational & container components(smart & dumb)
When you Have different concerns it is time to split