四、React创建组件、 JSX语法 绑定数据

接：https://www.cnblogs.com/chenxi188/p/11702799.html

用上节建好的my-app项目：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

一、绑定状态数据state

1.在src目录下新建一个componets，用来放自己建立的组件：

在components文件夹下，新建一个组件：home.js输入如下内容

import React,{Component} from 'react';

class Homes extends Component{
    //接下来两行为固定写法
    constructor(){
        super();
        
                //以下几行为建立一个组件状态数据
        this.state={
         name:"Alice",
         age:20,
         sex:"女",
         userinfo:{username:'sky'}
        }
    }
        
    render(){

                //下面的this.state.xxx为把状态数据绑定到前端
        return(
            <div>
                <h2>这里是Home.js组件</h2>
                <p>我的名字是：{this.state.name}</p>
                <p>我的年龄是：{this.state.age}</p>
                <p>我的性别是：{this.state.sex}</p>
                <p>我的用户名：{this.state.userinfo.username}</p>
            </div>
                     );        
    }
};

export default Homes;

2.然后把APP.js根组件改成如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

//从components文件夹下引入写好的Home.js组件
import Homes from './components/Home';

class App extends Component {
//以下的<Homes />为把home时写好的组件引用过来
  render (){
    return(
    <div className="App">
     <h1>这里是app.js根组件</h1>
     
     <Homes />
    </div>
    );}
}


export default App;

3.运行：回到my-app项目里在cmd运行代码，启动项目查看效果

npm start

运行效果：