React准备

React 准备

初始化项目

1. 安装create-react-app

   打开终端执行: npm i create-react-app -g

2. 执行create-react-app AwesomeProject

3. 执行yarn start

在vscode中添加chrome调试工具

1. 在vscode的扩展中搜索并安装Debugger for Chrome

2. 在调试窗口(ctrl+shift+d)配置, 选择"添加配置"

3. 写配置文件(launch.json)

   eg:

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

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

知识储备

1. ES6语法

   • 导入其他组件/对象/方法import与暴露组件/对象/方法export

     常见用法:

     1. 从MyText.js中暴露一个组件

        import React, { Component } from 'react'
        
        export default class MyText extends Component {
        
        }
        

     2. 在MyText.js同级目录下的一个文件中导入该组件

        //说明: 
        //路径: './'表示同级目录下的文件
        //省略后缀: 后缀为.js的可以省略不写
        import MyText from './MyText' 
        

     3. 从util.js工具方法中暴露一个对象

        //形式1
        export function func1() {
          
        }
        
        export function func2() {
          
        }
        
        //形式2 效果等同于 形式1
        
        function func1() {
          
        }
        
        function func2() {
          
        }
        
        export default {
          func1,
          func2
        }
        

     4. 从util.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:

     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);
     });
     
     

2. JSX语法

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

      eg:

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

   2. 它本身也是表达式的一种, 和JavaScript语句一起使用即可.

   3. 特殊的属性写法

      eg:

      1. class => className

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

      2. 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
      };
      

   4. 注意

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

3. DOM element 与 React element

   1. DOM element为传统的html标签.

   2. React element是一个简单的对象(原文: a plain Object), 由React.createElement()方法得到, 并且所有的React element构成React DOM.

      eg:

      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()方法