React项目

最新推荐文章于 2024-07-25 22:29:58 发布
最新推荐文章于 2024-07-25 22:29:58 发布
阅读量209 收藏
点赞数
分类专栏： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36883141/article/details/95511832
版权
项目依赖安装

将项目开发基础文件react-mobx-starter-master-.zip解压缩，并用这个目录作为项目根目录
在项目根目录中，执行下面的命令，就会自动按照package.json的配置安装依赖模块
文件链接:https://pan.baidu.com/s/15pG9w2awFVsNZTGljSiU-A
提取码:d1fj

$ npm install

或者

$ npm i

安装完成后，会生成一个node_modules，里面是安装的所有依赖的模块

项目整体说明

在这里插入图片描述

配置文件详解

package.json

npm init产生的文件，里面记录项目信息，所有项目依赖
版本管理

"repository": {
 "type": "git",
 "url": "https://192.168.124.135/react-mobx/react-mobx-starter.git"
}

项目脚本管理

"scripts": {
    "test": "jest",
    "start": "webpack-dev-server --config webpack.config.dev.js --hot --inline",
    "build": "rimraf dist && webpack -p --config webpack.config.prod.js"
  }

scripts属性是一个字典描述，key是名字，value是能够让npm运行的脚本内容
运行时只要输入$ npm run key_name即可

start：启动webpack的dev server开发用WEB Server，只要提供2个功能：静态文件支持、自动刷新和热替换HMR(Hot Module replacement)，对应$ npm run start

  • --hot 启动HMR
    - HRM可以在应用程序运行中替换、添加、删除模块，而无需重载页面，只把变化部分替换掉。不适用HMR则自动刷新会导致这个页面刷新
  • –inline默认模式，使用HMR的时候建议开启inline模式。热替换时会有消息显示在控制台
    build:读取指定的配置文件使用webpack构建打包，对应 $ npm run build
    项目依赖
    devDependencies开发时依赖，不会打包到目标文件中，对应npm install xxx --save-dev.
    dependencies运行时依赖，会打包到项目中，对应 npm install xx --save
    开发时依赖
 "devDependencies": {
 "babel-core": "^6.24.1",
 "babel-jest": "^19.0.0",
 "babel-loader": "^6.4.1",
 "babel-plugin-transform-decorators-legacy": "^1.3.4",
 "babel-plugin-transform-runtime": "^6.23.0",
 "babel-preset-env": "^1.4.0",
 "babel-preset-react": "^6.24.1",
 "babel-preset-stage-0": "^6.24.1",
 "css-loader": "^0.28.0",
 "html-webpack-plugin": "^2.28.0",
 "jest": "^19.0.2",
 "less": "^2.7.2",
 "less-loader": "^4.0.3",
 "react-hot-loader": "^4.3.12",
 "rimraf": "^2.6.2",
版本号指定：
版本号 ，严格安装指定版本号的模块
~版本号 ，例如 ~1.2.3 表示安装1.2.x中最新版本，不低于1.2.3，但不能安装1.3.x
^版本号 ，例如 ^2.4.1 表示安装2.x.x最新版本不低于2.4.1
latest ，安装最新版本
1.2.x或1.x
* 任意版本
1.2.7 || >=1.2.9 <2.0.0 ，可以安装1.2.7，或1.2.9本身或者之上的1.2.x版本，但不能是2.x版本
babel 转译
因为开发用了很多ES6语法。babel从6.x开始babel拆分成很多插件，需要什么引入什么。
babel-core 核心模块。
babel-loader webpack把HTML、CSS、JS、图片、字体等资源看做模块，就可以像JS一样加载这些模块。文件类
型不同，就需要各种各样的loader。babel-loader加载ES6+代码转换为ES5。
babel-preset-xxx 预设的转换插件
babel-plugin-transform-decorators-legacy 下面的课程用到了装饰器，这个插件就是转换装饰器用的。
css样式相关
less、less-loader、css-loader、style-loader
react-hot-loader react热加载插件，希望改动保存后，直接在页面上直接反馈出来，不需要手动刷新。
source-map 文件打包，js会合并或者压缩，没法调试，用它来看js原文件是什么。source-map-loader也需要
webpack的 loader
webpack 打包工具，2.4.1 发布于2017年4月，当前2.7.0发布于2017年7月
webpack-dev-server 启动一个开发时用的server
运行时依赖
 "source-map": "^0.5.6",
 "source-map-loader": "^0.2.1",
 "style-loader": "^0.16.1",
 "uglify-js": "^2.8.22",
 "webpack": "^2.4.1",
 "webpack-dev-server": "^2.4.2"
 }

版本号指定:

  • 版本号，严格安装指定版本号的模块
  • 版本号，例如1.2.3表示安装1.2.x中的最新版本，不低于1.2.3，但不能安装1.3.x
  • ^版本号，例如^2.3.1表示安装2.x.x最新版本不低于2.4.1
  • latest,安装最新版本
  • 1.2.x或者1.x
  • *任意版本
  • 1.2.7 || >=1.2.9<2.0.0，可以安装1.2.7，或1.2.9本身之上的1.2.x版本，但不能是2.x版本

babel转译
因为开发用了很多ES6语法，babel从6.x开始babel拆分成很多插件，需要什么引入什么
babel-core核心模块
babel-loader webpack把HTML、CSS、JS、图片、文字等资源看做模块，就可以像JS一样加载这些模块，文件类型不同，就需要各种不同的loader。babel-loader加载ES6+代码转换为ES5
babel-preset-xxx预设的转换插件
babel-plugin-transform-decorators-legacy甬道了装饰器，这个拆安就是转换装饰器用的

css样式相关
less、less-loader、css-loader、style-loader
react-hot-loader react热加载插件，希望改动保存后，直接在页面上直接反馈出来，不需要手动刷新。
source-map 文件打包，js会合并或者压缩，没法调试，用它来看js原文件是什么。source-map-loader也需要webpack的 loader
webpack 打包工具，2.4.1 发布于2017年4月，当前2.7.0发布于2017年7月
webpack-dev-server 启动一个开发时用的server

运行时依赖

"dependencies": {
 "antd": "^3.10.9",
 "axios": "^0.16.1",
 "babel-polyfill": "^6.23.0",
 "babel-runtime": "^6.23.0",
 "mobx": "^4.6.0",
 "mobx-react": "^5.4.2",
 "react": "^16.6.3",
 "react-dom": "^16.6.3",
 "react-router": "^4.3.1",
 "react-router-dom": "^4.3.1"
 }

antd 即 ant design，基于react实现，蚂蚁金服开源的react的UI库。做中后台管理非常方便
axios 异步请求支持
babel-polyfill 由于babel只转译ES6语法，像Promise、Symbol等对象的新的API并不转译。写好polyfill就让你的
浏览器支持，帮你抹平差异。
react 开发的主框架
react-dom 支持DOM
react-router 支持路由
react-router-dom DOM绑定路由
mobx 状态管理库，透明化。
mobx-react mobx和react结合的模块。react和mobx是一个强强联合

babel配置

.babelrc babel转译的配置文件

{
 "presets": [
 "react",
 "env",
 "stage-0"
 ],
 "plugins": [
 "transform-decorators-legacy", 
 "transform-runtime",
 "react-hot-loader/babel"
 ]
}
webpack配置

webpack.config.dev.js
这是一个符合Commonjs的模块
module.exports导出
devtool:‘source-map’

  • 生成及如何生成source-map文件
  • source-map适合，生成环境使用，会生成完成Sourcemap独立文件
  • 由于在Bundle中添加了引用注释，所以开发工具知道如何找到Sourcemap

entry入口

  • 描述入口。webpack会从入口开始，找到直接或间接的模块和库构建依赖树，最后输出为bundles文件中
  • entry如果是一个字符串，定义就是入口文件
  • 如果是一个数组，数组中最后一项是入口文件，其他项先加载，可以配置的热加载插件来自动刷新页面
  • 如果是一个对象，可以支持多入口，也可以是函数，返回以上的字符串或者数组或对象，好处是动态生成

output输出

  • 告诉webpack输出bundles到哪里，如何命名
  • filename 定义输出的bundle的文件名称
  • path输出目录是_dirname+‘dist’,_dirname是nodejs中获取当前js文件所在的目录名，path是nodejs中的路径处理模块
  • pathlicPath可以是绝对路径或者相对路径，一般会以/结尾，/assets/表示网站根目录下assets目录下

resolve解析

  • 设置模块如何被解析。
  • extensions 自动解析扩展名。’.js’的意思是，如果用户导入模块的时候不带扩展名，它尝试补全。
    module 模块
  • 如何处理不同的模块
  • rules 匹配请求的规则，以应用不同的加载器、解析器等。
module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: [
 { loader: 'babel-loader' }
 ]
 }, {
 test: /\.css$/,
 use: [
 { loader: "style-loader" },
 { loader: "css-loader" },
 ]
 }, 
 {
 test: /\.less$/,
 use: [
 { loader: "style-loader" },
 { loader: "css-loader" },
 { loader: "less-loader" }
 ]
 }
 ]
},
  • test 匹配条件的
    exclude 排除的， /node_modules/打包排除目录。这一句一定要有，否则，编译就把这个目录下所有文件也拿进来了，巨大无比。
    use 使用模块的UseEntries列表中的loader。
    rules中对.js结尾的但不在node_modules目录的文件使用转译babel-loader。

加载器：

  • less-loader 对less的支持预编译为CSS
  • css-loader 加载css
  • style-loader通过

LESS
CSS好处简单易学，但是坏处是没有模块化、复用的概念，因为它不是语言。
LESS是一门CSS的预处理语言，扩展了CSS，增加了变量、Mixin、函数等开发语言的特性，从而简化了CSS的编
写。
LESS本身是一套语法规则及解析器，将写好的LESS解析成CSS。LESS可以使用在浏览器端和服务器端。

@color: #4D926F; 
#header { 
color: @color; 
} 
h2 { 
color: @color; 
}

可以使用解析成如下的CSS

#header { 
color: #4D926F; 
} 
h2 { 
color: #4D926F; 
}

LESS在服务器端使用，需要使用LESS编译器， $ npm install less ，本项目目录已经安装过了。

编译输出到控制台
$ node_modules/.bin/lessc test.less
$ npx lessc test.less
编译输出到文件
$ node_modules/.bin/lessc test.less test.css
$ npx lessc test.less test.css

plugins：webpack的插件

  • HotModuleReplacementPlugin 开启HMR
  • DefinePlugin 全局常量配置

devServer，开发用server

devServer: {
 compress: true,
 port: 3000,
 publicPath: '/assets/',
 hot: true,
 inline: true,
 historyApiFallback: true,
 stats: {
 chunks: false
 },
 proxy: {
 '/api': {
 target: 'http://127.0.0.1:8000',
 changeOrigin: true
 }
 }
}

compress 启动gzip
port 启动端口3000
hot 启用HMR
proxy指定访问 /api 开头URL都代理到 http://127.0.0.1:8000 去。

vscode配置

jsconfig.json是vscode的配置文件，覆盖当前配置。

以上是所有配置文件的解释。拿到这个文件夹后，需要修改name、version、description，需要repository仓库地址，需要修改author、license信息。这些信息修改好之后，就可以开始开发了。

启动项目

在项目根目录，使用$ npm run start 或 $ npm start
在这里插入图片描述
启动成功应该就可以访问了
webpack使用babel转译、打包，较为耗时，需要等一会儿。

都枯槐
关注
专栏目录
react项目
sinat_41712862的博客
03-28 229
入口文件 相关配置 使用antd 具体参考antd文档 login.less中知识点 本来垂直排列的需要水平排列 display:flex 需要垂直居中 aligin-items:center 踩坑 login 静态页面写好以后就需要 （1）前台表单验证 （2）收集表单输入数据 高阶函数 高阶组件 配置对象 （1）声明式验证 （2）自定义验证 ...
React 项目
weixin_44403301的博客
03-04 153
React 为什么要使用react-dom？ 经过后面的知识已经了解到有react-native的存在，我们知道RN属于原生应用的开发语言原生应用没有浏览器的存在，所以把react 的核心知识放在了react中让RN和web开发同时使用，而react-dom则是如何在react中进行dom渲染的核心内容，我们常使用react-dom中的render方法。 组件与元素 元素 html中原生的节点，跟...
React项目 实战案例 实用推荐收藏
最新发布
weixin_43483590的博客
07-25 1714
React项目实际开发项目简单案例，对于一些没有项目经验的同学以及之前写过但是知识点生疏的同学参考，有问题欢迎评论区留言，谢谢。
创建一个react项目
lllwky的博客
05-04 966
JSX是JavaScript XML（HTML）的缩写，表示在JS代码中书写HTML结构作用：在React中创建HTML结构（页面UI结构）优势1：采用类似于HTML的语法，降低学习成本，会HTML就会JSX2：充分利用JS自身的可编程能力创建HTML结构。
React项目架构+电商项目布局及代码
07-16
React 项目架构与电商项目布局 React 框架是当前最流行的前端框架之一，对于初学者来说，如何快速上手写一个项目是一个非常重要的问题。本文将为读者详细讲解 React 项目架构、电商项目布局及代码实现。 一、 ...
使用IDEA创建的一个简单的react项目
07-25
在本文中，我们将深入探讨如何使用IntelliJ IDEA（IDEA）创建一个简单的React项目，并在其中添加一个点击计数组件。React是一个流行的JavaScript库，用于构建用户界面，特别是单页应用程序。它采用组件化的方式来...
react-template：React项目的模板
02-15
一个用于React项目的简单模板。 使用Yarn ， Sass ，JSX命名约定并利用功能组件。 包括： GitHub页面构建脚本 ESLint用于样式化源文件 更漂亮的样式化JSON和样式表文件 赫斯基在提交时应用ESLint和Prettier
React项目部署在阿里云服务器ECS
01-07
但是因为一些网络和安全问题暂时停止了这个计划，于是就把该项目转移到阿里云服务器中，这篇笔记记载了如何从第一步开始直到浏览器通过IP可以访问你的React项目为止。 1.编译你的React项目 我的项目是通过create-...
详解React项目中碰到的IE问题
12-12
最近接手一个React项目，在IE下碰到了俩问题 IE11报错如下： 跟踪一下之后，发现是一些其他的npm包里面用到了startsWith这个方法，可以自己polyfill一下： if (!String.prototype.startsWith) { String....
【 React 项目 】- 电影项目
02-04
【 React 项目 】- 电影项目
创建react项目
zhang_zan
01-14 101
cnpm install -g create-react-app create-react-app my-app cd my-app/ npm start
React的项目创建
一个慢的博客
01-23 1万+
从零开始创建一个React项目 默认电脑已经安装了npm和nodejs 使用create-react-app构建react应用程序 create-react-app是Facebook官方推出的脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。 快速开发步骤： 打开控制台 进入你想要创建项目的目录文件下面（用cd进行目录切换） npm ins
react开发：从零开始搭建一个react项目
热门推荐
Generon的博客
06-29 2万+
从头开始建立一个React App - 项目基本配置 npm init 生成 package.json 文件.安装各种需要的依赖: npm install --save react - 安装React.npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话，这里就是安装r
搭建React项目
tian19920813的博客
03-14 1748
创建一个新文件夹my-react-app，并在该文件夹下使用终端创建项目my-react-app。暴露webpack配置，此操作不可撤销，请按需要操作。react项目默认隐藏了webpack相关配置，执行。在src下新建文件src/api/http.ts。在页面上看到欢迎按钮，引入成功。此时，项目已经创建完成，运行。
react项目创建
迪丽锅巴的博客
01-07 113
1.安装 node 查看是否安装成功 node -v 查看npm -v 2.安装 react 脚手架 npm install -g create-react-app 查看是否安装成功 npm info react 3.创建 react 项目 create-react-app 项目名称 4.运行
react项目项目职责
03-22
React项目的职责主要包括以下几个方面： 1. UI组件开发：React是一个用于构建用户界面的JavaScript库，项目中的开发人员使用React来创建可重用的UI组件。这些组件可以包括按钮、表单、导航栏等等，用于构建整个应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值