基础react学习（一）

react：一种必学的，要掌握的前端框架。

要学习好一门语言总是要边动手实践，边查阅它的文档，了解它的相关语法和用法。这里我用react官网提供的一套脚手架工具（配置工具）创建了一个包含开发react必要配置的文件：

1、看官网点击doc，找到create react app。使用npm安装create-react-app脚手架。我这里和文档的安装方法不一样，因为安装官方文档的安装方法安装失败。所以我这里的安装方法如下（按先后顺序用命令行在你想创建文件的盘里面依次执行）：

     npm install -g create-react-app

    create-react-app my-app （后面的my-app是自己创建项目的名称）

    cd my-app/

npm run start（自动把react的项目启动起来）或者使用yarn start也可达到同样的目的。yarn(快速，可靠、安全的依赖管理工具)

2、分析生成的各个文件的意义：

          yarn.lock：项目依赖的版本号和一些限制，一般不要去改动

          readme:项目的说明文件。可以自己添加自己对项目的介绍

          package.json：node的包管理文件

          node-modules:此项目所以依赖的第三方的模块儿。脚手架工具自己下载的

          pubilc:包含了一些初始样式结构的HTML、图片文件

          src:资源文件，包含了初始生成的js、css文件

3、精简代码，删除一些不需要用到的文件，比如样式文件（自己可以写），测试文件（暂时用不到）。

4、现在就可以根据自己的需要来编写代码了

一段代码：HTML中有一个id为root的div元素：<div id="root"></div>;我要做的是在页面上添加一个按钮和一个span标签。每点击按钮一下 ，span中的数字就加1；

js代码：

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

获得id为root的元素为其渲染App组件，调用了ReactDOMde render()方法 

app.js 

import React, { Component } from 'react';
class App extends Component {
  constructor(props){
    super(props);
    this.state={
      i:0
    }
    this.handleClick=this.handleClick.bind(this);
  }
  handleClick(){
    var n=this.state.i;
    n++;
    this.setState({
      i:n
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我一下加一</button>
        <span>{this.state.i}</span>
      </div>
    );
  }
}

export default App;

返回一个绑定了点击事件处理函数的button和一个显示数字的span元素，将此App组件导出去（使用了es6的语法） 

 react：

1. 声明式开发：不直接操作DOM，面向数据编程，react会将改变的部分反映到dom结构中。命令式开发：例如jQuery，直接操作DOM，需要改变页面上的值都需要先获取节点，给节点绑定事件，添加事件处理函数，修改相应的属性，内容。
2. 组件式开发：将页面划分为一个一个的组件。父组件通过属性给子组件传递数据，子组件通过this.props获取数据；子组件通过调用父组件传递过来的方法为父组件传递值。 不能在子组件中改变父组件传递过来的值。
3. 使用了jsx语法，允许组件在render函数中return一个类似于HTML的结构。（1）<App/>:代表一个组件。<span></span>:代表一个元素；（2）return中只能返回一个最顶层元素（元素外有js表达式也不可  以），否则会报错。我们可以选择这个元素为：<React.Fragment></React.Fragment>,这样返回元素中就不包含其他多余的元素，因为当返回的元素添加到dom中时，React.Fragment会自动删除；（3）使用{}包含js表达式，会被js编译器编译执行；（4）添加注释：{/* 注释内容*/}；（5）class属性写成className、label标签中的for属性写成htmlFor；（6）为元素添加内联样式：style={{"属性名":"属性值"}}：外层{}表示这是一个js表达式，内层{}表示。这是一个样式对象。
4. 单向数据流：父组件传递给子组件的值，子组件不能改变，只能由通过父组件传递过来的方法改变，其实也还是父组件改变的父组件的值。
5. react是视图层框架。数据的传递需要借助其他的框架如redux来传递。