react 案例(无限接近真实开发)

index.js

整体说明: 技术栈:react,react-redux, redux-thunk

1. 新建一个文件夹 (桌面)

2. 文件夹中打开小黑窗(cmd)

3.输入命令

npx create-react-app hmtt-app
// 解释: npx create-react-app 是固定命令 hmtt-app 表示项目名称，可以修改

4. cd hmtt-app中

5. 下包

6.删除不必要的文件

7.准备启动项目

app.js

function App() {
  return (
  <div>根组件App</div>
  );
}

export default App;

index.js

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

import App from ./App;


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

index.js

import React from react;
import ReactDOM from react-dom;
import ./styles/index.css
import App from ./App;
import {Provider} from react-redux
import store from ./store
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById(root))

运行命令

npm run start

开发开始

新建组件文件夹及所需的样式

channel.js

import React from react

export default function Channel() {
  return (
    <ul className="catagtory">
      <li className="select">开发者资讯</li>
      <li>ios</li>
    </ul>
  )
}

NewsList.js

import React from react
import avatar from ../assets/back.jpg
export default function NewsList() {
  return (
    <div className="list">
      <div className="article_item">
        <h3 className="van-ellipsis">python数据预处理 ：数据标准化</h3>
        <div className="img_box">
          <img src={avatar} className="w100" alt="" />
        </div>
        <div className="info_box">
          <span>13552285417</span>
          <span>0评论</span>
          <span>2018-11-29T17:02:09</span>
        </div>
      </div>
    </div>
  )
}

/store/index.js (固定写法)

import { createStore, applyMiddleware } from redux
import { composeWithDevTools } from redux-devtools-extension
import thunk from redux-thunk  
import reducer from ./reducers

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

export default store

/store/reducers/index.js

import { combineReducers } from "redux";
import channel from ./channel
import newsList from ./newsList
export default combineReducers({
  channel,
  newsList
})

/store/reducers/channel.js

import { CHANNEL_GET } from ../actionTypes
const initState = {
    activeId:1, // 当前选中频道ID
    channels:[] // 导航栏的所有数据
}
const channel = (state=initState,action)=>{
    switch (action.type) {
        case CHANNEL_GET:
            
            break;
    
        default:
            return state; // 默认返回state
    }
}
export default channel

/store/reducers/newsList.js

const initState = [];

const newsList = (state = initState, action) => {
  switch (action.type) {
    case "aaa": //先给个aaa占位
      break;

    default:
      return state; // 默认返回state
  }
};
export default newsList;

/components/channel.js

/store/actions/channel.js

import axios from "axios"; // 引入axios
import { CHANNEL_GET } from "../actionTypes";
export const getChannel = () => { 
  const fn = async (dispatch) => {
    const res = await axios.get("http://geek.itheima.net/v1_0/channels");
    console.log("导航栏数据", res);
    dispatch({ type: CHANNEL_GET, payload: res.data.data.channels });
  };
  return fn;
};
// 在getChannel函数中 创建一个函数fn ,在fn函数中发请求获取数据
// 调用dispatch()设置type和接收数据
// 返回fn

/store/actionTypes (固定写法)

export const CHANNEL_GET = channel/get

/store/reducers/channel.js

此时已经获取到数据了 接下来就是使用useSelect渲染页面了