搭建react项目(低配版)
React低配版环境，可作为React相关测试的基础环境，方便快速测试。
git clone git@github.com:whosMeya/simple-react-app.git
git checkout v1.0.0
GitHub地址: simple-react-app v1.0.0
项目搭建过程如下
项目初始化
# 新建文件夹
mkdir simple-react-app
# 进入文件夹
cd ./simple-react-app
# npm初始化 -y参数表示使用默认配置，执行后会生成package.json文件
npm init -y
添加React代码
安装React相关依赖
npm install --save react react-dom @types/react @types/react-dom
新建index.js文件，并写入下面代码
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>Hello World!</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
新建index.html文件，并写入下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./index.js"></script>
</html>
配置
安装webpack相关依赖
npm install --save-dev webpack webpack-cli
添加webpack配置文件
根目录新建文件 webpack.config.js，并写入下面代码
const path = require('path');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
}
module.exports = config;
添加插件html-webpack-plugin
html-webpack-plugin用于打包html文件。
安装
npm install --save-dev html-webpack-plugin
修改 webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: 'index.html',
+ }),
+ ],
}
module.exports = config;
安装Babel相关依赖
Babel将React jsx语法编译为浏览器识别的语法。
ps: Babel7将所有包放在了@babel/ 下。
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill @babel/preset-react @babel/plugin-proposal-class-properties
添加Babel配置文件
根目录新建文件 babel.config.json，并写入下面代码
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
webpack配置文件中添加Babel配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
+ module: {
+ rules: [
+ { test: /\.js$/, use: 'babel-loader' }
+ ]
+ },
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
}),
],
}
module.exports = config;
添加build命令
修改package.json
"scripts": {
+ "build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
运行build命令看看效果
npm run build
打包成功，根目录会生成 dist。
打开dist下index.html，会看到 Hello World!
添加start命令
使用 webpack-dev-server 热启动。
npm install --save-dev webpack-dev-server
修改 package.json
"scripts": {
"build": "webpack --mode production",
+ "start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
运行start命令看看效果
npm run start
项目运行成功，打开 http://localhost:8080/ 会看到 Hello World!
修改index.js, 保存后页面也会同步刷新。
搭建react项目(低配版)的更多相关文章
- Jenkins 结合 Docker 为 .NET Core 项目实现低配版的 CI&CD
随着项目的不断增多,最开始单体项目手动执行 docker build 命令,手动发布项目就不再适用了.一两个项目可能还吃得消,10 多个项目每天让你构建一次还是够呛.即便你的项目少,每次花费在发布上面 ...
- 基于canvas和web audio实现低配版MikuTap
导言 最近发掘了一个特别happy的网页小游戏--MikuTap.打开之后沉迷了一下午,导致开发工作没做完差点就要删库跑路了,还好boss瞥了我一眼就没下文了.于是第二天我就继续沉迷,随着一阵抽搐,这 ...
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
- 【Node/JavaScript】论一个低配版Web实时通信库是如何实现的（ WebSocket篇)
引论 simple-socket是我写的一个"低配版"的Web实时通信工具(相对于Socket.io),在参考了相关源码和资料的基础上,实现了前后端实时互通的基本功能 选用了Web ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- 【Java】利用注解和反射实现一个"低配版"的依赖注入
在Spring中,我们可以通过 @Autowired注解的方式为一个方法中注入参数,那么这种方法背后到底发生了什么呢,这篇文章将讲述如何用Java的注解和反射实现一个“低配版”的依赖注入. 下面是我们 ...
- [Web 前端] webstorm 快速搭建react项目
cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...
- 【JavaScript】论一个低配版Web实时通信库是如何实现的之二（ EventSource篇)
前情提要 「 话说上回说到!那WebSocket大侠,巧借http之内力,破了敌阵的双工鸳鸯锁,终于突出重围. 然而玄难未了,此时web森林中飞出一只银头红缨枪,划破夜色. "莫非!?&qu ...
- 使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
随机推荐
- VMware虚拟机安装Mac OS X 10.12
VMware Workstation Pro 14 安装Mac OS X 10.12 下面是所需要的补丁工具及镜像 VMware Workstation unlocker-master(OS X 虚拟 ...
- Journal of Proteome Research | “Differential Visual Proteomics”: Enabling the Proteome-Wide Comparison of Protein Structures of Single-Cells（“差异视觉蛋白质组学”：实现单细胞中蛋白质结构的组学比较）(解读人：李思奇)
期刊名:Journal of Proteome Research 发表时间:(2019年9月) IF:3.78 (2018) 单位:巴塞尔大学,瑞士 物种:人细胞系 技术:冷冻电子显微镜(Cryo-E ...
- CentOS7安装和配置ftp服务
目录 一.ftp简介 二.安装ftp软件包 1.安装ftp服务器 2.安装ftp客户端 三.配置ftp服务器 1.关闭SELINUX 2.配置ftp数据端口参数 3.开通防火墙 4.启动vsftpd服 ...
- Selenium系列（五） - 键盘操作详细解读
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- ImportError: libcusolver.so.8.0: cannot open shared object file: No such file or directory
问题描述: ImportError: libcusolver.so.8.0: cannot open shared object file: No such file or directory 首先检 ...
- Linux基础篇学习——Linux文件系统之文件存储与读取：inode，block，superblock
Linux文件类型 代表符号 含义 - 常规文件,即file d directory,目录文件 b block device,块设备文件,支持以"block"为单位进行随机访问 c ...
- Python第六章-函数02-函数的作用域
函数 三.作用域规则 有了函数之后,我们必须要面对一个作用域的问题. 比如:你现在访问一个变量,那么 python 解析器是怎么查找到这个变量,并读取到这个变量的值的呢? 依靠的就是作用域规则! 3. ...
- Building Applications with Force.com and VisualForce(Dev401)(十一):Designing Applications for Multiple Users: Proseving Data Quality
Dev401-012:Proseving Data Quality Universal Containers Scenario1.Universal Containers(UC) wants to e ...
- python之常用模块ymal
在学习python如何操作yml文件之前,我们先科普一下yml的格式 yaml是专门写配置文件的语言,非常简洁和强大,比json更加方便 YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便 ...
- 【强烈推荐】适合Flutter初学者的完整项目
简介 Flutter Fly是什么?Flutter Fly是一款开源的Flutter 项目,非常适合初学者进行学习.App内集成了160+Flutter基础控件的详细介绍及用法,内容来源于:http: ...