【1】前端实习：学习react.js，做一个todolist。（npm start 运行后出现babel-eslint不兼容-版本报错）

学习资源：https://www.imooc.com/video/17568

步骤：

1.创建todolist文件环境：

在命令管理器：

文件创建路径在桌面:cd desktop

npx create-react-app my-app
cd my-app
npm start

2.在IDE(webstorm)中编译：

1) 删除非必要的文件：reactwork.js   app.test.js

2)学习组件：

在index.js里引用一个叫App.js的组件，导入

import App from './App';

ReactDOM 库可以将APP组件挂载到document节点上，渲染到页面文件中的root元素里。

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

然后，在组件App.js里面编写内容，最后用localhost:3000端口号测试。

 

知识点：

• export defult 与export的区别：

共同作用：两者都能于导出常量、函数、文件、模块等；且便于在其他文件和模块中用import方式对其导入使用。

区别：使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名；

           export default只能导出一个；

          在导入时，export default对应的导入形式：import xxx from xxx

相反，export可以导出多个，对应的导入形式：import {xxx} from xxx

• render()方法：

一个组件类必须要实现一个 render 方法，
这个 render 方法必须要返回一个 JSX 元素。
必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的.

 

 

bug及解决方式：

①

错误：运行到了index.html路径。

正确：应该运行到3000端口。

②

过程中因为eslint问题，多加了一个依赖babel-eslint。导致有两个版本不兼容。

命令提示符中提示：

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

C：\Users\hp\node_modules\babel-eslint (version:10.0.2)

解决：删除提示的babel-eslint路径就行了。

 

 

2019/7/15