React 学习笔记001-入门

Github

1. 先要安装 node.js
2. cnpm 代替 npm 这个主要是因为国外服务不好访问的原因
3. yarn 代替 npm
   使用 yarn 代替 npm，提高效率

   npm install -g yarn
   npm upgrade yarn

你应该按照以下的顺序进行学习, 而不是跳着学或者同时学习:

React
npm
JavaScript “打包工具”
ES6
Routing
Flux
https://github.com/petehunt/react-howto/blob/master/README-zh.md

Yarn和npm命令对比

npm install === yarn
npm install taco --save === yarn add taco
npm uninstall taco --save === yarn remove taco
npm install taco --save-dev === yarn add taco --dev
npm update --save === yarn upgrade

https://www.bootcdn.cn/

//安装指定版本，避免兼容性问题
sudo npm i -g create-react-app@1.5.2

// install vscode plugin
`Simple React Snippets` by Burke Holland
`Prettier - Code formatter` by Esben Petersen
set this `editor.formatOnSave = true`

//会安装所有依赖
npx create-react-app react-app

cd react-app
npm start  // 会自动打开浏览器


yarn build

cd my-app
cd src
rm -f *
cd ..

组件间传数据
检查传入参数类型
prop-types

无状态组件：没有生命周期，输入固定，输出也固定

高阶组件 HOC

父组件传值给子组件比较简单，直接属性的方式即可
子组件传值给父组件，需要回调函数
兄弟组件传值，是通过父组件中转实现的

https://react-bootstrap.github.io/

图片库
https://www.pexels.com/

处理图片
https://croppola.com/

处理文字
https://www.bobrosslipsum.com/

create-react-app react-bootstrap

yarn add react-bootstrap bootstrap react-router-dom
yarn start

//添加 bootstrap css
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

yarn start
Starts the development server.

yarn build
Bundles the app into static files for production.

yarn test
Starts the test runner.

yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd react-bootstrap
yarn start