React入门和进阶
1. React使用方法
- 需要在html中导入三个文件，并且导入的顺序不能更改
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
- 随后其他的代码要放在body标签中其他标签的后面，为了保证标签加载完毕再执行代码。script里面加上一个
type="text/babel"
<script type="text/babel">
...
</script>
2. JSX语法
jsx语法是一种类似于html标签的语法，它的作用相当于是让我们在JavaScript代码中直接写html代码，但是jsx不完全是html，它是 JavaScrip 的一种扩展语法，它具有 JavaScript 的全部能力，我们还可在jsx代码中插入变量或者表达式，用jsx语法写出来的语句是一个对象，我们可以将它存为一个变量，这个变量作为ReactDOM对象的render方法的第一个参数。
简单来说：就是js代码里写和html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let iNum01 = 12;
let sTr = 'Hello World!';
let fnMyalert = function(a){
alert(a);
}
let bIsok = false;
let el = (
<div>
{/* jsx代码里面的注释的写法 */}
<h2>jsx语法</h2>
<p>{ iNum01+5 }</p>
<p>{ sTr.split('').reverse().join('') }</p>
<p>{ fnMyalert('Hello!') }</p>
<p>{ bIsok?'YES':'NO' }</p>
<p>{ (iNum01==12)?'YES':'NO' }</p>
{/* class属性名称要写成className */}
<p className="red">使用class属性的p标签</p>
{/* 单个标签的末尾必须要有一个反斜杠 */}
<input type="button" value="普通按钮" />
</div>
);
ReactDOM.render(el, document.getElementById('root'));
</script>
</body>
</html>
3. 组件和属性
组件有两种定义方式：一种是函数式定义，一种是类定义。
组件使用时就当成一个标签的名字使用：<组件名 />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 通过函数的方式定义一个组件
// 组件首字母习惯大写
/*
function Welcome(props){
return <h1>hello, {props.name}</h1>;
}
*/
// 通过类的方式定义一个组件
// 必须继承React.Component
class Welcome extends React.Component{
// 类里面至少要定义一个render方法
render(){
return <h1>hello, {this.props.name}</h1>;
}
}
// 定义一个大组件，里面嵌套很多小组件
class App extends React.Component{
render(){
return (
<div>
<Welcome name="alin" />
<Welcome name="Sara" />
<Welcome name="Jack" />
</div>
);
}
}
// 使用组件, 组件就当成一个标签使用
ReactDOM.render(<Welcome name="alin" />, document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
4. 绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Helloname extends React.Component{
fnHello(){
alert('Hello,'+this.props.name);
}
render(){
// 当需要传参时要绑定this,否则this指向不明
return <input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />;
}
}
ReactDOM.render(<Helloname name="alin" />, document.getElementById('root'));
</script>
</body>
</html>
5. 组件的状态属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Dizeng extends React.Component{
constructor(props){
super(props);
// 用state存类的属性，必须是一个字典
this.state = {iNum01:10};
}
fnAdd(){
// setState方法中可以传一个新的字典作为参数
// this.setState({iNum01:12});
// setState可以传一个函数作为参数，函数的第一个参数是prevState，它表示state的最新的值，通过它来读取最新的值
// 得到state最新的值不能用this.state，可以用prevState
// 这个函数最终需要返回一个字典
/*
this.setState(function(prevState){
return {iNum01:prevState.iNum01+1};
});
*/
this.setState(prevState=>({iNum01:prevState.iNum01+1}));
}
render(){
return (
<div>
<p>{ this.state.iNum01 }</p>
<input type="button" value="递增" onClick={this.fnAdd.bind(this)} />
</div>
);
}
}
ReactDOM.render(<Dizeng />, document.getElementById('root'));
</script>
</body>
</html>
6. 选项卡例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script>
</script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Tab extends React.Component{
constructor(props){
super(props);
this.state = {iNow:0};
}
fnChange(i){
this.setState({iNow:i});
}
render(){
return (
<div className="tab_con">
<div className="tab_btns">
<input type="button" value="按钮一" class={ (this.state.iNow)==0 ? 'active' : '' } onClick={this.fnChange.bind(this, 0)} />
<input type="button" value="按钮二" class={ (this.state.iNow)==1 ? 'active' : '' } onClick={this.fnChange.bind(this, 1)} />
<input type="button" value="按钮三" class={ (this.state.iNow)==2 ? 'active' : '' } onClick={this.fnChange.bind(this, 2)} />
</div>
<div className="tab_cons">
<div className={ (this.state.iNow)==0 ? 'current' : '' }>按钮一对应的内容</div>
<div className={ (this.state.iNow)==1 ? 'current' : '' }>按钮二对应的内容</div>
<div className={ (this.state.iNow)==2 ? 'current' : '' }>按钮三对应的内容</div>
</div>
</div>
);
}
}
ReactDOM.render(<Tab />, document.getElementById('root'));
</script>
</body>
</html>
7. 列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let aList = ['海王', '钢铁侠', '大江大河', '天线宝宝'];
let el = aList.map(function(item, i){
return <li key={i}>{ item }</li>;
});
ReactDOM.render(<ul>{el}</ul>, document.getElementById('root'));
</script>
</body>
</html>
8. 表单双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Form extends React.Component{
constructor(props){
super(props);
this.state = {
sVal01:''
};
}
fnChange(ev){
this.setState({sVal01:ev.target.value});
}
fnAdd(){
this.setState(function(preState){
return {sVal01:preState.sVal01+' haha!'};
})
}
render(){
return (
<form>
<p>{this.state.sVal01}</p>
<input type="text" value={this.state.sVal01} onChange={this.fnChange.bind(this)} />
<br /><br />
<input type="button" value="改变state的值" onClick={this.fnAdd.bind(this)} />
</form>
);
}
}
ReactDOM.render(<Form />, document.getElementById('root'));
</script>
</body>
</html>
9416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
