使用create-react-app创建一个react项目

使用create-react-app创建一个react项目

create-react-app是react官方提供的脚手架，该脚手架为我们省去多余的操作，可以让我们更快捷的开发react项目

目录

使用create-react-app创建一个react项目

 

create-react-app创建项目：

项目结构：

整合Router：

1. 安装：

2. 简单的使用：

创建一个route文件夹，用来存储route相关的文件：

重启项目：npm start

在浏览器中访问：

整合redux：

下载依赖：

在项目中新建store文件夹：src/store

在store中：

在页面中使用store数据：

至此，react项目中便整合了redux、react-router等，注意其中还整合了sass，但是文中并未提及

---

create-react-app创建项目：

# 全局安装create-react-app
npm install -g create-react-app

# 创建项目
create-react-app react-cli-demo

项目结构：

主要是index.js这个入口文件比较重要

整合Router：

1. 安装：

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

2. 简单的使用：

在项目中新建两个页面：

创建一个route文件夹，用来存储route相关的文件：

在router.js中：

import React from 'react'
//导入router相关的组件
import {HashRouter, Route, Switch} from 'react-router-dom'

//导入页面
import Home from '../page/home/home'
import Welcome from '../page/welcome/welcome'

const BasicRoute = () => (
  <HashRouter>
    <Switch>
      <Route exact path="/" component={Home}></Route>
      <Route exact path="/welcome" component={Welcome}></Route>
    </Switch>
  </HashRouter>
)
//注意：一定到导出
export default BasicRoute

在入口文件（index.js）中使用：只有在入口文件中使用，该路由才会生效

//导入router.js文件
import Router from './route/router'
import './index.css';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

重启项目：npm start

在浏览器中访问：

整合Router完成！

 

整合redux：

下载依赖：

npm install --save react-redux
npm install --save redux-thunk
npm install --save redux

在项目中新建store文件夹：src/store

在store中：

1、创建index.js：配置和创建redux，以便在项目中使用

import { createStore, applyMiddleware, compose } from 'redux';
// 引入模块化文件
import reducer from './reducer.js';
import thunk from 'redux-thunk';

// 这里是使用浏览器插件的配置
const composeFn = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
const enhancer = composeFn(applyMiddleware(thunk))

// 创建并导出仓库
const store = createStore(reducer, enhancer);
export default store;

2、创建reducer.js：统一存放模块

// 存放模块（数据）
import { combineReducers } from 'redux';
import HomeReducer from './modules/home'

// 模块化管理状态
let reducer = combineReducers({
  home: HomeReducer,
})
export default reducer

3、创建modules文件夹：用来保存模块文件，模块：当项目很大时，模块可以让我们的数据更清晰，更易于使用

新建一个home.js文件：

//放入仓库的模块数据
const defaultState = {
  num: 1
}
//对仓库数据修改的方法：
const HomeReducer = (state = defaultState, action) => {
  //根据不同的type，来执行不同的代码
  if (action.type === 'addNum') {
    // 这里写逻辑,还有，一定要JSON.parse(JSON.stringify(state))，不转有坑
    let initState = JSON.parse(JSON.stringify(state));
    initState.num = initState.num + 1;
    return initState;
  }
  return state;
}

export default HomeReducer

完成以上步骤之后，整个store的结构构建完成

在页面中使用store数据：

1、在入口文件中引入并使用：注意代码与引入route时有所不同

import React from 'react';
import ReactDOM from 'react-dom';

import Router from './route/router'
import './index.css';
import reportWebVitals from './reportWebVitals';
//导入store相关文件
import { Provider } from 'react-redux';
import store from './store/index'

ReactDOM.render(
  <React.StrictMode>
    {/* 使用Provider包裹，再把store传下去，那么就可以使用里面的数据了 */}
    <Provider store={store}>
      <Router />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2、在home页面中（home.jsx）：

import home from './home.sass'
//导入redux相关配置
import { connect } from 'react-redux';
import React from 'react'

//注意：export default 代码被去掉了，统一再文件末尾导出文件
class Home extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      info:'没有信息！'
    }
  }
  render(){
    return (
      <div>
        <h1>登录页面</h1>
        <h2>登录次数：{this.props.num}</h2>
        <button onClick={this.props.clickButton}>+</button>
        <h3>{this.state.info}</h3>
        <h3>{this.props.num}</h3>
        <a href="#/welcome">跳转至welcome页面</a>
      </div>
    )
  }
}
//主要是如下两个方法：
//在页面中使用store：

//1、将store仓库中的数据绑定到当前的props上
const stateToProps = (state) => {
  return {
    num: state.home.num,
  }
}
//2、把action里的方法绑定到props上，可以通过Props使用，一般用于修改store里的数据
const dispatchTOProps = (dispatch) => {
  return {
    clickButton() {
      let action = {
        type: 'addNum',
      }
      // 用dispatch触发Store里的方法
      dispatch(action)
    },
  }
}

//3、通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
export default connect(stateToProps, dispatchTOProps)(Home);  //Home 对应 class Home...中的Home 

3、在home页面中操作store的数据，那么我们想要在另一个页面中查看，该store数据是否有改变；因此在welcome页面中使用store：welcome.jsx

方法与home.jsx中的方法一致

import welcome from './welcome.sass'
import { connect } from 'react-redux';
import React from 'react'

class Welcome extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      info:"没有信息"
    }
  }
  render(){
    return (
      <div>
        <h1>欢迎来到德莱联盟！</h1>
        <h2>次数：{this.props.num}</h2>
        <br />
        <button onClick={this.props.clickButton}>+</button>
        <a href="#/">跳转至home页面</a>
      </div>
    )
  }
}

//在页面中使用store：

//1、将store仓库中的数据绑定到当前的props上
const stateToProps = (state) => {
  return {
    num: state.home.num,
  }
}
//2、把action里的方法绑定到props上，可以通过Props使用，一般用于修改store里的数据
const dispatchTOProps = (dispatch) => {
  return {
    clickButton() {
      let action = {
        type: 'addNum',
      }
      // 用dispatch触发Store里的方法
      dispatch(action)
    },
  }
}

//3、通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
export default connect(stateToProps, dispatchTOProps)(Welcome);

4、重启项目，查看store数据是否改变，是否使用成功：

访问home页面：

通过链接跳转至welcome页面：

5、由上述步骤可得，redux使用成功

至此，react项目中便整合了redux、react-router等，注意其中还整合了sass，但是文中并未提及

注意：如果启动项目报错：Cannot find module 'sass'，可以使用cnpm install node-sass安装node-sass依赖解决