前端学习—React—初出茅庐

React学习—初出茅庐

　　对与React的学习思路，首先React中用到了Class、let、const、以及modual(模块)的导入(import)和导出(export)，而这些都是ECMAScript6标准中新增的内容，所以ECMAScript6在React学习中，是一个基础且重要的知识点。

　　前端开发工程化构建思想，组件依赖、组件管理。以及前端开发MVC构建，都让前端的开发更加高效和专注。

零、ES6

　从零开始。ECMAScript6 一个里程碑，对前端的发展有着重要的作用。let const class modual import export，新的扩展，新的语法，新的思维。

在了解和学习React之前，掌握ECMAScript6的相关知识，能够让我们更深入和快速的了解React的开发思路。

　　

　　先推荐一本书，ES6标准入门，这本书对ES6的讲解通俗易懂，同时篇幅较少，是一个快速了解和入门的好书。

　　ES6在线学习资料：http://es6.ruanyifeng.com/

一、React学习资料：

　国内React的学习资料以阮一峰的资料讲的通俗易懂，可以搜索他的相关学习资料。

1.https://hulufei.gitbooks.io/react-tutorial/introduction.html

　React路由和数据流，以及组件的生命周期和组件的开发，都是学习的重点。

　React路由做为一个重点知识，相关学习资料如下：

1.http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

2.https://reacttraining.com/react-router/web/example/custom-link React路由

　重点1：我想重点强调一下这个资料，其中的示例可以帮助我们学习React Router，毕竟React Router已经经过了几个版本的更新，网上的相关学习资料比较杂乱。

　重点2：注意Link标签，pathname中，注意  `   (反单引号也称重音符，是西文字符)。这个反单引号也是我们经常写错的一个点。

<Link style={{marginLeft:}} to={{
                            pathname:`/config/devItem/${record.id}`
                        }}>配置</Link>

　　

数据流以及组件生命周期的资料，网上有在线帮助文档，可以给大家提供帮助。

二、React开发工具:

1.Visual Studio Code。

2.Web Storm。

三、React开发环境:

1.nodeJs

2.npm

3.webpack

4.babel

5.create-react-app​  (npm install -g create-react-app yarn)

• (create-react-app 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。)
• yarn：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

     例如，在项目中引入antd（蚂蚁金服）的类库就是通过yarn来实现的。

$ yarn add antd --save （要在自己的项目目录下执行该命令）

四、Ant Design

　　Ant Design是蚂蚁金服提供的一套设计规范，同时也提供了一套组件库。在我们构建后台管理系统的时候，提供高效展示支持。提升开发效率。的学习和使用请参考官网。

　　

提示：

　　1.依赖包的管理：当你从别人的git上clone项目后，项目中node_modules文件夹下默认是没有相关依赖的，需要我们手动在项目目录下，执行 npm install 的命令，这样包管理器会自动根据package.json中所描述的相关依赖去自动下载依赖包，这样我们clone后的项目就可以正常的运行了。(这段是我特别想强调的)

　　2.前端项目的编译：npm run build

　　

　　趁着今天刚分享玩 React 的相关知识，做一此总结，好了就写到这里，我是Jerry。