超级详细的react笔记(六)总结篇

1 引入

• 我们总结一下在开发中使用脚手架开发
• webpack也可以开发,但是由于每一个插件的版本问题,会出现很多坑

2 总结

2.1 项目创建

• build-react(推荐使用)
• 可选择
  • init 基本使用工具
  • complete-project 全部工具
  • simple-project 基本工具+路由

2.1.1 预览

npm install -g build-react

2.1.2 创建

• 创建的为simple-project 模板

build-react init lay

2.1.3 预览

• cnpm i 后启动项目
  

2.1.4 文件结构

2.2 项目开发使用

npm start 启动项目

2.2.1 项目结构

2.2.2 组件的使用

可复用,独立,组合
首字母必须大写(有状态组件和无状态组件)
如果为contructor 不能省略super()

• 创建组件
• 创建组件容器
• 引用组件

创建

• component/documentations.js

import React, {Component} from 'react';

class Documentation extends Component {
  state = {
  };
  render() {
    return <div>组件</div>
  }
}


export default Documentation;

创建容器

• contianers/docs.js

import React, {Component} from 'react';
import Documentation from '~/components/documentation';

class Docs extends Component {
  state = {
  };
  render() {
    return (
      <Documentation />
    );
  }
}

export default Docs;

引用

• 路由中
• 页面中

路由中

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import {hot} from 'react-hot-loader';
import App from '../containers/app';
import Docs from '../containers/docs';

const Router = ({component: Component, children, ...rest}) => (
  <Route
    {...rest}
    render={props => (
      <Component {...props} ><Switch>{children}</Switch></Component>
    )}
  />
);

const Root = () => (
  <BrowserRouter>
    <div className="router-content">
      <Switch>
        <Router path="/" component={App} >
          <Router exact path="/docs" component={Docs} />
        </Router>
      </Switch>
    </div>
  </BrowserRouter>
);

export default hot(module)(Root);

页面

• app.js

import Login from './components/documentation';
ReactDOM.render(<Login />, document.getElementById('app'));

2.2.3 路由的使用

2.2.4 请求的使用

• 需要下载axios

2.2.5 react中的生命周期

2.2.6 react 样式的使用

• 通过style
• 通过类
• 通过classnames依赖控制样式

1 style

<h1 style={{color:'red'}}>我是崽崽呀</h1>

2 className

<h1 className='title'>我是崽崽呀</h1>

3 classnames依赖

<h2> 张艺兴帅? 
<span className={classNames({my:true})}>{flag?'帅':'真帅'}</span>
</h2>

2.2.7 条件语句

2.2.8 新增语法jsx

2.2.9 初始化项目

• eject

2.2.10 事件绑定

四种事件

2.2.11 组件分类

• 受控组件
• 非受控组件

1 受控组件

• 可以被控制的组件数据的双向绑定
• 值的来源:来源自身的绑定
• 应用场景:输入框的双向绑定
• 取值方式:
  • 通过默认事件:e.target.value

2 非受控组件

• 不可以被控制的组件 只需要读取值的组件
• 值的来源:来自于父组件或者请求数据
• 应用场景:渲染数据并且不需要更改数据时
• 取值方式:
  • 通过默认事件:e.target.value
  • 通过属性绑定:ref="inputRef"---- this.refs.inputRef.value
  • 通过创建:this.inputRef=createRef()----ref={this.inputRef}----this.inputRef.current.value

2.2.12 注释

• {/*我是注释*/}