React 自学总结(1)

创建一个react项目

• 安装nodejs
• 安装cnpm淘宝镜像
• 安装yarn
• 安装脚手架：cnpm install -g create-react-app
• 先cd到项目目录，创建项目create-react-app 项目名
• 启动项目:先cd到项目目录中再执行npm start或者yarn start

创建一个组件

• 在components文件夹中创建Home.js文件
• 引入React和React下面的Component ：

import React, { Component } from 'react';

• 自定义名称Home依赖于Component，render为模板，语法为jsx，js和html混写，可以在return后直接写html语句

class Home extends Component {
    constructor() {

    }
	//render是模板
    render() {
        return <div>你好 react</div>
    }
}

• 最后暴露文件

export default Home;

挂载到根模块上

• 先引入

import Home from './Component/Home';

• 直接使用Home组件

import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';

import Home from './Component/Home';

class App extends Component {
  //render是模板
  render() {
    return (
      <div className="App">
        hello react
        <Home></Home> //也可以使用单标签<Home/>
      </div>
    );
  }
}

export default App;

react项目结构

• node_modules是模块安装后的文件
• public是公共目录，入口文件index.html在其中
• src是开发项目的目录
  • index.js文件中引入了

import React from 'react';  //react的核心库
import ReactDOM from 'react-dom';  //提供与DOM相关的功能
import App from './App';  //引入app组件

//将app组件渲染到root节点上 root节点在index.html中
ReactDOM.render(<App />, document.getElementById('root')); 

• package.json是项目的配置文件

定义数据

• 在js文件中

class Home extends Component {
    constructor() {
        super();
        //定义数据
        this.data = {
            name: '张三',
            age: 30,
            userInfor: {
                job: '程序员',
                money: '10000'
            }
        }
    }
}

绑定数据

• 用单括号括起来

class Home extends Component {
    constructor() {
        super();
        //定义数据
        this.data = {
            name: '张三',
            age: 30,
            userInfor: {
                job: '程序员',
                money: '10000'
            }
        }
    }

    render() {
        return (
            <div>
                <h2>我是home组件</h2>
                <p>姓名：{this.data.name}</p>
                <p>年龄：{this.data.age}</p>
                <p>（对象）职业：{this.data.userInfor.job}</p>
                <p>（对象）月薪：{this.data.userInfor.money}</p>
            </div>
        )
    }
}