### 首先安装react的脚手架

cnpm    install   create-react-app   -g    只需要在电脑下载安装一次即可 

###创建项目

create-react-app   项目名(xx)

###进入项目(xx),运行项目

npm  start   或者下载cnpm  install  yarn   --save   输入yarn   start   也可以运行 

###创建两个文件夹 App和选项卡 

将App.css和App.js放入App文件夹中

在创建两个xxk.js和xxk.css放入选项卡文件夹中

###在xxk.js中写入代码 

import React, {Component} from 'react';//引入react模块
import "./xxk.css"//引入xxk.css样式
class Xxk extends Component {
constructor(props) {
super(props);
this.state={//初始化状态
tits:["精选","热点","娱乐","新闻"],
cons:["内容111","内容222","内容333","内容444"],
curr:0 //定义一个状态用来判断
}
} dj(n){
this.setState({curr:n})//更新curr的状态为n(下标)
}
render() {
return (
<div className="box">
<ul>
{
this.state.tits.map((v,i)=>{
return <li key={ i } onClick={this.dj.bind(this,i)}
className={this.state.curr==i?"active":""}>//是三目运算符判断:当curr等于当前的下标时,显示active样式,否则为空
{v}
</li>
})
}
</ul>
<ol>
{
this.state.cons.map((v,i)=>{
return <li key={ i } style={{display:this.state.curr==i?"block":"none"}}>//三目运算符:当它跟当前的下标相等的时候,显示,反之隐藏
{/*// return <li key={i} className={this.state.curr==i?"ac":""} >*/}//这种写法也可以
{v}
</li>
})
}
</ol>
</div>
);
}
} export default Xxk;//导出

###在xxk.css中写入样式 

*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
}
.box>ul{
height: 40px;
width: 400px;
}
.box>ul>li{
float: left;
width: 100px;
text-align: center;
line-height: 40px;
}
.box>ul>li.active{
background: greenyellow;
}
.box>ol{
height: 350px;
width: 400px;
/*border: 1px solid red;*/
padding: 10px;
}
.box>ol>li{
line-height: 350px;
text-align: center;
font-size: 20px;
font-weight: bolder;
text-shadow: 4px 4px 4px red,3px 3px 3px yellow,
5px 5px 6px greenyellow, 6px 6px 7px paleturquoise;
} .box>ol>li.ac{
background: palegreen;
}

###在App.js中写入代码 

import React from 'react';//引入react模块
import Xxk from "../选项卡/xxk";//引入xxk.js文件
class App extends React.Component {
constructor(props) {
super(props); } render() { return (
<div>
<Xxk></Xxk>//xxk.js组件
</div>
);
}
} export default App;//导出

###最后一个简单的选项卡已经做完啦! 欢迎评论,希望能有幸一起交流学习!!!

05-22 18:09