react之旅（二）react项目目录结构，创建组件，绑定数据

本文主要讲解：React目录结构、React创建组件、 ReactJSX语法、 React绑定数据、React绑定对象
在上一篇中使用 npx create-react-app demo1命令创建了一个react项目，并且用npm start命令将react项目启动起来。

一、项目的目录结构

demo1
	|--node_modules #npm 包的安装目录
	|--public
			|--index.html #react项目的html文件
			|...
	|--src #src目录，一般代码就放在这里
			|--App.css #css文件
			|--App.js #根组件
			|--index.js #react 入口js
			|--...
	|--package.json #package.json目录，配置依赖包，命令等
	|--...

比较关心的是src目录，业务的逻辑，css，图片等静态资源都会放在这个目录中
现在src的目录结构有点混乱，先调整一下

src
	|--components
	|--assets
			|--images
			|--css
	|--index.js
	|--App.js

在src目录下新加了components目录，用来放置组件；assets/images目录来放置图片；assets/css目录用来放置css，调整后目录结构如下（注意，此时npm start会报错，是因为文件改变位置后一些引用地址需要修改，可以直接下载代码查看）：

二、react创建一个组件

在components目录下面创建一个Home组件

// src/components/Home.js
import React from 'react';

class Home extends React.Component{
    render(){
        return (
            <div>
                i am home component.
            </div>
        )
    }
}

export default Home;

在根组件App.js中引用Home组件：

import React from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import './components/Home'
import Home from './components/Home';

function App() {
  return (
    <div className="App">
      <Home></Home>
    </div>
  );
}

export default App;

三、ReactJSX语法

ReactJSX语法其实就是html和js混写的一种语法。

• JSX 注释：推荐使用 {/* 这是注释 */}
• JSX中添加class类名：需要使用 className 来替代 class ；htmlFor 替代 label 的 for 属性
• 在JSX创建DOM的时候，所有节点必须有唯一的根元素进行包裹
• 在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和
• 可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

• 在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

• React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

四、React绑定数据、对象

在组件定义时，定义constructor函数，里面可以用this.state来绑定数据和对象：

import React from 'react';

class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name: "react",
            info: {
                type: "js component",
                componentName: "Home"
            }
        }
    }
    render(){
        return (
            <div>
                I am {this.state.name} component {this.state.info.componentName}.
            </div>
        )
    }
}

export default Home;