react入门总结

使用react进行第一个公司的react项目开发。接下来记录下自己这短时间的学习总结。

1.-了解react是什么以及学习路线

每个软件都是基于一个技术栈来实现的，因此如果想要创建你自己的应用，你就必须充分理解自己的技术栈。React的生态看上去很复杂的原因便是人们通常没有按照正确的顺序来去学习。

你需要按照下面的顺序一步一步地学习，不要跳着学或者同时学习多个内容，否则你会感到非常混乱。

基本内容：

1、React

2、npm

3、JavaScript 打包工具

4、ES6

5、路由

6、Flux

当然，并不是要把这些内容全部学完你才能开始使用React，你完全可以先学一步并着手做一点东西，当你发现这一步的知识不足以解决你现在遇到的问题时你再开始下一步的学习。

下面我还额外列出了一些在社区里非常热门的话题技术。它们非常有意思，但是理解起来比较困难。你不一定要将它们应用到你的项目里，但是如果你熟悉了上面列出的这些基本技术并且有了一定的项目经验之后，你不妨了解一下下面这些内容。

进阶话题：

1、内联样式（内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码： <Button style={{ marginLeft: “5px” }} type=“primary”>）

2、服务端渲染

3、Immutable.js

4、Relay, Falcor等

基础部分
学习React
开始学习React并不需要大量的准备工作。在官网的文档里你可以发现一个可以直接复制的HTML模板，将它粘贴到你的本地html文件中就可以开始学习啦。推荐官网：react图标和基础组件各种功能和样式 (antd)和(element-react)
页面数据图形展示的官网 (echart)

学习npm
npm是Node.js的包管理工具，也是目前前端开发者和设计师们共享代码的最热门的工具。它集成了一个模块系统CommonJS，可以让开发者安装一些命令行工具。建议大家看看 这篇 文章来了解一下为什么CommonJS对于浏览器来说是必要的，如果想进一步了解CommonJS的API的话可以看看 这篇 。

学习JavaScript打包工具
出于一些技术的原因，浏览器并不原生支持CommonJS模块。你需要一个JavaScript打包工具来将这些模块打包成一个.js文件，在网页中引入这个打包后的文件就可以在浏览器中运行了。

典型的打包工具有Webpack和browerify。二者都是个不错的选择，但是我更推荐Webpack，因为它具备很多简化大型项目开发的特性。由于Webpack的文档比较晦涩难懂，我针对React设计了一个 Webpack模板 ，如果你想进一步了解Webpack的进阶用法的话，你可以看看 这篇 文章。

有一个误区需要避免：CommonJS利用require()方法来加载模块，因此很多人会下意识地认为他们需要一个require.js来完成这项工作。事实上由于一些技术上的问题我并不推荐你使用require.js，更何况不引入这个库你也可以使用require()方法。

学习ES6
除了JSX（你在React基础部分会学到）以外，你会在React的示例中看到一些陌生的符号。它们便是ES6（ECMAScript第6版，JavaScript最新的语法标准）的新语法，在你学习基础JavaScript的时候不曾遇到过。由于它太新了（2015年颁布），因此还没有得到很好地浏览器支持，但是你的打包工具可以在打包的同时将ES6转成ES5的语法以获得更好的浏览器支持。

当然，使用React不代表一定要使用ES6，你大可以跳过ES6，将重点放在React本身。但是ES6的一些概念解决了很多以往JavaScript的语法问题，建议不打算学习ES6的朋友有精力的时候也了解一下。

强调一点：有些人会推荐你用ES6中新的类来定义React组件，而我建议你不要这么做。事实上多数人（包括Facebook的开发者）在创建React组件时使用的是React.createClass()方法。

学习路由
单页应用是当今的主流。单页的应用只加载一次网页，当用户点击链接或按钮的时候，JavaScript代码会更新页面的内容和地址栏内容，但是网页并没有刷新。地址栏的管理器就被称为路由。React的生态中最受欢迎的且最好用的路由是react-router，创建单页应用的朋友一定要尝试一下。

学习Flux
你可能听说过Flux，而且很多关于Flux的误解你可能也听说过。

很多人在创建应用的使用需要定义一个数据模型，然后他们认为他们需要Flux来实现它。 这不是Flux的正确使用方法 。Flux应该在很多组件加载之后加载。

React组件通常会构成一个层级结构。多数情况下，你项目的数据模型也需要构成一个层级结构。这时Flux并不适合你的项目。然而有时候你的数据模型并没有构成层级关系。当你的React组件开始接收无关联的props值，或者你的一些组件开始变得非常复杂的时候，你可能才需要使用Flux。

标注：这是转自别人整理的。我是转载。觉得思路和层次很清晰。
转载地址：

2.-react组件

在了解大致的学习路线之后。接下来就是怎么使用react完成项目了。在我的学习过程中，一个react就是一个完整的拼图，而组件就是就是各种形状的拼图块。
组件的创造方法为React.createClass() ——创造一个类，react系统内部设计了一套类系统，利用它来创造react组件。但这并不是必须的，我们还可以用es6的class类来创造组件,这也是Facebook官方推荐的写法。

3.-react中的值传递

1.父组件向子组件传值
父组件（传递）
render() {
const {
pagination,
tableData,
} = this.state;
return (
{/* 数据列表显示 */}
<ContentTable
tableData={tableData} //表格数据
checkColumnsChange={this.checkColumnsChange}//向子组件传递父类方法
pagination={pagination}
/>
);
}
}
子组件（接收）
class CustomColumns extends Component {
constructor(props) {
super(props)
this.state = {
}
}

render() {
const { columnsData, customSelectedColumns } = this.props//接收父组件的传值

return (
    <Table 
      dataSource={columnsData} 
      columns={tableColumns}
    />
)

}
}

export default CustomColumns
2.子组件向父组件传值
//以下所有例子对应的html

//子组件 var Child = React.createClass({ render: function(){ return (

请输入邮箱：

) } }); //父组件，此处通过event.target.value获取子组件的值 var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(event){ this.setState({email: event.target.value}); }, render: function(){ return (

用户邮箱：{this.state.email}

) } }); React.render( , document.getElementById('test') ); 3.同级组件之间的传值 由子组件想父组件传值，再由父组件想另一个子组件传值 4.爷孙组件之间的传值 由父组件向子组件传值，再由子组件想孙子组件传值