What is JSX?
- JSX is faster than Javascipt
How to use Javascript in JSX?
- Put Javascript code inside the braces
[js]
<pre>class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => alert(‘click’)}>
{this.props.value}
</button>
);
}
}
[/js] - If onClick={alert(‘click’)} is set, immediately alert instead of when button is clicked
How to use if/else in JSX?
How many ways are there to create an element in JSX?
- Method 1
[js]
const element = (<h1 className="greeting">
Hello, world!
</h1>);
[/js] - Method 2
[js]const element = React.createElement(
‘h1’,
{className: ‘greeting’},
‘Hello, world!’
);[/js] - Method 3
[js]// Note: this structure is simplified
const element = {
type: ‘h1’,
props: {
className: ‘greeting’,
children: ‘Hello, world’
}
};[/js] - Actually, method 3 is the result of 2
Why does React have good performance on loading DOM elements?
What are important when writing code
- Child component (functional component) shouldn’t have its own state
Its own state value should be passed from parent component (controlled component) - Keep immutability
For example, call .slice() to copy array instead of mutating the existing array
Give an example of performance boost?
- Using for performance boost for larger number of dynamically created elements
[code]key = {i}[/code]
inside map() function will help React to update only necessary elements instead of re-rendering entire list when something change
- React compares element and its children to the previous one in order to apply only DOM update necessary
[js]
function tick() {
const element = (<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById(‘root’)
);
}setInterval(tick, 1000);[/js]
How to use ReatJS for old projects?
What is Component?
How many ways are there to create React component?
- There are 2 ways. One is create a Javascript function, the other way is to create a ES6 class
[js]function Welcome(props) {
return<h1>Hello, {props.name}</h1>
;
}[/js][js]class Welcome extends React.Component {
render() {
return<h1>Hello, {this.props.name}</h1>
;
}
}[/js] - A component must return an React element
How to write a React component class (component type) in Javascript
- In JSX
[js]
class ShoppingList extends React.Component {
render() {
return (<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
[/js] - In JavaScript
[js]
React.createElement(
"div",
{ className: "shopping-list" },
React.createElement(
"h1",
null,
"Shopping List for ",
props.name
),
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"Instagram"
),
React.createElement(
"li",
null,
"WhatsApp"
),
React.createElement(
"li",
null,
"Oculus"
)
)
);
[/js]
Check: Babel Tool Check
How to define a component state?
- First, add a constructor to the class to initialize the state
How to pass value from a component to another?
How to inspect a React component tree in browser devtools?
What is Props?
What is the difference between “pure” and “impure” functions?
- “Pure” function always returns same result with the same input but “impure function” does not
[js]// Pure function
function sum(a, b) {
return a + b;
}[/js][js]// Impure function
function withdraw(account, amount) {
account.total -= amount;
}[/js]