cutototo
/
learning
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

提交react学习代码

This commit is contained in:
Cutototo 2021-04-24 21:41:04 +08:00
parent 306dc6cdfa
commit 60c77f32f4
11 changed files with 28733 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
1.jsx/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index </title>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
<script src="../babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

29
1.jsx/index.js Normal file
View File

@ -0,0 +1,29 @@
//ReactDOM.render(<h1>Hello, world</h1>, document.getElementById('root'));
// 1.变量的使用
// 在JSX中嵌入表达是
// const name = 'Cuto'
// const e = <h1>Hello, {name}</h1>
// ReactDOM.render(e, document.getElementById('root'));
// 2.函数的使用
// function test(){
// return "handsome cuto!"
// }
// const e = <h1>Hello, {test()}</h1>
// ReactDOM.render(e, document.getElementById('root'));
// 3.防止xss注入
// const title = "<script>alert('111')</script>"
// const e = <h1>Hello, {title}</h1>
// ReactDOM.render(e, document.getElementById('root'));
const content = (
<div>
<h1>hello, cuto</h1>
<br/>
<p>Love cuto</p>
</div>
);
ReactDOM.render(content, document.getElementById('root'));

14
2.component/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index </title>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
<script src="../babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

41
2.component/index.js Normal file
View File

@ -0,0 +1,41 @@
// 第一种定义组件的方式
// function Welcome(props) {
// return <h1>hello, {props.name}</h1>;
// }
// ReactDOM.render(
// Welcome({name:"cuto"}),
// document.getElementById('root')
// );
///第二种定义组件的方式
// class Welcome extends React.Component {
// render() {
// return <h1>hello, {this.props.name}</h1>;
// };
// }
// const e= <Welcome name="cuto"/>;
// ReactDOM.render(
// e,
// document.getElementById('root')
// );
// 组合组件使用
class Welcome extends React.Component {
render() {
return <h1>hello, {this.props.name}</h1>;
};
}
const e = (
<div>
<Welcome name="cuto"></Welcome>
<Welcome name="love"></Welcome>
</div>
);
ReactDOM.render(
e,
document.getElementById('root')
);

14
3.state/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index </title>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
<script src="../babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

42
3.state/index.js Normal file
View File

@ -0,0 +1,42 @@
// // 不推荐的方式
// function tick() {
// const e = <h1>现在时间是{new Date().toLocaleTimeString()}</h1>;
// ReactDOM.render(
// e,
// document.getElementById('root')
// );
// }
// setInterval(tick, 1000);
// 通过state 添加自定属性 触发刷新
class Clock extends React.Component {
constructor(props){
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerId = setInterval(()=> this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerId);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return <h1>现在时间, {this.state.date.toLocaleTimeString()}</h1>;
};
}
ReactDOM.render(
<Clock/>,
document.getElementById('root')
);

14
4.component-lifecycle/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index </title>
  <script src="../react.development.js"></script>
  <script src="../react-dom.development.js"></script>
<script src="../babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

57
4.component-lifecycle/index.js Normal file
View File

@ -0,0 +1,57 @@
// 通过state 添加自定属性 触发刷新
class Test extends React.Component {
constructor(props){
console.log("触发构造函数");
super(props);
}
componentWillMount() {
console.log('componentWillMount')
}
componentDidMount() {
console.log('componentDidMount')
}
componentWillReceiveProps(newProps) {
console.log('componentWillReceiveProps!')
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate!');
}
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate!')
}
componentWillUnmount() {
console.log('componentWillUnmount!')
}
render() {
return <h1>我的数字, {this.props.myNumber}</h1>;
};
}
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {data: 0};
this.setNewNumber = this.setNewNumber.bind(this);
}
setNewNumber() {
this.setState({data: this.state.data + 1})
}
render() {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Test myNumber = {this.state.data}></Test>
</div>
);
}
}
ReactDOM.render(
<Button/>,
document.getElementById('root')
);

43
babel.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

25147
react-dom.development.js Normal file
View File

File diff suppressed because it is too large Load Diff

3318
react.development.js Normal file
View File

File diff suppressed because it is too large Load Diff