创建工程
在官网的教程中, 要使用 react 创建工程需要执行命令:
- NPM install -g create-react-App
- create-react-App hello-world
- cd hello-world
- NPM start
这些命令会帮我们生成一系列工程需要的插件, ES6 的语法新特性: 模块化编程, 很多浏览器不支持, 我们需要这些工具转化成 es5.
执行 NPM start 在浏览器会出现一个初始的工程页面, 然后导入到 webstrom,
TimeDisplay.JS 代码:
- import React, {Component} from 'react';
- import DisplayLog from './DiaplayLog';
- import Button from './Button';
- import formateTime from '../utils/formateTime'
- class TimeDisplay extends Component {
- // 在构造中初始化 state 值
- constructor(props) {
- super(props);
- // 此处不能用 setState();
- this.state = {
- time: 0,
- on: false,
- log: []
- }
- }
- // handleClick() {
- // // 注意这里的'this'对象, 由于 handleClick 方法是传递到了 Button 中所以如果直接用 this, 拿到的
- // // 就是 Button 对象, 报错: time 属性没有定义, 这时候我们就需要使用 bind 函数
- // setInterval(()=>this.setState({time:++this.state.time}),10);
- //
- // // 还有一种写法:
- // // setInterval(function () {
- // // this.setState({time:++this.state.time});
- // // console.log(this.state.time);
- // // }.bind(this),10);
- // }
- // 上面方式 button 的实现代码:<Button className="success" text="开始" onClick={this.handleClick.bind(this)}/>
- // 或者都用箭头函数实现, 箭头函数的作用域是: 写在哪里, this 就表示哪里
- handleClick = () => {
- if (this.state.on) {
- clearInterval(this.timer);
- } else {
- // 计时器
- this.timer = setInterval(() => {
- this.setState({time: ++this.state.time})
- }, 10)
- }
- // 改变开始, 暂停状态
- this.setState({on: !this.state.on})
- }
- // 记录时间, 用数组把当前的时间记录下来
- handlelogTime = () => {
- this.state.log.push(this.state.time);
- // console.log(this.state.time);
- }
- // 清空
- handlelClear = () => {
- this.setState({log:[]})
- }
- // 重置
- handleReset = ()=> {
- this.setState({time:0});
- }
- render() {
- var text = this.state.on ? '暂停' : '开始';
- var time = formateTime(this.state.time);
- // /* 这里需要把当前组件的对象传递进去 */
- return <div>
- <h1 className="time_displayer">{time}</h1>
- <div className="controler">
- <Button className={this.state.on ? "danger":"success"} text={text} onClick={this.handleClick}/>
- <Button className="warning" text="重置" onClick={this.handleReset}/>
- <Button className="primary" text="记录" onClick={this.handlelogTime}/>
- <Button className="undefined" text="清空" onClick={this.handlelClear}/>
- </div>
- <DisplayLog log={this.state.log}/>
- </div>
- }
- // 监听键盘的事件
- componentDidMount() {
- Windows.addEventListener('keydowm',e=>e.preventDefault())
- Windows.addEventListener('keyup',e=>{
- e.preventDefault();
- switch (e.keyCode) {
- case 32://space
- this.handleClick();
- break
- case 82:// 重置
- this.handleReset();
- break
- case 13:
- this.handlelogTime();
- break
- case 67:
- this.handlelClear()
- break
- }
- })
- }
- }
- // 导出, 在文件外面使用这个类
- export default TimeDisplay;
DisplayLog.JS 代码:
- export default class DisplayLog extends Component {
- renderEmpty = ()=>{
return <span className="empty_log">空空如也</span>;
- }
- renderLog = ()=>{
- return this.props.log.map((item,i) => {
- return <li className="log_item">{formateTime(item)}</li>
- });
- }
- render() {
- const log = this.props.log.length === 0 ? this.renderEmpty() : this.renderLog();
- return <ul className="log">
- {log}
- </ul>
- }
- }
formateTime.JS 代码
- export default function (t = 0) {
- const msec = appendZero(Number.parseInt(t % 100)),
- sec = appendZero(Number.parseInt(t/100%60)),
- min = appendZero(Number.parseInt(t/6000%60)),
- hour = appendZero(Number.parseInt(t/360000));
- return `${hour}:${min}:${sec}.${msec}`;
- }
- const appendZero = n=>n.toLocaleString({},{minimumIntegerDigits:2});
涉及和需要注意的知识点:
当导入 (import xxxx) 的组件有相同名字的时候可以取别名:{import A as B}
JSX 语法它是支持 JavaScript 语法的, 在 es6 中因为 class 是个关键字所以, 在声明, 标签属性的时候 class 要改为 className, 虚拟 DOM 会自动解析.:
<h1 className="time_displayer">00:00:16.00</h1>
className 如果需要用类标签设置多个 style 的话用空格隔开, 而且后面的 style 属性会覆盖前面的属性
<button className="button success">开始</button>
.log> .empty_log -->empty_log 使用这个样式 ,.log .empty_log 都会使用这个样式
JavaScript 创建数组最常见的方式:
var a =[] 和 var arr = new Array();
在数组末尾添加元素: arr.push();
arr.map(function(item,i))来遍历数组
- var arr = [1,3,4]
- arr.map(function (item,i) {
- return ++item;// 可以返回任意类型, 赋值给一个新的数组
- })
- console.log(arr);
- // 输出:[ 1, 3, 4 ]
- var a = arr.map((item,i)=>++item)
- console.log(a);
- // 输出:[ 2, 4, 5 ]
- list-style: none;// 去掉列表默认样式
伪类:
.className:xxx 值有:
hover-- 鼠标移到标签的属性;
visited-- 链接点击后的颜色
CSS3 的阴影
box-shadow: 0 0 25px rgba(0,0,0,0.2);
来源: http://www.css88.com/qa/react/14184.html