2024年Web前端最全react 案例(无限接近真实开发)_公司写过的react项目，成为一名合格前端架构师

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

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

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

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
})



### 最后

推荐一些系统学习的途径和方法。  

![路线图](https://img-blog.csdnimg.cn/img_convert/abffda3a0cfe5b9baa70f132ab55f248.png)

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

HTML 和 CSS：

![html5知识](https://img-blog.csdnimg.cn/img_convert/2ee0d943c2e65e1bf84360c1c8a40cf6.png)

![css基础知识](https://img-blog.csdnimg.cn/img_convert/f660a2fef40322a6e2c45716d4a97e02.png)