React学习之道

20/09/2019 03:25

笔记

React

命令行验证node和npm的安装版本

node --version
*v8.10.0
node --version
*3.5.2

1.安装一个React本地包
npm install react
2.创建项目专属的node_modules/文件夹和package.json文件
npm init -y
3.--save-dev标记表示该node包只是用作开发环境的一部分，并不会被作为你产品代码的一部分发布。
npm install --save-dev <package>

练习

搭建一个简易的npm项目
- 使用mkdir<文件夹名>创建一个新的文件夹
- 通过cd<文件夹名>进入该文件夹
- 运行npm init -y或者 npm init 来初始化一个npm项目
- 安装一个本地包，比如：React: npm install react
- 仔细看一下package.json文件和node_modules/文件夹里面的内容
- 找找看有没有什么办法把react从项目中卸载掉。
使用CDN引入React。

<script crossoriginsrc="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.developmen\t.js"></script>

如何项目有一个package.json文件，可以的通过命令行来安装react和react-dom.
```
npm install react react-dom
```
零配置搭建React应用
- 使用create-react-app，各种工具和配置都会在后台集成，而开发人员只需要专注与实现就好了。
```
1.在命令行创建和初始化React应用
npm install -g create-react-app
如果报错，出现权限不够，请加上sudo。
2.检查creata-react-app的版本来验证是否安装成功。
create-react-app --version
*3.1.1
3.创建第一个React应用，名字为hackernews,创建成功后，直接切换到该文件夹。
create-react-app hackernews
cd hackernews
```
  - README.md:后缀名为.md表示这是一个markdown文件。Markdown是一个用纯文本创建格式化文档的标记语言。
  - node_modules/:这个文件夹包含了所有通过npm安装的node包。
  - package.json:这个文件包含了node包依赖列表和一些其他的项目配置。
  - .gitignore:这个文件包含了所有不应该添加到git仓库中的文件和文件夹。
  - public/:这个文件夹包含所有你的项目构建初的产品问价。
  - manifest.json和registerServiceWorker.js:在这个阶段不用担心这些文件用来干什么，我们不会在这个项目中用到他们。
```
//在http://localhost:3000启动应用
npm start
    
//运行所有测试
npm test
    
//构建项目的产品文件
npm run build
```

练习

通过npm start 运行并在浏览器中访问你的应用（你可以通过Control+C来退出命令）
运行交互式的npm test脚本
运行npm run build 并确认项目中出现了build/文件夹（你可以在之后把它删除掉；注意build文件夹可以用来部署你的应用）
熟悉一下项目的文件结构
熟悉一下不同文件的具体内容
阅读更多关于npm和create-react-app的内容

ES6箭头函数

//function expression
function(){...}

//arrow function expression
() => {...}

如果函数只有一个参数，你就可以移除掉参数的括号，但是如果有多个参数，你就必须保留这个括号。
//allowed
item => {...}

//allowed
(item) => {...}

//not allowed
item,key => {...}

//allowed
(item,key) => {...}