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项目(低配版)的更多相关文章

  1. Jenkins 结合 Docker 为 .NET Core 项目实现低配版的 CI&CD

    随着项目的不断增多,最开始单体项目手动执行 docker build 命令,手动发布项目就不再适用了.一两个项目可能还吃得消,10 多个项目每天让你构建一次还是够呛.即便你的项目少,每次花费在发布上面 ...

  2. 基于canvas和web audio实现低配版MikuTap

    导言 最近发掘了一个特别happy的网页小游戏--MikuTap.打开之后沉迷了一下午,导致开发工作没做完差点就要删库跑路了,还好boss瞥了我一眼就没下文了.于是第二天我就继续沉迷,随着一阵抽搐,这 ...

  3. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  4. 【Node/JavaScript】论一个低配版Web实时通信库是如何实现的（ WebSocket篇)

    引论 simple-socket是我写的一个"低配版"的Web实时通信工具(相对于Socket.io),在参考了相关源码和资料的基础上,实现了前后端实时互通的基本功能 选用了Web ...

  5. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  6. 【Java】利用注解和反射实现一个"低配版"的依赖注入

    在Spring中,我们可以通过 @Autowired注解的方式为一个方法中注入参数,那么这种方法背后到底发生了什么呢,这篇文章将讲述如何用Java的注解和反射实现一个“低配版”的依赖注入. 下面是我们 ...

  7. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  8. 【JavaScript】论一个低配版Web实时通信库是如何实现的之二（ EventSource篇)

    前情提要 「 话说上回说到!那WebSocket大侠,巧借http之内力,破了敌阵的双工鸳鸯锁,终于突出重围. 然而玄难未了,此时web森林中飞出一只银头红缨枪,划破夜色. "莫非!?&qu ...

  9. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

随机推荐

  1. Go 武林外传 - 初出茅庐

    没有旁白. 我叫小白, 白痴的白. 老头说我太笨了, 提前放我下山, 让我自生自灭. 对了, 忘了说了, 那老头是我师傅. 虽然我的内心深处是拒绝的, 但是我又打不过老头, 只好收拾铺盖滚犊子了. 算 ...

  2. 学习Shader所需的数学基础（坐标系，点和矢量）

    数学对于计算机图形学的重要性是不言而喻的.在学习Shader之前,首先就要打好数学基础,好在入门Unity Shader所需的数学知识都是线性代数中很基础的的内容.按部就班的来,第一篇文章记录总结的是 ...

  3. java idea spring mvc 入门 最起码 我8080跑起来了

    IDEA建立Spring MVC Hello World 详细入门教程 https://www.cnblogs.com/wormday/p/8435617.html

  4. el-dialog对话弹框中根据后台数据无限制添加el-select标签，并进行展示，搜索，删除

    前几天遇到一个题,el-dialog对话弹框中根据后台数据无限制添加el-select标签,并进行展示,搜索,删除,在这上面用到了递归算法,废话不多说,直接上代码 <template> & ...

  5. [C++]请麻烦压一下定理的棺材板啦

    从去年还在竞赛的时候2/12的原博客里搬运来的 不得不说之前取名真的很艺术qwq 今天开始上的数论课,让头发以肉眼可见的速度掉落emmm 没关系我头发多我不怕啦啦啦QwQ 其中最令人头疼的就是那些人名 ...

  6. 我的Keras使用总结（2）——构建图像分类模型（针对小数据集）

    Keras基本的使用都已经清楚了,那么这篇主要学习如何使用Keras进行训练模型,训练训练,主要就是“练”,所以多做几个案例就知道怎么做了. 在本文中,我们将提供一些面向小数据集(几百张到几千张图片) ...

  7. Servlet（四）----HTTP、Response、servletContent

    ##  HTTP协议: 1.请求消息:客户端发送给服务器端的数据 *  数据格式: 1.请求行 2.请求头     3.请求空行 4.请求体 2.响应消息:服务器端发送给客户端的数据 *  数据格式: ...

  8. React Hook上车

    React Hook 是 v16.8 的新功能,自诞生以来,受到广泛的好评,在 React 版本更新中具有里程碑的意义.现在都2020年了,再不上车 React Hook 就真的 out 了... H ...

  9. 多线程设计模式——Read-Write Lock模式和Future模式分析

    目录 多线程程序评价标准 任何模式都有一个相同的"中心思想" Read-Write Lock 模式 RW-Lock模式特点 冲突总结 手搓RW Lock模式代码 类图 Data类 ...

  10. 开发一个基础的npm包

    初始化项目 # 新建文件夹 mkdir whosmeya-npm-package-test # 进入 cd whosmeya-npm-package-test/ # 初始化 package.json, ...