Function Component
const MyComponent = (props) => {
return (
<elementOrComponent ../>
);
}
Class Component
class MyComponent extends React.Component {
render () {
return (
<elementOrComponent ../>
);
}
}
Virtual DOM and JSX
jsComplete: https://jscomplete.com/repl/
mountNode.innerHTML = 'Hello!';
const Button = function () {
return (
// <button>Go</button>
React.createElement("button", null, "Go")
);
}
ReactDOM.render(<Button />, mountNode);
const Button = function (props) {
return (
<button>{props.label}</button>
);
}
ReactDOM.render(<Button label="Do" />, mountNode);
const Button = (props) => {
return (
<button>{props.label}</button>
);
}
ReactDOM.render(<Button label="Do" />, mountNode);
Class Component
class Button extends React.Component {
render () {
return (
<button>5</button>
);
}
}
ReactDOM.render(<Button />, mountNode);
class Button extends React.Component {
constructor(props) {
super(props);
this.state = { counter: 10 };
}
render () {
return (
<button>{this.state.counter}</button>
);
}
}
ReactDOM.render(<Button />, mountNode);
class Button extends React.Component {
// constructor(props) {
// super(props);
// this.state = { counter: 10 };
// }
state = { counter: 10 };
render () {
return (
<button>{this.state.counter}</button>
);
}
}
ReactDOM.render(<Button />, mountNode);
========
class Button extends React.Component {
state = { counter: 10 };
handleClick = () => {
// exmple1
// this.setState({
// counter: this.state.counter + 1
// });
// exmple2
// this.setState(function (prevState) {
// return {
// counter: prevState.counter + 1
// };
// });
this.setState((prevState) => (
{ counter: prevState.counter + 1 }
));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.counter}
</button>
);
}
}
ReactDOM.render(<Button />, mountNode);
class Button extends React.Component {
render() {
return (
<button onClick={this.props.onClickFunction}>
+1
</button>
);
}
}
const Result = function (props) {
return (
<div>{props.counter}</div>
);
};
class App extends React.Component {
state = { counter: 0 };
incrementCounter = () => {
this.setState((prevState) => ({ counter: prevState.counter + 1 }));
}
render() {
return (
<div>
<Button onClickFunction={this.incrementCounter} />
<Result counter={this.state.counter} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
class Button extends React.Component {
handler = () => {
this.props.onClickFunction(this.props.incrementValue);
}
render() {
return (
// <button onClick={()=>this.props.onClickFunction(this.props.incrementValue)}>
<button onClick={this.handler}>
+{this.props.incrementValue}
</button>
);
}
}
const Result = function (props) {
return (
<div>{props.counter}</div>
);
};
class App extends React.Component {
state = { counter: 0 };
incrementCounter = (i) => {
this.setState((prevState) => ({ counter: prevState.counter + i }));
}
render() {
return (
<div>
<Button incrementValue={1} onClickFunction={this.incrementCounter} />
<Button incrementValue={5} onClickFunction={this.incrementCounter} />
<Button incrementValue={10} onClickFunction={this.incrementCounter} />
<Result counter={this.state.counter} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
Summary
- jsComplete Playground
- Components : - props - state
- JSX and the Virtual DOM
- Function and class components
- ReactDOM.render(..., mountNode)
- React Events