react入门

前端开发扫盲（写给同事）

chapter1 概念入门

前端几个重要的概念

单页面应用:

单页面应用与传统java jsp等资源不同的点在于，单页面应用的资源对应只有一个html文件和一个js文件（大多是这样），需要访问不同链接的资源可以通过 “#” 这个浏览器锚点进行访问，针对“#”进行浏览器的路由功能

技术栈：

java程序员可能长时间没有接触过前端的技术，前端这几年来的技术变革很大，前两年我们还在写es5的脚本js代码，如今的es6与es5在语法上面有了很大的区别，但是java程序理解es6的语法应该不会太难。需要注意的是，es6的代码部分语法现在的浏览器还不能完全支持，需要通过工具把es6的代码再次编译成es5的代码才能正常运行在浏览器中，常用的编译工具链是webpack，babel详见http://webpack.github.io

环境搭建

环境安装： windows下建议直接下载最新稳定版本的msi安装包，一步到位，无需任何配置，mac下安装node建议先安装brew（不知道brew的搜索一下，先把brew安装好）brew install nodejs，linux用户可以直接去gituhb上下载源码编译安装。安装完node之后会有附带有npm程序，npm是前端的包管理软件，类似于java的maven和gradle，我们可以利用npm下载第三方库。

注意：linux和mac在安装完node之后需要解决权限问题，具体的解决方案在这里
把权限解决了以后算是可以正式开始写代码了。

如何开始：

如何快速投入到生产中，通过以下的学习曲线可以快速的把学到的东西快速的投入到生产。

对于es6的学习，为了快速，并不建议一开始就去了解es6的整个语法糖以及技巧用法，当对于大多数代码，es6和java是一样的。可以先挑几章看着。
http://es6.ruanyifeng.com

阮一峰写的es6入门，推荐以下几个章节 1.let和const命令，2.Promise对象 3.Generator 函数的语法 4.Generator 函数的异步应用 5.async 函数 6.Class 的基本语法 7.Class 的继承 8.Decorator 9.Module 的语法

通篇阅读这几个章节，对es6的语法以及前端Promise（Generator 与 async也是Promise的一种扩展）的用有个大致的了解，接下来我们就可以创建以es6语法为基础的应用了

chapter 2 创建应用

package.json

package.json为前端工程主目录下的文件，用户管理包的依赖和前端工程的启动脚本，其他的功能我没用过，下面是一个ant工程的package.json文件的内容，可以参考一下。

{
  "name": "ant-design-pro",
  "version": "1.1.0",
  "description": "An out-of-box UI solution for enterprise applications",
  "private": true,
  "scripts": {
    "precommit": "npm run lint-staged",
    "start": "cross-env DISABLE_ESLINT=true roadhog dev"
  },
  "dependencies": {
    "url-polyfill": "^1.0.10"
  },
  "devDependencies": {
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0"
  },
  "optionalDependencies": {
    "nightmare": "^2.10.0"
  },
  "lint-staged": {
    "**/*.{js,jsx}": "lint-staged:js",
    "**/*.less": "stylelint --syntax less"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}

初始化前端工程会可以使用npm init命令，这条命令可以生成一个package.json文件，根据提示信息生成完package.json文件后，就只有一些简单的项目信息，如果需要安装第三方依赖库，可以使用如： npm install --save jshint，这条命令会在dependencies下插入一条记录，如上dependencies里面的内容所示。 --save的意思是代码项目的依赖，dependencies里面的内容会直接编译到最终代码中去， npm install --save-dev jshint 如果加上--save-dev，那么会在devDependencies里面插入一条相关记录，devDependencies里面的依赖项不会编译到代码当中去。什么样的代码不需要编译到最终代码中去？一些本身最为编译代码的库，如webpack这样依赖库是无需编译到最终代码中去的。

代码打包

代码为什么需要打包？

前面也说了，es6的语法很多浏览器不支持，而且作为单页面应用，代码也应该打包。

用什么工具打包？

webpack。

webpack如何使用？

webpack使用首先需要安装， npm install -g webpack

安装完webpack后，需要在项目的主目录里创建webpack.config.js作为webpack打包的描述文件。

// 這邊使用 HtmlWebpackPlugin，將 bundle 好得