reactjs basic concepts
TRANSCRIPT
ReactJS Basic Concepts
by Vlad Costel Ungureanufor “Learn Stuff” and “Pentalog
Romania”
ReactJS Basic Concepts
React JS
DOM
Virtual DOM
JSX
Inheritance
React Components
React Rendering
React Patterns
2
React JS
3
React JS is a library, not a framework
While it provides an CLI it does not provide the necessary scaffolding to build and organize applications
Other frameworks or libraries may be required in order to build complex apps
It is easy to learn, flexible and very fast
Strong support from FB and the developers community
Rich documentation, examples and 3rd party components
Can be embedded in any application regardless of the used UI technologies (some easier than others )
Emerging trend
DOM
4
DOM stands for Document Object Model and is an abstraction of a structured text
DOM is a memory representation of the text abstraction interpretation
DOM
5
Browser has to parse the HTML
It removes the child element of element identifier
Updates the DOM with the “New Value”
Re-calculate the CSS for the parent and child
Update the layout i.e. each elements exact co-ordinates on the screen
Traverse the render tree and paint it on the browser display
Virtual DOM
6
Virtual DOM is in-memory representation of Real DOM. It is lightweight JavaScript object which is literally a copy of Real DOM
At any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM.
When something changes, ReactJS determines the diffs between Virtual DOMs through “Reconciliation”, groups the updates in batches and then applies changes to the Real DOM
Is better because:Efficient diff algorithm
Batched update operations
Efficient update of sub tree only
Uses observable instead of dirty checking to detect change
Usage of keys to mark nodes that should not update, especially when working with child nodes
JSX
7
JSX is the happy union of JS and HTML resulting in a XML structure powered by all JS functionalities
JSX produces React “elements”
React DOM escapes any values embedded in JSX before rendering them
JSX is compiled using babel
JSX can accommodate and JS valid expression
JSX
8
JSX example:
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(element, document.getElementById('root'));
JSX
9
JSX example:
<div className="red"> Children Text </div>;
<MyCounter count={3 + 5} />;
// Here, we set the "scores" attribute below to a JavaScript object.var gameScores = { player1: 2, player2: 5 };
<DashboardUnit data-index="2"><h1>Scores</h1><Scoreboard className="results" scores={gameScores} />
</DashboardUnit>;
JSX
10
How ReactJS sees it:
React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 + 5 });
var gameScores = { player1: 2, player2: 5 };
React.createElement( DashboardUnit, { "data-index": "2" },React.createElement("h1", null, "Scores"),React.createElement(Scoreboard, { className: "results", scores:gameScores })
);
JSX
11
Create Element in ReactJS:
JS Inheritance
12
React Components
13
import React, { Component } from 'react’;
export class About extends Component {
constructor(props){
super();
console.log(‘Constructed About Component!');
}
render() {
return (
<div className="container">
<h1> About </h1>
</div>
);
}
}
export default About;
React Rendering
14
Unlike browser DOM elements, React elements are plain objects, and are cheap to create.
React DOM takes care of updating the DOM to match the React elements.
React elements are immutable. Once you create an element, you can’t change its children or attributes.
Rendering method tell React how to display the component
Most React apps only call ReactDOM.render() once.
React Patterns
15
Composite Design Pattern
React Patterns
16
Composite Design Pattern
React Patterns
17
Decorator Design Pattern
React Patterns
18
Decorator Design Pattern
Vlad Costel [email protected]
This is a free course from LearnStuff.io – not for commercial use –
THANK YOU!