react从安装到编写组件

使用react创建项目

自己创建项目看这里。

（教程默认安装好node以及npm,且npm已经配置淘宝镜像。如果没有安装，请先安装）

首先创建一个文件夹来存放你的项目,cmd进入该文件夹,如果你的node版本>=6 ,依次输入:

npm install -g create-react-app
create-react-app react-testdemo

cd react-testdemo
npm start

npm start运行后若显示下图Complied successfully则编译成功。

在浏览器输入http://localhost:3000/即可访问react为我们提供的官方demo页面。

现在我们删除掉生成项目中 src/ 文件夹下的所有文件。（这时候浏览器会报错，不用管它）

在src/ 文件夹下新建一个index.js文件，并添加如下内容：

import React from 'react';
import ReactDOM from 'react-dom';

const hello = <div>Hello world！</div>

ReactDOM.render(
    hello,
    document.getElementById('root')
  )

刷新一下页面，会发现我们的第一个react页面写好了：

在现有项目中添加react

已有项目需要使用react看这里。

进入项目文件夹,如果项目中没有package.json，则输入以下代码创建package.json：（含有package.json则直接下一步）

npm init//创建package.json

我们下载react以及react-dom依赖包，并将依赖添加至package.json:

npm install --save react react-dom

 接下来我们就可以使用react来写组件了。

从一个简单的组件开始

编写组件前你需要掌握ES6的class、箭头函数、this知识，若没有掌握点这里。

我们在新建的index.js中编写一个简单的组件：

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props){
    return(<div>你好</div>)
}

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
  )

上面是一个最简单的组件，现在来说说创建过程：

 如果你仔细看了步骤（3），那你一定会有疑问，我们是怎么找到index.html页面的 ？我们打开react-testdemo下的public文件夹，找到index.html文件，发现并没有想象中的import或者link标签来导入index.js文件，我们只能这么猜想，react的编译器会自动找到public下的html文件。因此不需要import或者link标签来导入index.js文件。

为了更好理解react中js文件与index.html的关系，我们看看index.html的代码：

我们可以看到body中只有一个id为root的元素。所以之前浏览器显示的Hello World！怎么来的呢？html中的root节点渲染组件。简单地说，我们在js中编写组件，使用ReactDOM.render()方法注册组件到html中的root，然后root就会渲染组件，显示在浏览器上。

 给组件传值

我们知道组件的一大作用就是将可复用的代码组合，从而省略代码量。但是往往可复用的代码中会有不同的变量，我们用props解决这个问题。

修改一下代码：

function Hello(props){
    return(<div>你好,{props.name}</div>)
}


ReactDOM.render(
    <Hello name="帅哥"/>,
    document.getElementById('root')
  )

查看一下浏览器，我们发现浏览器很友好地显示：

给组件添加样式

• 增加className，如：<div className="handsome">
• /src下创建index.css文件
• css文件添加样式，如： .handsome{color:red}
• js导入css文件

import './index.css';

刷新页面，样式成功更改：

重复渲染组件

重复渲染组件有两种方法，第一种是重复使用ReactDOM.render（）方法。我们以时钟为例：

方法一  在根节点重新渲染组件

function Clock(props){
    return(<div className="handsome">现在是,{props.time}</div>)
}

function trick(){
    ReactDOM.render(
        <Clock time={new Date().toLocaleTimeString()}/>,
        document.getElementById('root')
      )
}
setInterval(trick,1000)

我们设置setInterval()方法每隔1秒调用一次ReactDOM.render（）方法，我们发现时钟成功刷新（每秒刷新一次）。因为我们每秒钟都使用new Date().toLocaleTimeString()获取了当前时间，并且都用ReactDOM.render（）刷新了组件。

（不会截动态图......）

方法二  组件内部利用state和生命周期重新渲染组件

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            time: new Date().toLocaleTimeString()
        }
    }
    componentDidMount() {
        setInterval(
            () => {
                this.setState({ time: new Date().toLocaleTimeString() })
            }, 1000)
    }
    render() {
        return (<div className="handsome">现在是,{this.state.time}</div>)
    }
}


ReactDOM.render(
    <Clock />,
    document.getElementById('root')
)

state是React.Component类的一个属性，它不像props的值是固定的，它可以随着组件的生命周期变化。使用setState()我们可以改变state的值，并且在调用方法后，组件会重新渲染。拿上面例子来说，我们想让下午4：11：48随着时间不断刷新，那我们就给state传一个当前时间的值，并使用setState()方法不断改变state的值并刷新组件。

第二种方法在组件内部重新渲染组件，更符合我们日常开发需求。

写文章不易，点个赞再走？