脚手架

安装creat-react-app
创建项目 creat-react-app myApp
运行项目 npm run start
npm run eject 将依赖全部展示在dependenccies
mainifest.json 处理本地缓存

引入依赖

import React, { Component } from 'react'
import { render } from 'react-dom'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Route, withRouter, Link } from 'react-router-dom'
import { createStore, combineReducers } from 'redux'
import { connect } from 'react-redux'
import PropTypes from 'prop-types';
import { createBrowserHistory } from "history";
import { Router } from "react-router";

渲染函数

ReactDOM.render(Component, document.getElementById('root'))

引入、导出组件

import Dialog from '../components/Dialog'
export default connect(
(state,porps) => Object.assign({}, props, state),
{
setLogin
}
)(App)

禁用某个文件的代码检查

/* eslint-enable no-unused-vars /
// 忽略检查的代码
let name = 'jack'
/ eslint-enable no-unused-vars */

项目结构

image.png

数据流

image.png

组件封装

• 组件封装的数据传递过程中，为了方便用户，必须隐藏某些数据操作，可以包裹用户给的函数

父组件
onClick={ wrap(this.delFn.bind(this)) }
子组件
暴露delFn，包含数据操作

检查类型

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};
// 指定 props 的默认值：
Greeting.defaultProps = {
  name: 'Stranger'
};