react学习笔记，ReactDOM，react-router-dom
react 学习
1. 下载与安装
下载
npm install -g create-react-app
安装
npx create-react-app xxx 推荐
npm init react-app xxx
yarn create react-app xxx
2. 创建 react 元素 indexjs 文件
import React from "react";
import ReactDOM from "react-dom";
// 1创建react元素
const title = React.createElement("h1", null, "1111111hello word");
ReactDOM.render(title, document.getElementById("root"));
// 2创建react元素
import React from "react";
import ReactDOM from "react-dom";
const title = <h1>helloword</h1>;
ReactDOM.render(title, document.getElementById("root"));
3. 类名
class => className
const title =
helloword 1111111111
4. 组件
import React from "react";
import ReactDOM from "react-dom";
function Hello() {
return <div>111111111111111zujian1</div>;
}
const Hello = () => <div>188888888811zujian1</div>;
ReactDOM.render(<Hello></Hello>, document.getElementById("root"));
### 组件拆分
index.js
import Hello from './components/Hello'
ReactDOM.render(<Hello></Hello>, document.getElementById('root'))
Hello.js
import React from "react";
class Hello extends React.Component {
render() {
return (<div>hello组件</div>)
}
}
export default Hello
5. 继承
// 继承
import React from "react";
import ReactDOM from "react-dom";
class Hello extends React.Component {
render() {
return (<div>111111111class继承</div>)
}
}
ReactDOM.render(<Hello></Hello>, document.getElementById('root'))
//组件式
//1 Hello.js
import React from "react";
class Hello extends React.Component {
render() {
return (<div>hello组件</div>)
}
}
export default Hello
//2 index.js
import Hello from './components/Hello'
ReactDOM.render(<Hello></Hello>, document.getElementById('root'))
6. 点击事件
class Hello extends React.Component {
handOlick() {
console.log("点击触发");
}
render() {
return <button onClick={
this.handOlick}>点击</button>;
}
}
ReactDOM.render(<Hello></Hello>, document.getElementById("root"));
function Hello() {
function handclick() {
console.log("点击触发；1");
}
return <button onClick={
handclick}>点击</button>;
}
ReactDOM.render(<Hello></Hello>, document.getElementById("root"));
7. 阻止默认事件
class Hello extends React.Component {
handclick(e) {
e.preventDefault(); // 阻止默认跳转 阻止a标签的默认跳转
console.log("点击触发了");
}
render() {
return (
<a href="http://www.baidu.com" onClick={
this.handclick}>
跳转
</a>
);
}
}
ReactDOM.render(<Hello></Hello>, document.getElementById("root"));
8. state
class Hello extends React.Component {
// constructor() {
// super()
// this.state = {
// num: 0
// }
// }
// 简化
state = {
num: 1,
};
render() {
return <div>state使用 {
this.state.num}</div>;
}
}
ReactDOM.render(<Hello></Hello>, document.getElementById("root"));
9. setState
class Hello extends React.Component {
// 简化
state = {
num: 1,
};
render() {
return (
<div>
<div>state使用 {
this.state.num}</div>
<button
onClick={
() => {
this.setState({
num: this.state.num + 1 });
}}
>
+1
</button>
</div>
);
}
}
ReactDOM.render(<Hello></Hello>, document.getElementById("root"));
箭头函数;
class Hello extends React.Component {
// 简化
state = {
num: 1,
};
onIncrement = () => {
this.setState({
num: this.state.num + 1 });
};
render() {
return (
<div>
<div>state使用222 {
this.state.num}</div>
{
/* 2强制改变this */}
<button onClick={
this.onIncrement}>+1</button>
</div>
);
}
}
10 改变 this 指向
// p31 强制改变this 用consturctor
class Hello extends React.Component {
// 简化
// state = {
// num: 1
// }
constructor() {
super();
this.state = {
num: 1,
};
this.onIncrement = this.onIncrement.bind(this);
}
onIncrement() {
this.setState({
num: this.state.num + 1 });
}
render() {
return (
<div>
<div>state使用222 {
this.state.num}</div>
{
/* 2强制改变this */}
<button onClick={
this.onIncrement}>+1</button>
</div>
);
}
}
ReactDOM.render(<Hello></Hello>, document.getElementById("root"));
11. 表单处理
受控组件
// 受控组件
class Hello extends React.Component {
state = {
txt: "",
content: "",
};
handlerChange = (e) => {
this.setState({
txt: e.target.value,
});
console.log(e.target.value);
console.log(this.state.txt);
};
handlarComtent = (e) => {
this.setState({
context: e.target.value,
});
};
render() {
return (
<div>
<input
type="text"
value={
this.state.txt}
onChange={
this.handlerChange}
></input>
<textarea
value={
this.state.content}
onChange={
this.handlarComtent}
></textarea>
</div>
);
}
}
多表单元素优化
// 多表单元素的优化
class Hello extends React.Component {
state = {
txt: "",
content: "",
};
handlerForm = (e) => {
const target = e.target;
const value = target.type === "checkbox" ? target.cheched : target.value;
const name = target.name;
this.setState({
[name]: value,
});
console.log(value);
console.log(name);
console.log(e.target.value);
console.log(this.state.txt);
};
render() {
return (
<div>
<input
type="text"
value={
this.state.txt}
onChange={
this.handlerForm}
></input>
<textarea
value=