从零到实战:React无人点餐收银系统教程(2)React目录结构分析

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Hreticent/article/details/84255994

主要内容

1.React目录结构分析

2.创建组件

3.JSX语法

4.绑定数据 绑定对象

5.React绑定属性( 绑定class  绑定style 图片)

删除没有用的文件并添加assets目录

如下图：今天主要讲解Home.js

index.js

// React是React的核心库
// ReactDOM是提供DOM相关的功能
import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';

// 引入App.js 这个组件 注意组件名字的首字母必须大写
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

App.js

import React, { Component } from 'react';
// import logo from './assets/images/logo.svg';

import './assets/css/index.css'

// 引入Home组件
import Home from './components/Home'
class App extends Component {
  render() {
    return (
      
      <div className="App">
        <h2>你好,我是react 的根组件App.js。</h2>
        <h3>这是demo1</h3>
        <Home />
      </div>
    );
  }
}

export default App;

Home.js

import React, {Component} from 'react';

class Home extends Component{

    // 构造函数
    constructor(){
        super();

        // react 定义数据 
        this.state={
            name:"令狐冲",
            age:"25",
            girlfriend:{
                name:"任盈盈",
                age:"24",
                home:"mojiao"

            }
        }
    }
    // 方法之间不用写逗号
    render(){

        // React创建组件、 ReactJSX语法、 
        // React绑定数据 React绑定对象
        return(
            <div>
                <h4>react里面的所有节点都要被根节点包含</h4>
                <p>姓名：{this.state.name}</p>
                <p>年龄：{this.state.age}</p>
                <p>对象名字：{this.state.girlfriend.name}</p>
                <p>对象年龄：{this.state.girlfriend.age}</p>
            </div>
        )
    }
}

export default Home;

页面效果：