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渲染页面了