React is a front end UI library. It has nothing to do with backend.
The most important concept in React is "Component", which is similar to "Widget" in Flutter. It is the basic unit of UI element.
There are two style to write a component, one is functional and the other is class. I personally find class-based syntax is more intuitive.
This video is great.
The following three code snippets are equivalent:
import React from "react";
const FunctionalComponent = () => {
return <h1>Hello, world</h1>;
};
import React from "react";
function FunctionalComponent() {
return <h1>Hello, world</h1>;
}
import React from "react";
class ClassComponent extends React.Component {
render() {
return <h1>Hello, world</h1>;
}
}
An react element can look like this:
const element = <div />;
but it can also look like this: where name
is like field and Sara
is like arguments to pass into functions. We call {Sara}
props (think as a dictionary of arguments).
const element = <Welcome name="Sara" />;
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
The following codes are equivalent:
const FunctionalComponent = ({ name }) => {
return <h1>Hello, {name}</h1>;
};
const FunctionalComponent = (props) => {
return <h1>Hello, {props.name}</h1>;
};
class ClassComponent extends React.Component {
render() {
const { name } = this.props;
return <h1>Hello, { name }</h1>;
}
}
The following two snippets are equivalent:
const FunctionalComponent = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>Click</button>
</div>
);
};
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>count: {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click
</button>
</div>
);
}
}
The following two snippets are equivalent:
const FunctionalComponent = () => {
React.useEffect(() => {
console.log("Hello");
}, []);
return <h1>Hello, World</h1>;
};
class ClassComponent extends React.Component {
componentDidMount() {
console.log("Hello");
}
render() {
return <h1>Hello, World</h1>;
}
}
When the ref
attribute is used on an HTML element, the ref
callback receives the underlying DOM element as its argument.
render() {
return (
<div
style={{ width: '400px', height: '400px' }}
ref={(mount) => { this.mount = mount }}
/>
)
}
this.mount
will hold a reference to the actual <div>
the component is mounted to.
The following two snippets are equivalent:
const FunctionalComponent = () => {
React.useEffect(() => {
return () => {
console.log("Bye");
};
}, []);
return <h1>Bye, World</h1>;
};
class ClassComponent extends React.Component {
componentWillUnmount() {
console.log("Bye");
}
render() {
return <h1>Bye, World</h1>;
}
}
Table of Content