主要內容

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;
 

頁面效果：