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

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


### 总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)