015：React教程

1：目录

1：脚手架 cra

2：目录结构

3：优缺点

4：类组件

5：函数式 组件

6：jsx访问样式 

2：正文

一：初步介绍

1：脚手架

2：类组件

代码

// 1 import 必须写在最上面
import React from "react";


// ES6 类的概念
class TestClass extends Object {
    // 2 构造函数
    constructor(a) {
        // 3 必须调用父类的构造函数
        super();
        // 接受传过来的参数
        this.a = a;
    };


    test() {
        console.log("test");
    }
}
// 创建对象 new+构造函数
// var testObj = new TestClass();
// testObj.test();
// console.log(testObj.a);


class ChildTest extends TestClass {
    constructor(a) {
        // 传给父类的参数
        super(a);
        this.b = 10;
    }
    // testtestChild函数
    testChild() {
        console.log(`ChildTest is ${this.b}`);
    }
}

var testChidObj = new ChildTest(3);
testChidObj.test();
console.log(testChidObj.a);

testChidObj.testChild();
console.log(testChidObj.b);


// 4：React 组件类  
// 组件名字首字符大写
class App extends React.Component {
    // 渲染函数
    render() {
        // 最外层必须是唯一父类 
        return <div>
            <h1>hello react component</h1>

            <ul>
                <li key={1}>111</li>
                <li key={2}>222</li>
                <li key={3}>333</li>
            </ul>
        </div>
    }

}

// 5：模块化导入导出
export default App;

 

3：函数组件

代码

命名式函数组件

function App() {
    // 加括号是为了代码对齐 
    return (
        <div>
            Hello from App component
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
            </ul>
        </div>
    );
}

// 无状态组件
export default App;

赋值式函数组件

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return (
            <div>
                <NavBar></NavBar>
                <Body></Body>
                <Tabbar></Tabbar>
            </div>
        )
    }
}

// 剪头函数简写
const NavBarChild = () => <div>NavBarChild</div>

// 类组件
class NavBar extends Component {
    render() {
        return (
            <div>NavBar
                <NavBarChild>NavBarChild</NavBarChild>
            </div>
        )
    }
}

// 函数组件
function Body() {
    return (
        <div>Body</div>
    )
}

// 剪头函数组件
const Tabbar = () => {
    return (
        <div>Tabbar</div>
    )
}

4：嵌套组件

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return (
            <div>
                <NavBar></NavBar>
                <Body></Body>
                <Tabbar></Tabbar>
            </div>
        )
    }
}

// 箭头函数简写
const NavBarChild = () => <div>NavBarChild</div>

// 类组件
class NavBar extends Component {
    render() {
        return (
            <div>NavBar
                <NavBarChild>NavBarChild</NavBarChild>
            </div>
        )
    }
}

// 函数组件
function Body() {
    return (
        <div>Body</div>
    )
}

// 剪头函数组件
const Tabbar = () => {
    return (
        <div>Tabbar</div>
    )
}

5：jsx 中访问 css

 

import React, { Component } from 'react'
// 可以导入是因为 webpack 支持 
import "./css/index.css";

// 内部需要使用驼峰命名法 
var pCss = {
    color : "blue",
    fontSize: "20px",
    backgroundColor: "thistle"
}
export default class App extends Component {
  render() {
    return (
      <Body>App</Body>
    )
  }
}

function Body () {
    return (
        <div>
            {/* 1:插值表达式 用{}包裹 */}
            <h1 >{10 > 20 ? "标题1" : "标题2"}</h1>
            
            {/* 2:使用对象来表达类型 */}
            <div style={pCss}>内容</div>

            {/* 3：引用外部css
                使用 className 来添加css类名
                因为 class和 js 中的类冲突

                for 修改成 htmlFor 是因为和js 中的 for 冲突
            */}
            <div className='bg'>11111</div>
        </div>
    )
}

 

index.css 文件

.bg {
    color: aqua;
    font-size: 30px;
    background-color: purple;
}

详解

 

 

 

 

3：引用

posted on 2019-09-25 07:10  风zk  阅读(166)  评论(0)  编辑  收藏  举报

导航