创建react项目的几种方法
前言:
构建React项目的几种方式:
- 构建:create-react-app 快速脚手架
- 构建:generator-react-webpack
- 构建:webpack一步一步构建
1)构建:create-react-app 快速脚手架
FaceBook官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具create-react-app。
creat-react-app优点
- 无需配置:官方的配置堪称完美,几乎不用你再配置任何东西,就可以上手开发项目。
- 高集成性:集成了对React,JSX,ES6和Flow的支持。
- 自带服务:集成了开发服务器,你可以实现开发预览一体化。
- 热更新:保存自动更新,让你的开发更简单。
- 全兼容性:自动处理CSS的兼容问题,无需添加-webkit前缀。
- 自动发布:集成好了发布成品功能,编译后直接发布,并且包含了sourcemaps功能。
create-react-app的安装
npm install -g create-react-app # Windows
sudo npm install -g create-react-app # Linux
创建React项目
create-react-app my-app
cd my-app
npm start
2)构建:generator-react-webpack
npm install -g yo # 在全局安装generator-react-webpack之前,先安装yeoman
npm install -g generator-react-webpack
mkdir new-react-demo
cd new-react-demo
yo react-webpack
npm start
3)构建:webpack一步一步构建
安装webpack
在安装webpack之前,我们先建立一个文件夹并进入,当然你可以用其他方法,我这里就用命令了。
mkdir react-webpack
cd react-webpack
npm init
npm install --save-dev webpack
配置webpack.config.js
在项目根目录建立webpack.config.js文件,这个文件是进行webpack配置的,先建立基本的入口和出口文件。
var path =require('path');
module.exports = {
//入口文件
entry:'./app/index.js',
//出口文件
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}
}
新建index.html文件,在根目录新建index.html文件,并引入webpack设置中的出口文件,代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React全家桶-jspang</title>
</head>
<body> </body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>
测试webpack配置
通过上面的步骤,配置好了wbpack,现在可以测试一下我们webpack配置是否有问题。在路口文件中写入下面的代码,并进行打包测试。
/app/index.js文件
function component(){
var element = document.createElement('div');
element.innerHTML = ('Hello JSPang');
return element;
} document.body.appendChild(component());
这段代码非常简单,不作过多的解释。如果你对这个代码看不懂,再去啃两边犀牛或者红宝书。
加入打包命令
打开package.json文件,在scripts属性中加入build命令。
"scripts": {
"build": "webpack"
},
在终端中输入npm run build ,就可以看到打包结果了。如果没有出现错误,在浏览器中打开,可以看到我们的编写结果。到这部为止,我们正确安装了webpack,并进行了出入口的配置,也看到了webpack的输出结果。
开发服务器配置
你会很容易的发现,我们现在缺少一个实时更新的服务,那动手马上配置一个。
在命令行安装webpack-dev-server,在终端中输入下面的命令。
cnpm install --save-dev webpack-dev-server
安装完成后,配置webpack.config.js文件。
devServer:{
contentBase:'./',
host:'localhost',
compress:true,
port:1717
}
配置好后再packeage.json里增加一个scripts命令,我们起名叫server。
"scripts": {
"build": "webpack",
"server": "webpack-dev-server --open"
},
这里的–open是直接打开浏览器的意思。这些都配置完成后,就可以在终端输入npm run server 看到结果了。
自动刷新浏览器
在我们修改代码时,现在并不能自动刷新浏览器,不会立即呈现我们编写的代码结果,而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist'),
publicPath:'temp/'
},
index.html文件引入JS
<script src="./temp/index.js"></script>
Babel安装配置
在webpack中配置Babel需要先加入babel-loader,这里我们继续使用npm来进行安装,但是我们一般还需要支持es2015和React,所以要安装四个包。
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
这里安装四个包的安装,这个四个包不能省略。安装后你会在package.json里看到这些包的版本。
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
配置module
在安装完成后,可以到webpack.config.js里配置module,也就是配置我们常说的loader。
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loaders:"babel-loader",
query:{
presets:['es2015','react']
}
}
]
}
编写React
webpack通过上边的步骤,基本已经配置完成了,这里我们写一个React文件来进行测试一下。在进行编写React文件前,要记得安装React和React-dom这两个包。
安装React和React-dom
cnpm install --save react react-dom
安装完成后,我们改写app/index.js文件,把原来原生的JavaScript代码改成React代码。
index.js
import React from 'react';
import ReactDOM from 'react-dom'; ReactDOM.render(
<div>Hello JSPang</div>,
document.getElementById("app")
);
因为上边我们加了一个app的选择器,所以在index.html中增加一个div标签,并把id设置成app。
index.html
<div id="app"></div>
都配置完了,我们可以用之前配置好的npm run server 命令进行预览了。如果在浏览器中看到了Hello JSPang 这段文字,说明我们的配置成功了,以后就可以愉快的进行开发了。
总结:其实自己配置React开发环境在实际工作中也并不多,因为我们的配置毕竟不是很成熟,而且支持较少。这里学习只是为了你更好的掌握React构建过程和设置参数,实际工作中尽量使用合适的脚手架工具。
转载自:jspang.com/2017/10/22/react-all-01/
webpack.config.js的完整代码
var path = require('path'); module.exports = {
// 入口文件
entry: './app/index.js', // 服务器配置
devServer: {
contentBase: './',
host: 'localhost',
compress: true,
port: 1717
}, // 配置Babel
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loaders:"babel-loader",
query:{
presets:['es2015','react']
}
}
]
}, // 出口文件
output: {
filename: 'index.js',
path: path.resolve(__dirname,'dist'),
publicPath: 'temp/'
}
}
创建react项目的几种方法的更多相关文章
- 尚硅谷springboot学习6-eclipse创建springboot项目的三种方法(转)
方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安装插件的进度,等插件安装完成后重启eclipse生效 新建spring boot项目 项目启动 方法二 1.创建Mave ...
- eclipse创建springboot项目的三种方法
本文链接:https://blog.csdn.net/mousede/article/details/81285693 方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安 ...
- 创建springboot项目的三种方法(参考
https://blog.csdn.net/mousede/article/details/81285693 https://blog.csdn.net/weixin_42194143/article ...
- 用Visual C++创建WPF项目的三种主要方法
用Visual C++创建WPF项目的三种主要方法 The problem with using XAML from C++ Because C++ doesn't support partial c ...
- 简述--构建React项目的几种方式
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- React(一)使用脚手架创建React项目
1.安装脚手架 现在使用较多的就是这三种脚手架工具: react-boilerplate react-redux-starter-kit create-react-app 我使用的是第三种,faceb ...
- 使用express创建node服务器的两种方法及区别
使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen ...
- .net中创建xml文件的两种方法
.net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...
- Tomcat 部署项目的三种方法
1.下载 Tomcat 服务器 ①.官网下载地址:http://tomcat.apache.org/ ②.tomcat 8.0 64位百度云下载地址:http://pan.baidu.com/s/1s ...
随机推荐
- springmvc 返回 404 解决
Idea Maven springmvc spring 项目搭建中/url 可以访问controller,并且能返回正确的ModelAndView,但是页面总是显示404 项目结构: web.xml ...
- linux查找并替换命令
find ./ -maxdepth 3 -type f -name "*Makefile" |xargs sed -i "s/CXX = g++/CXX = ccac ...
- Cookiecutter: 更好的项目模板工具:(2)安装及基础使用
安装 通过python包管理工具 命令行输入 $pip install cookiecutter 或者 # mac os经常会禁止用户全局安装python包 $pip install --user c ...
- Linux下的at定时执行任务命令详解
之前说了使用crontab实现定时执行任务,假如我们只是想要让特定任务运行一次,那么,这时候就要用到at监控程序了.一.at服务 cron是一个linux下 的定时执行工具,可以在无需人工干预的情况下 ...
- Educational Codeforces Round 1
598A - Tricky Sum 20171103$$ans=\frac{n(n+1)}{2} - 2\sum_{k=0}^{\left \lfloor \log_2 n \right \rf ...
- HTML <script> 标签的 defer 和 async 属性
HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧. 普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...
- 在微信下载app引导页代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- FatMouse' Trade(杭电ACM---1009)
FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- vue里的样式添加之类名改动 和style改动
类名下有不同样式,通过增加或者减少类名,来增加或减少样式. v-bind:class = {类名:变量,类名:变量...} 变量为布尔值,如果是true则类名添加,反正类名不添加到该元素身上 v-b ...
- CodeForces 733B Parade
B. Parade time limit per test1 second memory limit per test256 megabytes inputstandard input outputs ...