React最佳入门

起步

cnpm install -g nrm
nrm use taobao

ES6

// 一旦定义了一个常量就意味着只能对其进行读取操作，即使能改变其内部也不要改变
const a = {};
a.name = "Aaayang";
console.log(a.name);

// 箭头函数没有arguments
// 表达式
let a = () => {};
// 直接返回
let b = () => ({
    name: "Aaayang"
});
console.log(b().name);

// 箭头函数this指向函数所在的上下文环境
let b = {
    name: "Aaayang"
};
b.fun = function() {
    let a = () => {
        return this;
    }
    return a();
}
console.log( b.fun() );// b对象

默认参数与rest

// 默认参数
function fn(a=5, b=6) {
    console.log(a, b);
}
fn();

function test(normal, ...re) {// 剩余参数数组
    console.log(normal, re);
}
test(1,2,3);

sprea(展开)

// 展开数组与对象
function fn(normal, ...re) {
    ott(...re);
}
fn(1, 2, 3, 4);

function ott(a, b, c) {// 会自动展开...re
    console.log(a + b + c);
}

模板字符串

let firstName = "Aaa",
    lastName= "yang";

let str = `My name ${firstName}${lastName}`;
console.log(str);

解构赋值

let human = {
    id: 0,
    name: "Aaayang"
};
let {id, name} = human;
// 想改一下名字
let {id: id1, name: name1} = human;
console.log(id, name);
console.log(id1, name1);

let human = {
    id: 0,
    name: "Aaayang",
    children: {
        c1: "Rose",
        c2: "Sally"
    }
};
let {id, name, children: {c1, c2}} = human;
console.log(id, name, c1, c2);

类

class Animal {
    constructor(a, b, c) {
        this.a = a;
        this.b = b;
        this.c = c;
    }
    move() {
        console.log('I can move');
    }
}
let a1 = new Animal(1, 2, 3);
console.log(a1.a, a1.b, a1.c);
a1.move();

// super继承
class Human extends Animal {
    constructor(name) {
        super(2, 3, 4);// 继承的要点
        this.name = name;
    }
    move() {// 会覆盖父类的方法
        console.log('I am a man');
    }
}

let human1 = new Human("Aaayang");
human1.move();
console.log(human1.a, human1.b, human1.c, human1.name);// 2, 3, 4

ES6模块化

a.js

import fnnn, {ep1, ep2} from './b.js';// fnnn是b.js默认导出的，不需要{}

fnnn();// 'fn from module b'

ep1();// 'ep1'
ep2();// 'ep2'

b.js

function ep1() {
    console.log('ep1');
}
function ep2() {
    console.log('ep2');
}

export {
    ep1,
    ep2
}

export default function fn() {
    console.log('fn from module b');
}

CommonJS模块化

a.js

const Bbb = require('./b.js');

Bbb.ep1();// 'ep1'
Bbb.ep2();// 'ep2'

// b.js

function ep1() {
    console.log('ep1');
}
function ep2() {
    console.log('ep2');
}

module.exports = {
    ep1,
    ep2
}

webpack

// 生产依赖：放到浏览器仍然是需要的
// 开发依赖

npm init --yes
npm install lodash --save // 生产依赖
npm install gulp --save-dev // 开发依赖
npm uninstall lodash --save // 卸载

2.1.3
// 主版本：革命性更新，不兼容API
// 次版本：更新了功能，API向下兼容
// 修订号：BUG修复

~2.1.3// 版本限定
^2.1.3

// babel：JavaScript编译器
babel-core：核心（空白的操作系统）
plugins：es2015-arrow-functions（插件）
pressets：集成好的ES6的各种各样的插件（预设）
.babelrc：配置文件

// webpack：模块打包器
create new webpack.config.js file
create new package.json file
npm i webpack -D

aaac.png

// 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/'
    }
};

// 敲敲敲！！！

// 自定义属性以data开头
ReactDOM.render(
    <div data-abc="aaa">hello worldd</div>,
    document.getElementById("root")
);

// 定义组件
class Nav extends React.component { ... }

组件

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

require('../semantic/dist/semantic.css')
require('./common/style/main.css')

class Nav extends React.Component {
    render() {
        return (
            <div className="ui menu">
                <div className="item">Noods</div>
                <div className="item">Home</div>
                <div className="item">List</div>
            </div>
        );
    }
}

class Body extends React.Component {
    render() {
        return (
            <img className="img" src={ require('./common/img/128H.jpg') }/>
        );
    }
}

ReactDOM.render(
    <div className="ui container">
        <div className="ui dividing"></div>
        <Nav/>
        <Nav/>
        <Body/>
    </div>,
    document.getElementById("root")
);

if(module.hot){
    module.hot.accept()
}