Isn't React that clear? Don't you fully understand how/why you should use it on your apps and why it gained all this attention? Do you want to learn the basics and to understand why it's so powerful?
This coffee@DBG will explore how this library works and you will discover and understand its main concepts in details. At the end of this session you'll learn main concepts like Components, Virtual DOM, One-way data binding etc.
Components
JSX
Data for component
The component lifecycle
Component Methods
Component Breakdown
5. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
6. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
7. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
“The way we are able to figure this out is that React does
not manipulate the DOM unless it needs to.
It uses a fast, internal mock DOM to perform diffs and
computes the most efficient DOM mutation for you.”
- React Doc
8. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
var msg = 'Bad';
$userMsg.html( '<p>I love Breaking ' + msg );
var data = {
'user_id' : 13,
'user_name' : 'W.W',
'user_msg' : 'I am the one who knocks!'
};
$chatList.append(
[
'<li class="chat__msg-wrap">',
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>',
'<span class="chat__user-name">' + data.user_name + '</span>',
'<span class="chat__user-msg">' + data.user_msg + '</span>',
'</li>'
].join();
);
9. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
var msg = 'Bad';
$userMsg.html( '<p>I love Breaking ' + msg );
var data = {
'user_id' : 13,
'user_name' : 'W.W',
'user_msg' : 'I am the one who knocks!'
};
$chatList.append(
[
'<li class="chat__msg-wrap">',
'<img class="chat__user-img" src="' + getUserImg(data.user_id) + '"/>',
'<span class="chat__user-name">' + data.user_name + '</span>',
'<span class="chat__user-msg">' + data.user_msg + '</span>',
'</li>'
].join();
);
10. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
11. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
12. ❖ Implements a virtual DOM
❖ Allows us to render components super fast
❖ Removes any unnecessary overhead from DOM operations
❖ Deal with the "V" of any MVC framework
16. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too
17. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too
18. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too
19. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too
20. ❖ Each component is contained in its own "scope"
❖ Define the functionality and reuse it as many times
❖ Has a render function, which returns the HTML the component will render in the
browser
❖ We can call other React component's too
23. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer
24. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer
25. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer
29. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer
30. ❖ Write HTML inside of Javascript without having to wrap strings around it
❖ We don't have to worry about strings and multiple lines etc
❖ Transform the JSX in the browser on runtime - not recommended as it slows down your page
❖ Both gulp and grunt offer a JSX transformer
32. var ExampleComponent = React.createClass({
render: function () {
return (
<div className="navigation">
Hello World!
</div>
);
}
});
33. var ExampleComponent = React.createClass({
render: function () {
return (
React.createElement('div', {className: 'navigation'},
'Hello World!')
);
}
});
❖ You don't have to use JSX
❖ Using className since class is a reserved word in Javascript
❖ JSX transforms the code, changes all the attributes on the node into an object
35. var ExampleComponent = React.createClass({
render: function () {
var navigationClass = 'navigation';
return (
<div className={ navigationClass }>
Hello World!
</div>
);
}
});
❖ Dynamically change the class of a component
❖ Wrap it around a set of curly braces, so JSX knows that it is an external variable
37. var ExampleComponent = React.createClass({
render: function () {
var navigationClass = 'navigation';
return (
<div className={ navigationClass }>
Hello World!
</div>
);
}
});
ReactDOM.render( <ExampleComponent />, document.body );
❖ Tell React which component to render, and point to an existing DOM node for where to render it
49. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI
50. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI
51. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI
52. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI
53. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI
54. ❖ State is the private data within each instance of components
❖ State is accessed via “this.state”
❖ State is mutable, do whatever we want
❖ Usually we hook those data into state that represent UI
❖ Changing state will re-render UI
61. var ExampleComponent = React.createClass({
componentWillMount: function () {
// hide any loading screens
// remove any placeholders
},
render: function () {
// this gets called many times in a components life
return (
<div>
Hello World!
</div>
);
}
});
63. var ExampleComponent = React.createClass({
componentDidMount: function () {
// render a chart on the DOM node
// bind events to window, like resize
},
render: function () {
return (
<div>
Hello World!
</div>
);
}
});
92. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
93. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
94. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
“This paves the way to writing components that can
be shared between the web version of React and
React Native. We don’t expect all the code in an app to
be shared, but we want to be able to share the
components that do behave the same across platforms.”
- React v0.14 release blog
95. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
96. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
97. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
98. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);
“...it has become clear that the beauty and essence of
React has nothing to do with browsers or the DOM.”
- React v0.14 release blog
99. ❖ Enter “React Native”, and also - “React Art”, “React Canvas” and “React Three”
❖ Deprecated: “react-tools” package and “JSXTransform.js”
❖ React namespace split into React and ReactDOM
❖ React keep core functionalities for creating components
❖ ReactDOM for rendering in DOM
React.render(<SayMyName name={ myName } />, document.body);
ReactDOM.render(<SayMyName name={ myName } />, document.body);