React学习02----基本使用

项目结构：

index.js是入口文件，引入 App.js，App.js是根组件，用来调用别的组件
整理一下默认的目录
新建一个assets，放静态文件
新建一个components，放自己定义的组件

基本语法
在 components 文件夹下的创建一个组件 Home.js

// 引入 React
import React from 'react';

// 注意类名要大写
class Home extends React.Component{
    // 构造方法：
    constructor(props){
        // 调用父类的构造方法，用于父子组件传值  固定写法
        super(props);
        //react定义数据
        this.state={
            name:"张三",
            userinfo:{
                username:"itying"
            }
        }
    }
    // render 模板  jsx 就是html 和 js 混写
    // 渲染页面
    // {}写的就是js代码，{} 渲染的就是上面的数据
    render(){
        return (
            // 这个里面只能有一个根 div
            <div>
                <h2>react组件里面的所有节点要被根节点包含</h2>
                <p>姓名:{this.state.name}</p>
                <p>对象:{this.state.userinfo.username}</p>
            </div>
        )
    }
}
// 暴露出去 供外部调用
export default Home;

在 App.js 中调用组件 Home 代码如下：

import React, {Component} from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
// 引入
import Home from "./components/Home";


class App extends Component {
    // render 模板 jsx
    // 渲染页面
    render() {
        return (
            //  里面只能有一个 div 的根组件
            <div className="App">
                {/*调用自己创建的 Home.js 组件*/}
                <Home/>
            </div>
        );
    }
}

// 暴露给外部调用
export default App;

运行结果：

源码下载：
https://download.csdn.net/download/zhaihaohao1/10966183