React 工程化入门

最新推荐文章于 2025-07-04 22:41:26 发布

原创最新推荐文章于 2025-07-04 22:41:26 发布 · 888 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react.js 专栏收录该内容

1 篇文章

订阅专栏

作为前端三大框架的React,在最近几年的火爆程度也不输Vue3.0和Angular,当我们搭建一个中小型项目的时候,使用React是个很好的选择,在React中，我们可以使用一种纯组件化,面向对象的方式进行组建的创建。这个是Vue所无法比拟的，而且在我们最初搭建项目的时候，虽然Vue会给我们很好的体验，但是当我们的代码变多，业务变得复杂，Vue的代码还是会看上去很乱，没有头绪，所以我推荐大家使用React和Angular当作我们的前端技术框架，我也没有喷Vue的意思，Vue也很到，Vue也很好，但是大型项目其实真的不适合用Vue这种框架去搭建。

React的官方地址如下React 官方中文文档 – 用于构建用户界面的 JavaScript 库大家可以直接访问这个地址进行相关的学习。

项目搭建

首先下载脚手架：

通过npm下载，npm install -g create-react-app 全局安装react脚手架

这里我们下载有可能会很慢所以涉及到一个 npm 换源问题，我们可以通过两种方式进行 npm 换源。

第一种，临时换源：

npm --registry https://registry.npm.taobao.org install  -g create-react-app

第二种，持久换源：

//设置淘宝源
npm config set registry https://registry.npm.taobao.org
//查看设置是否成功
npm config get registry

当我们下载完之后我们就可以通过npm install 进行下载了。

下载完之后我们使用命令：

create-react-app demo //创建一个名字为demo的项目

我们创建完之后的项目结构是这样的：

node_modules 是存放我们的所有第三方依赖的文件夹，其实就是package.json里面依赖的那些第三方库，src文件夹存放我们的源文件，就是我们写的代码，public存放我们的公共文件。

下面来说一下 src 文件夹里面的文件：

其中index.js就是我们的入口文件，我们的 index.js 里面有一个 ReactDOM.render()这个函数就是挂载我们的组件到html上面，里面华仔的组件就是APP这个组件，那么我们只需要改变App这个组件里面内容，我们的页面显示的内容以就会跟上变了。

好了这个时候我们就能开始写代码了，我写前端代码的习惯是结构首先三层分离，由于这些前端工程性框架的出现，写前端其实和写后端基本上差不多了，我首先会建立三个文件夹。

1，view 用来存放所有的前端展示代码（只存放第一层代码）。

2，service 用来存放我们的前后端交互接口代码。

3，components 用来存放我们的组件代码。

如下图所示，其实一个components里面的代码和view里面的代码是相互对应的。

这样一个基本的项目架构就搭建完成了，只有搭建好项目架构我们写的代码才不会乱。有的小伙伴写代码为什么越写越乱，就是因为没有一个很好的项目架构，这样的话我们的项目架构就会很清晰，那个东西该放了哪都会有一个很清晰位置。

下面我们在view里面创建一个文件夹叫做login，这个文件夹存放我们的login组件。

login里面会有两个文件，一个是样式文件另一个是 js 文件，我们来js里面写我们代码。

我们首先创建一个类继承我们的 React.Component 这个基类，当继承了这个类之后我们的类就是一个组建了，当然继承之后你的 ide 会报错，应为你得实现一个方法这个方法就是 render() 方法，然后使用return()里面写我们 jsx 代码，如下图所示：

下面就来写我们的第一个组件，登陆窗口组件，我们的组件全都放在components里面在components里面存放和views里面一样的目录，不同的是components里面存放所有的组件，如下图所示就是我们的结构：

这样就可以避免混淆组件，我们每个页面只对应一个组件文件夹，在组件文件夹里面我们还能够新建更多的组件文件夹。

下面开始在login_model.js编写第一个组件，用同样的方法，继承 React.Component 然后render（） return ，这就是八股文了，只要按照规范来就可以，虽然React，编写组件方法很多，但是这一种面向对象的方法，是最好的，原因不多解释，大家翻阅一下面向对象的书籍就可以得到结论。

import React from 'react';
import './login_model.css';

//建立loginModel组件
class LoginModelComponent extends React.Component {


    render() {
        return (
            <div>
                LoginModel组件
            </div>
        )
    }
}


export default LoginModelComponent;

接下载把它挂载到LoginBody2这个页面里面，

import React from 'react';
import LoginModelComponent from '../../components/login/login_model'
import './login.css';

class LoginBody2 extends React.Component {
    
    render() {
        return (
            <div>
                <LoginModelComponent></LoginModelComponent>
            </div>
        )
    }
}

export default LoginBody2

最后挂载到index.js里面：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import LoginBody2 from './view/login/login';


import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <LoginBody2></LoginBody2>,
  document.getElementById('root')
);

这样我们使用npm run start 来启动项目进行查看，可以看到第一个组件编写完成，下一节我们来编写整个页面。