React 实战（书籍）源码四 process.env.ENDPOINT 为什么是 undefine？
- process.env.PORT 这句是什么意思
- 如何配置Eslint检测React代码
- react更新15.5.0版本后，一直报warning，这个antd是要何时修复
- 如何配置Eslint检测React代码
process.env.PORT 这句是什么意思
这句出现在express生成的app.js里: app.set('port’, process.env.PORT || 80);
，我知道它的作用是设置端口号，但为什么要这样写呢?写成： app.set('port’, 80);不行么？
process.env.PORT实现了什么？
这是最基础的东西了，环境变量要是设置了PORT，那么就用环境变量的PORT。比如可以使用下面命令指定端口号：
PORT=8080 node app.js
*******************************
如果你对这个答案有什么疑问，请追问，
另外如果你觉得我的回答对你有所帮助，请千万别忘记哟！
如何配置Eslint检测React代码
1.Eslint介绍
Eslint 是一个JavaScript验证工具,有了它可以让你的编辑器像ide一样进行一些静态的错误提示功能.
多打了一个分号
应该打冒号的地方打成了赋值符号
并没有找到变量bbb
返回的组件为空
2.编辑器安装Eslint插件
sublime text可以用这两个插件:
sublimeLiter
sublimeLiter-contrib-eslint
atom可以用这个两个插件:
linter
linter-eslint
3.npm安装相关组件
安装linter
$ npm install linter
安装eslint
$ npm install eslint -g
安装eslint-plugin-react(不用加-g)
识别react中的一些语法检验
$ npm install eslint-plugin-react
安装babel-eslint
如果用到了es6的新语法, 需要安装babel-eslint,不然会把箭头函数识别成错误
$ npm install babel-eslint
4.在项目的根目录创建配置文件.eslintrc.json
eslint会根据.eslintrc.json定义的规则进行代码检测(在mac中的.开头的文件为隐藏文件);
eslint官方给出的一些有关react配置的文档:
https://github/yannickcr/eslint-plugin-react
一般有两种做法:
宽松的定义,只检验一些语法上的错误.
严谨的定义,可以当团队书写代码的规范,把规范错误定义成警告, 语法错误定义成错误
我自己用的是相对宽松的定义,定义如下:
react更新15.5.0版本后，一直报warning，这个antd是要何时修复
1.准备:npm安装以下组件a.安装react/antd:npminstallreactreact-domantd--saveb.安装webpack/less:npminstallwebpackless--save-devwebpack根据需要选择使用-g安装c.安装babel-loader以及其他相关package:npminstallbabel-loaderbabel-corebabel-preset-es2015babel-preset-react--save-devd.选择安装style-loader/css-loadernpminstallstyle-loadercss-loader--save-dev2.配置webpack.config.js具体配置可以查看webpack提供的例子，主要依赖的是babel-loaderbabel-loader上也有webpack.config.js应该如何编写的例子，传送门:babel-loader3.编写我们的文件(例如:demo-antd.jsx)只使用了antd提供的Button组件。只使用了antd提供的Button组件。ps:对比import{Button}from'antd';和importButtonfrom'antd/lib/button';后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。4.执行构建webpack./demo-antd.jsxdemo-antd-bundle.js将生成demo-antd-bundle.js文件5.在页面中引入bundle文件(demo-antd-bundle.js)执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些.怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如@陈吉浩所说，查看github上的代码比npm下载后的代码更舒服。
如何配置Eslint检测React代码
1、在项目根目录新建 （.eslintrc）文件，注意有个小点，将下面的代码复制进去<br>{<br> "extends": [<br> "eslint:recommended",<br> "plugin:import/errors",<br> "plugin:import/warnings"<br> ],<br> "plugins": [<br> "react"<br> ],<br> "parserOptions": {<br> "ecmaVersion": 6,<br> "sourceType": "module",<br> "ecmaFeatures": {<br> "jsx": true<br> }<br> },<br> "env": {<br> "es6": true,<br> "browser": true,<br> "node": true,<br> "jquery": true,<br> "mocha": true<br> },<br> "settings": {<br> "import/ignore": [<br> "node_modules"<br> ]<br> },<br> "rules": {<br> "quotes": 0,<br> "no-console": 1,<br> "no-debugger": 1,<br> "no-var": 1,<br> "semi": [1, "always"],<br> "no-trailing-spaces": 0,<br> "eol-last": 0,<br> "no-unused-vars": 0,<br> "no-underscore-dangle": 0,<br> "no-alert": 0,<br> "no-lone-blocks": 0,<br> "jsx-quotes": 1,<br> "react/display-name": [ 1, {"ignoreTranspilerName": false }],<br> "react/forbid-prop-types": [1, {"forbid": ["any"]}],<br> "react/jsx-boolean-value": 1,<br> "react/jsx-closing-bracket-location": 0,<br> "react/jsx-curly-spacing": 1,<br> "react/jsx-indent-props": 0,<br> "react/jsx-key": 1,<br> "react/jsx-max-props-per-line": 0,<br> "react/jsx-no-bind": 1,<br> "react/jsx-no-duplicate-props": 1,<br> "react/jsx-no-literals": 0,<br> "react/jsx-no-undef": 1,<br> "react/jsx-pascal-case": 1,<br> "react/jsx-sort-prop-types": 0,<br> "react/jsx-sort-props": 0,<br> "react/jsx-uses-react": 1,<br> "react/jsx-uses-vars": 1,<br> "react/no-danger": 1,<br> "react/no-did-mount-set-state": 1,<br> "react/no-did-update-set-state": 1,<br> "react/no-direct-mutation-state": 1,<br> "react/no-multi-comp": 1,<br> "react/no-set-state": 0,<br> "react/no-unknown-property": 1,<br> "react/prefer-es6-class": 1,<br> "react/prop-types": 1,<br> "react/react-in-jsx-scope": 1,<br> "react/require-extension": 1,<br> "react/self-closing-comp": 1,<br> "react/sort-comp": 1,<br> "react/wrap-multilines": 1<br> }<br>}2、在package.json文件里面配置scripts的lint属性<br><br>"scripts": {<br> "lint": "eslint src(src表示你需要检测的文件目录，可以自由更改)"<br>}3、运行检测<br>npm lint 或者 npm run lint