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>
      );
      
      1. 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 elementReact 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()方法

posted @ 2017-07-13 17:19  君寻不惑  阅读(165)  评论(0编辑  收藏  举报