react 案例(无限接近真实开发)_公司写过的react项目

}

export default App;

      **index.js**

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

import App from ‘./App’;

ReactDOM.render(, 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(, document.getElementById(‘root’))

 


**运行命令**

npm run start

**开发开始**


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


 ![](https://img-blog.csdnimg.cn/67062babc76545019c0a94c6614fb789.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYWljaGl4aWFuZ2NhaWE=,size_8,color_FFFFFF,t_70,g_se,x_16)


 


                                   **channel.js**

import React from ‘react’

export default function Channel() {
return (

• 
  
• 开发者资讯
• 
  
• ios
• 
  

)
}

**NewsList.js**

import React from ‘react’
import avatar from ‘…/assets/back.jpg’
export default function NewsList() {
return (

python数据预处理 ：数据标准化

13552285417
0评论
2018-11-29T17:02:09

)
}

**/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;

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！