Download - Presentation react
Hamza
@ham_ism
React.js For Humans
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
