React准备

时间 2019-12-09

标签 react 准备栏目 React 繁體版

原文原文链接

React 准备

初始化项目

安装create-react-apphtml
打开终端执行: npm i create-react-app -g
执行create-react-app AwesomeProject
执行yarn startreact

在vscode中添加chrome调试工具

在vscode的扩展中搜索并安装Debugger for Chrome
在调试窗口(ctrl+shift+d)配置, 选择"添加配置"

写配置文件(launch.json)webpack

eg:web

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}/src",
  "userDataDir": "${workspaceRoot}/.vscode/chrome",
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

在调试窗口点击,开始调试.(须要先在终端执行yarn start)chrome

知识储备

ES6语法
- 导入其余组件/对象/方法import与暴露组件/对象/方法exportnpm
  
  常见用法:json
  1. 从MyText.js中暴露一个组件
```js
import React, { Component } from 'react'babel

export default class MyText extends Component {app
}
```
  2. 在MyText.js同级目录下的一个文件中导入该组件
    js //说明: //路径: './'表示同级目录下的文件 //省略后缀: 后缀为.js的能够省略不写 import MyText from './MyText'
  3. 从util.js工具方法中暴露一个对象
```js
//形式1
export function func1() {dom

}

export function func2() {

}

//形式2 效果等同于形式1

function func1() {

}

function func2() {

}
export default {
func1,
func2
}
```
  4. 从util.js中导入对象或指定方法
```js

//导入整个对象
import util from './../util'

util.func1();
util.func2();

//导入指定方法
import {func1} from './../util'
func1();
```
- 箭头函数(参数) => {函数体}
  几个特性:
  1. 无this
  2. 无arguments
  3. 不可做为构造函数
- Promise
  
  主要用于美化异步操做代码, 使其可以有同步代码的阅读体验, 避免出现地狱回调.
  
  有三种状态:
```
1. padding, 等待结果
2. reject, 拒绝/错误
3. resolve, 成功
```
  eg:
```js
let func1 = () => {
let p = new Promise((resolve, reject) => {
setTimeout(() => {
if (true) {
resolve('success');
} else {
reject();
}
}, 500);
});
return p;
};
let func2 = () => {
let p = new Promise((resolve, reject) => {
setTimeout(() => {
if (false) {
resolve();
} else {
reject('error');
}
}, 500);
});
return p;
};

func
.then((data) => {
```
  //500ms后执行
  console.log(data);
  return func2();
```
})
.then(() => {
```
  //未执行
  console.log('1');
```
}, (errorData) => {
console.log(errorData);
})
.catch((errMsg) => {
```
  //统一处理error
  console.error(errMsg);
```
});
```

JSX语法

内部使用插值表达式, (关于表达式和语句的区别)

eg:

function greeting(text) {
  return <h1>{ text }</h1>
}

//单括号内部使用js表达式,例如:
/*
{ number + 1 }
{ ok ? 'YES' : 'NO' }
{ message.split('').reverse().join('') }
*/

它自己也是表达式的一种, 和JavaScript语句一块儿使用便可.

特殊的属性写法

eg:

class => className

const el1 = (
  <div className="yourName">
    <h1>hello</h1>
    <b>world</b>
  </div>
);

src="example.jpg" => src={yourPath}, typeof yourPath is String

const yourPath = 'example.jpg';
const el2 = {
  <img src={yourPath} />
};

//or
const el3 = {
  <img src="example.jpg" /> //传统html中属性的写法
};

//error
const el4 = {
  <img src="yourPath" />  //路径为yourPath, 而不是example.jpg
};

注意

在JavaScript语句中直接套用html标签或者自定义组件等同于使用React.createElement()方法, 固然这须要使用babel对其进行编译.

DOM element 与 React element
1. DOM element为传统的html标签.
2. React element是一个简单的对象(原文: a plain Object), 由React.createElement()方法获得, 而且全部的React element构成React DOM.
  eg:
  js const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
3. 使用ReactDOM.render()方法能够在DOM中注入React DOM.
  纯React的项目通常来讲只须要一个root DOM.而在一个已有的项目中, 你能够提供多个dom节点, 做为注入React DOM的入口.

扩展

create-react-app默认支持的方法有:

"..."对象展开符

eg:

let obj1 = {
  name: 'zgatry',
  address: '杭州',
  age: 18
};
let obj2 = {
  ...obj1,
  age: 23
};
console.log(obj2);
/*
{
  name: 'zgatry',
  address: '杭州',
  age: 23
}
*/

Object.assign()方法