(二)React目录结构分析、创建组件、JSX语法、绑定数据

–目录结构分析

当我们按照第一篇文章的任意一种方式初始化了一个React项目之后,便可以看到以下的一个目录结构(在vscode编辑器中打开的样式):

--node_modules  模块安装后的文件
--public 公共目录,脚手架自动生成,一般无需关心
   -index.html  主页
   -anifest.json 自动生成的配置文件
--src  开发项目的一个目录
   -index.js 是React的核心库,react-dom.js是提偶刚与DOM相关的功能
   -index.css 项目公共的css文件,可以删除,在子组件中引入自身的css
--package.json  项目的配置文件
--README.md 说明文件
--yarn.lock 使用yarn搭建的临时文件

manifest.json文件简介:允许将站点添加至主屏幕,是PWA提供的一项重要功能,当时manifest.json的标准属于草案阶段,Chrome和Firefox已经实现了这个功能,微软正在努力在Edge浏览器上实现,Apple目前正在考虑中

–创建第一个组件

import React, { Component } from 'react';

/***
 * --1 首先有一个构造函数
 * --2 然后是render模板,直接return我们的html页面
 * --3 然后使用export将Home组件暴露出来
 * --4 然后在根组件中引入
 */
//class Home extens React.Component
class Home extends Component{

    //首先有一个构造函数
    constructor(){
        //因为继承Component,所以首先引入super,并且放在其他this之前
        super();

        //定义数据
        this.state={
            name:"张三",
            age:11,
            userinfo:{
                username:"YGQ"
            }
        }
    }

    //然后是render模板
    render(){
      return(
        <div>
            <h2>react组件里面的所有节点要被根节点包含起来</h2>
            
            <p>我是一个d标签,我要实现数据绑定-----{this.state.name}----{this.state.age}</p>

            <p>我是一个p标签,我要实现数据绑定-----{this.state.userinfo.username}----{this.state.age}</p>
        </div>
      );
    }
    

}

//然后使用export将Home组件暴露出来
export default Home;

–绑定属性

/*
绑定属性注意,
    class 需要换成className
    for 需要换成htmlFor
    style 需要写成style={{"color":"red"}}
*/

–引入本地图片

import logo from './images/1.jpg';
<img src={logo} />
或者
es6语法
<img src={require('./images/1.jpg')} />

–引入远程图片

<img src="http://www.baidu.com" />