react实战—creat-react-app

.env.development文件
REACT_APP_BASE_API = /v1

"proxy": "http://localhost:4000"

const proxy = require(‘http-proxy-middleware‘);
module.exports = function(app) {
  app.use([process.env.REACT_APP_BASE_API], proxy({ target: ‘http://localhost:5000‘, changeOrigin: true }));
};

// config-overrides.js
const { override, addWebpackAlias } = require(‘customize-cra‘);
const path = require(‘path‘);
module.exports = override(
  // 配置路径别名
  addWebpackAlias({
    pages: path.resolve(__dirname, ‘src/pages‘),
    utils: path.resolve(__dirname, ‘src/utils‘),
    assets: path.resolve(__dirname, ‘src/assets‘)
  })
)

// config-overrides.js
const { override, fixBabelImports } = require(‘customize-cra‘);
const path = require(‘path‘);
module.exports = override(
  fixBabelImports(‘import‘, { libraryName: ‘antd-mobile‘, style: ‘css‘ })
)

// 修改前
"browserslist": {
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}
// 修改后
"browserslist": {
  "development": [
    "> 1%",
    "last 2 versions"
  ]
}

import React, { Component } from ‘react‘;
import styles from ‘./style.module.scss‘;

class PrdDetail extends Component {
  render() {
    return (
      <div className={styles["detail-container"]}>
        <div className={styles.left}></div>
      </div>
    );
  }
}

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      codeBtnText: ‘获取验证码‘,
      phone: ‘‘
    }
  }

  phoneChange(e) {
    this.setState({ phone: e.target.value })
  }
  sendPhoneCode() {
    console.log(this.state.phone)
  }
  render() {
    return (
      <div className="login-box">
        <div className="input-row">
          <input type="tel" className="phone-input" maxLength="11" placeholder="请输入手机号" value={this.state.phone} onChange={this.phoneChange.bind(this)} />
        </div>
        <div className="input-row code-row">
          <input type="text" className="code-input" maxLength="6" placeholder="请输入短信验证码" value={this.state.phoneCode} />
          <input type="button" className="code-btn" value={this.state.codeBtnText} onClick={this.sendPhoneCode.bind(this)} />
        </div>
      </div>
    );
  }
}

class Index extends Component {
  state = {navs: []}
  componentDidMount() {
    request({ url: ‘group/groupContentList/zysrf_index_nav‘ }).then(response => {
      this.setState({navs: response.data})
    })
  }
  render() {
    const imgPrefix = process.env.REACT_APP_IMG_PREFIX
    return (
      <div className="index-container">
        <div className="nav-box clearfix">
          {this.state.navs.map(nav => (
            <div className="nav-item" key={nav.id}>
              <img src={imgPrefix + nav.img_url} />
              <p>{nav.title}</p>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
</div>
  );
}

const messages = [‘React‘, ‘Re: React‘, ‘Re:Re: React‘];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById(‘root‘)
);

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? ‘currently‘ : ‘not‘}</b> logged in.
    </div>
  );
}

// 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// class组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// 渲染组件
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById(‘root‘)
);

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

// All route props (match, location and history) are available to User
function User(props) {
  return <h1>Hello {props.match.params.username}!</h1>;
}

ReactDOM.render(
  <Router>
    <Route path="/user/:username" component={User} />
  </Router>,
  node
);