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

主要内容

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(, 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 (
      
      

        
你好,我是react 的根组件App.js。
        
这是demo1
        
      
    );
  }
}

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(
            

                
react里面的所有节点都要被根节点包含
                
姓名：{this.state.name}
                
年龄：{this.state.age}
                
对象名字：{this.state.girlfriend.name}
                
对象年龄：{this.state.girlfriend.age}
            
        )
    }
}

export default Home;

页面效果：