学习资源: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