React基础（貳）———组件

一、组件

类组件

函数式组件

组件的嵌套

/**
 * rcc快捷键
 *
 */
import React, { Component } from "react";

class Child extends Component {
  render() {
    return <div>Navbar's child</div>;
  }
}

class Navbar extends Component {
  render() {
    return (
      <div>
        Navbar
        <Child></Child>
      </div>
    );
  }
}

function Swipper() {
  return <div>Swipper</div>;
}

const Tabbar = () => {
  return <div>Tabbar</div>;
};

export default class App extends Component {
  render() {
    return (
      <div>
        <Navbar></Navbar>
        <Swipper></Swipper>
        <Tabbar></Tabbar>
      </div>
    );
  }
}

样式

import React, { Component } from "react";
import "./css/01-index.css";
export default class App extends Component {
  render() {
    var name = "鱼鱼";
    var obj = {
      backgroundColor: "yellow",
      fontSize: "40px",
    };
    return (
      <div>
        {10 + 20} - {name}
        <div style={obj}>11111111</div>
        <div style={{ background: "red" }}>11111111</div>
        <div className="active">3333333333333333</div>
        <div id="myapp">99999999999999</div>
        <label htmlFor="username">用户名：</label>
        <input type="text" id="username"></input>
      </div>
    );
  }
}

.active{
    background-color: aqua;
}
#myapp{
    background-color: brown;
}