React基础-脚手架

React提供了用于创建脚手架库:create-react-app

1. 全局安装  npm install -g create-react-app
2. create-react-app hello-react
3. cd hello-react
4. npm start

执行完 create-react-app 完成之后会出现下面的提示
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject 
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
    会展开webpack的所有文件, 不可逆 

We suggest that you begin by typing:

  cd hello-react
  npm start

public 和 src 是必不可少的两个文件夹, React启动的时候会自动到这两个文件夹里去寻找资源
    public: 主要存放的是静态资源, 以及项目里唯一一个html文件
    src: 是项目的主要文件夹
        index.js: 是入口文件, 要在这个文件里引入React, ReactDOM, 最后调用ReactDOM.render() 进行渲染
        App.jsx: 组件库主要文件, 引入其他组件库组成最终的页面

index.js 入口文件

// 引入react
import React, { Component } from 'react'

// 引入react dom
import ReactDOM from 'react-dom'

// 引入组件app
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

App.jsx 组件库文件

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

插件列表

代码块快捷方式

功能界面的组件化编码

1. 拆分组件: 拆分界面, 抽取组件
2. 实现静态组件: 使用组件实现静态界面效果
3. 实现动态组件
    1. 动态显示初始化数据
        数据类型
        数据名称
        保存在哪个组件
    2. 交互(从绑定事件监听开始)