A presentation About React.js explaining the core concepts in the most simple way.

1. Hamza
@ham_ism
React.js For Humans
@ham_ism
ismnoiet@gmail.com
Oran tech meetup - March 4th, 2017

3. We’ve got stickers

4. • What is react
• React Element
• React Component
• State & props
• Proptypes
• JSX
• Lifecycle Hooks
• Presentational & container components
Table of Content

5. React is a library for building user interfaces.
What is React

6. React.js
Ember.js
Angular.js 2
Angular.js 1
Stats

7. f(d) = v
d = state,props
What is React

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

9. 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)

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

11. State & props
State : data that is associated with the component
Props : variables passed from the parent to the component

12. Proptypes
Enforce properties type.

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

14. React.createElement(
"div",
null,
React.createElement(
"p",
null,
"Hello There"
)
);
<div>
<p>Hello There</p>
</div>
JSX Transpiler
(babel REPL)
JSX

15. constructor
componentWillMount
render
componentDidMount
blabla…
componentWillUnmount
…
Lifecycle Hooks(events)

16. Presentational & container components(smart & dumb)
When you Have different concerns it is time to split

17. Questions
?

18. https://www.reddit.com/r/reactjs/comments/5gmywc/what_were_the_biggest_aha_moments_you_had_while
https://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-NOggyz54
https://egghead.io/courses/getting-started-with-redux
https://medium.com/@learnreact/container-components-c0e67432e005#.kjold6xbv
https://github.com/facebookincubator/create-react-app
Resources