React16.4 开发简书项目 从零基础入门到实战

npm i nvm
nvm ls
nvm install 10.0.0
nvm use 10.0.0
npm i create-react-app -g
create-react-app projectName
npm run eject
npm run start

cnpm install axios -S
cnpm i create-react-app -g
cnpm install react-transition-group -S
cnpm install styled-components -S
cnpm install antd -S
cnpm install redux -S
cnpm install redux-thunk -S
cnpm install redux-saga -S
cnpm install react-redux -S
cnpm install babel-plugin-transform-decorators-legacy -D

第 3 章 React 基础精讲 & 第 4 章 React 高级内容

• import { createGlobalStyle } from 'styled-components'
• The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4.
• 官网

• yarn.lock: project require package, version num
• PWA: registerServiceWorker.js, in https server, if phone broken internet, cache before interface
• mainifest.json: website use as App, store in computer as shortcut, define the shortcut content

• 声明式开发
• 可以和其它框架并存
• 组件化
• 单向数据流
• 视图层框架
• 函数式编程

• chrome -> react

• principle:

1. state data
2. JSX template
3. data + template create virtual-DOM (virtual-DOM is JS object，use it desc DOM) ['div',{id:'abc'},['span',{},'hello world']]
4. virtual-DOM create real DOM <div id='abc'><span>hello </span></div>
5. state change
6. new data + template create new virtual-DOM ['div', {id: 'abc'}, ['span', {}, 'bye']] (performance optimize)
7. compare origin virtual-DOM and new virtual-DOM, find difference, diff algorithm
8. operate DOM, change content

• advantage:

1. performance optimize (JS object)
2. cross-platform React Native

• localhost:80
• /Applications/XAMPP/htdocs
• npm run build
• build inside file copy to XAMPP htdocs file
• chrome open localhost:80