作者:_长升 原创于——开源中国
简介
React2016年还是比较火的,我学习react的是因为当时指导老师(王老师)的项目要用此技术。于是开始学习React,React其实内容还是比较少的,但是背后的技术栈(redux、router、webpack、es6等等)却很强大,要花一定时间的。在学习之前,当然是要搭建开发环境,中文的开发环境搭建教程还是比较少的(我学习的时候),有一些教程,讲的也详细但是搭建过后,发现运行不起来,并报一系列看不懂的错误。于是问哥(谷歌),无意间发现了一些国外网友搭建的教程,发现挺简单的,摸索了之后写下这篇中文搭建教程,帮助那些求学的小伙伴们。如果英文还可以的同学可以点击此链接视频教程。
首先安装node.js。
windows或mac系统的用户可以直接去官网下载安装包,linux(ubuntu)用户可以到官网下载源码进行配置。
安装好之后,打开shell(windows下win+r 输入cmd回车)。输入
node -v
结果如上图所示表示安装成功。
配置React环境(webstorm IDE)
1.新建空项目(file>new>project)
2.打开终端(view>Tool Windows>Terminal)
注意这里(webstorm)终端和windows下进入当前路径的shell是一样的
3.初始化React项目
3.1 react初始化(init)
3.2 回车进行默认配置。is this ok?(yes) y 回车
3.3之后该项目根目录会出现项目的基本信息package.json文件
4.安装依赖文件
4.1 安装react、react-dom
npm install react react-dom --save
4.2 安装 babel-core、babel-loader、babel-preset-es2015、babel-preset-react
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react
4.3 安装 webpack-dev-server
npm install webpack-dev-server --save-dev
5.手动创建以下文件和目录
5.1 webpack.config.js
module.exports = {
entry:"./src/index.js",
output:{
path:"./dist/",
filename:"bundle.js"
},
devServer:{
inline:true,
contentBase:'./dist',
port:333
},
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel',
query:{
presets:['es2015','react'],
}
}
]
}
};
5.2 dist文件夹和index.html文件
5.2.1 dist文件夹
5.2.2 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">loading</div>
<script src="bundle.js"></script>
</body>
</html>
5.3 src文件夹和index.js
5.3.1 src文件夹
5.3.2 index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>hello world</div>,
document.getElementById("app")
);
6.最后两步
6.1 将package.json中添加如下代码(把 "test":"..."删除)
"start":"webpack-dev-server"
6.2 运行项目(开始有点慢,喝杯咖啡舒展舒展~~~)
npm start
6.3 运行成功,打开浏览器访问 localhost:333
总算OK了,
---------------------------以下是npm start 出现错误的情况及解决办法-------------------
1.npm start运行出错(如下图)
2.解决办法
npm i -项目所在的磁盘符号 webpack
//我这里是G盘
npm i -G webpack
3.npm start(恢复正常)
--------------------npm install package( Error:UNABLE_TO_VERIFY_LEAF_SIGNATURE)--------------
1.用npm install 安装包时出现错误Error:UNABLE_TO_VERIFY_LEAF_SIGNATURE错误
原因是当前电脑使用了代理(翻墙软件等)
2 解决办法: npm config set strict-ssl false 。之后便可安装,npm config set strict-ssl true设置初始状态
npm config set strict-ssl false #设置后可安装
npm config set strict-ssl true #恢复初始状态
注意:转载和引用请注明出处,谢谢合作!
来源:oschina
链接:https://my.oschina.net/u/3115945/blog/801374