miaov-React 最佳入门

前端之家收集整理的这篇文章主要介绍了miaov-React 最佳入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

node 环境搭建

快速安装国内镜像

npm i -g nrm
nrm use taobao

简单介绍 ES6

let const

  • let 不可以被重复声明,而 var 可以

箭头函数

  • 等效匿名函数

  • 没有 arguments

  • this 指向了函数所在的上下文环境

  • 函数的返回值

    let a = () => {};  console.log(a); // undefined,误认为返回的是表达式
    let b = () => ({});console.log(b); // {}

剩余参数

function fn(a,...re){ console.log(re) };
    fn(1,2,3)    // [2,3]

解构赋值

let human = { id: 0 };
    let { id: id1} = human;
    console.log(id1);    // 0,已经把 id 给了 id1

  • 是个语法糖,看起来更像 OOP

  • 用法

    class Animal{
    constructor(a,b){    // 传递参数
        this.a = a;
        this.b = b;
    }
    add(){
        return console.log(this.a + this.b)
    }
    }
    let a = new Animal(1,2)
    console.log(a) // {a: 1,b: 2}
    a.add()    // 3
  • 继承

    class Human extends Animal{
    constructor(name){
        super(3,4)    // 执行父类的构造函数
        this.name = name
    }
    }
    let hu = new Human()
    console.log(hu.a)    // 3

简单介绍 commonJS,ES6模块化规范

  • commonJS: require('') / module.exports = {}

  • ES6: import {} from '' / export {}

工作流程

  • 包管理器,管理安装项目依赖:npm ( install,update,remove,analyse )

  • 任务流工具:Grunt,gulp ( 两者无法支持模块化开发 ),webpack ( 模块打包,代码检查等 )

Babel 简单介绍

  • 可以把很多不是 JS 的文件自动编成 JS

  • babel-core: 核心库,类似一个裸机,只有操作系统,需要装软件才能发挥大作用

  • plugins: 插件,各种各样的插件,例如:es2015-arrow-functions 编译箭头函数

  • presets: 预设,会把很多插件打包到一起,例如:react/latest

  • .babelrc: 配置文件,填写 plugins 和 presets

  • 官方网站可以体验:https://babeljs.io

webpack 简单介绍

  • 安装: $ npm i -D webpack

  • 项目结构:

|-dist    // 打包生成文件存放
    |-src
       |- app.js // 入口文件
// webpack.config.js
    
    const path = require('path')
    
    module.exports = {
        entry: ‘./src/app.js’,// 项目入口文件
        output: {    
            filename: 'main.js'    // 打包后的文件
            path: path.resolve(__dirname,'dist/assets')// 打包保存到哪里,绝对路径
            publicPath: '/assets/'    // 未知
        }
    }
  • 执行:$ webpack

原文链接:https://www.f2er.com/react/303100.html

猜你在找的React相关文章