在 NodeJs 上搭建 React 开发环境
步骤：
1. 安装 nodejs ：根据你的 Windows 类型(x86或x64)下载相应的安装包进行安装。安装完成后，可以在任一目录下打开 cmd 窗口并运行 node -v 命令，如果显示 node 的版本信息则表示安装成功。
--注：在 windows 操作系统中，如果把 nodejs 安装在系统盘（如：C盘），初始化时会提示 nodejs 没有操作文件的权限（无法新建 package.json 文件）。
（建议在非系统盘中安装 nodejs ，本例安装路径：D:\Program Files）
2. 初始化 npm：安装 nodejs 时会默认安装 npm，可以在 cmd 窗口中运行 npm -v 命令来查看 npm 包的版本信息。
接着运行 npm init 命令，并设置相关参数即完成 npm 的初始化。这时 nodejs 会在当前目录下（这里是：D:\Program Files\nodejs 目录）新建一个 package.json 的配置文件，里面将会存储当前程序所引用的 js 组件（包）的版本信息。
3. 利用 npm 安装 react 相关的包：
3.1 运行 npm install react react-dom --save-dev 命令来安装 react 和 react-dom 包。
其中 --save-dev 表示在 package.json 文件的 devDependencies 节点下添加包的引用，--save 表示在 package.json 文件的 dependencies 节点下添加包的引用
3.1 运行 npm install webpack webpack-dev-server --save-dev 命令，安装 webpack 和 webpack-dev-server 包。
webpack 用来打包并压缩 js 文件，webpack-dev-server 用来实时同步修改过的 js，html，css 文件到浏览器页面。
3.5 运行 npm install jsx-loader --save-dev 命令，安装 jsx-loader 包（它可以把按 ES5 规范编写的 .jsx 文件转成一般的 .js 文件）。
如果需要支持符合 ES6 规范的脚本文件（.js 或 .jsx），还需安装下面 4 个包：babel-core babel-loader babel-preset-es2015 babel-preset-react。
如果需要用到路由，还需安装：react-router。
配置 Webpack：
1. Webpack 使用一个名为 webpack.config.js 的配置文件，可以手动添加一个 webpack.config.js 文件到 nodejs 根目录下，并按如下方式添加相关节点：
var path = require("path");
var webpack = require('webpack');
module.exports = {
entry: { app: ['./app/main.jsx'] },
output: {
path: path.resolve(__dirname, "./build"),
publicPath: "http://127.0.0.1:8080/build/",
filename: "bundle.js"
},
resolve: {
extensions: ['','.js','.jsx']
},
module: {
loaders: [
{test:/\.jsx$/, loaders:['jsx?harmony']}
],
//使用ES6时，才需要添加此节点
loaders:[
{
test: /\.jsx?$/,
loader: 'babel',
include: path.resolve(__dirname),
query: {
//添加两个预先加载的组件，用来处理js或jsx类型的文件
presets: ['es2015', 'react']
}
}
]
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE.ENV':"development"
}),
new webpack.HotModuleReplacementPlugin()
]
};
resolve 指定可以被 require 的文件后缀。比如 Hello.jsx 这样的文件就可以直接用 require(./Hello) 引用。
loaders 指定 jsx-loader 编译后缀名为 .jsx 的文件，建议给含有 JSX 的文件添加 .jsx 后缀，当然你也可以直接使用 .js 后缀， 相应的 test 节点下的正则表达式也要修改。
Webpack 内置支持 CommonJS，所以可以直接用 npm 下载安装模块，然后直接 require 使用模块。
安装 React: npm install react --save
使用 React: var React = require('react');
2. 修改 package.json 文件中的 scripts 节点为：
{
"name": "nodejs",
"version": "1.0.0",
"description": "",
"main": "",
"dependencies": {
"npm": "^3.10.8"
},
"devDependencies": {
"jsx-loader": "^0.13.2",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
//如果需要支持ES6，还需添加以下引用
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
"author": "",
"license": "ISC"
}
添加项目文件：
1. 添加 app/main.jsx，main.jsx 文件的内容如下：
var React = require('react');
var ReactDOM = require('react-dom');
var AppComponent = require('./components/Comment.jsx');
ReactDOM.render(<AppComponent />, document.getElementById('content'));
2. 添加 app/components/Comment.jsx， Comment.jsx 文件的内容如下：
var React = require('react');
var Comment = React.createClass({
render: function(){
return (
<div className="comment">
This is a React component!
</div>
);
}
});
module.exports = Comment;
这时的 app 文件目录如下：
3. 添加 build/index.html，index.html 文件的内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<div id="content"></div>
<script src="http://127.0.0.1:8080/build/bundle.js"></script>
</body>
</html>
编译与运行：
先在 cmd 窗口中运行 npm run start 命令，然后在浏览器中输入：http://localhost:8080/build/index.html 来查看页面。如果修改了 js 文件，只需保存一下浏览器就会自动刷新。
ES6的例子：
1. 添加 app/app.js 文件的内容如下：
import React from 'react';
import ReactDOM from 'react-dom'; class App extends React.Component{
constructor() {
super();
}
render() {
//JSX语法
return (
<div className="container">
<section className="jumbotron">
<h3 className="jumbotron-heading">Search Github Users</h3>
</section>
</div>
)
}
}; const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);
2. 添加 build/index.html，index.html 文件的内容如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="content"></div>
<script src="http://127.0.0.1:8080/build/bundle.js"></script>
</body>
</html>
备注：
由于 Babel 可以转换 ES5 和 ES6 格式的脚本，所以可以在一个 .js 文件里，同时运用两种语法，如下所示：
import React from 'react';
import ReactDOM from 'react-dom'; const About = React.createClass({
render(){
return(<div>About</div>)
}
})
const Inbox = React.createClass({
render(){
return(<div>Inbox</div>)
}
})
const Home = React.createClass({
render(){
return(<div>Home</div>)
}
}) const App = React.createClass({
getInitialState() {
return {
route: window.location.hash.substr(1)
}
}, componentDidMount() {
window.addEventListener('hashchange', () => {
this.setState({
route: window.location.hash.substr(1)
})
})
}, render() {
let Child
switch (this.state.route) {
case '/about': Child = About; break;
case '/inbox': Child = Inbox; break;
default: Child = Home;
} return (
<div>
<h1>App</h1>
<ul>
<li><a href="#/about">About</a></li>
<li><a href="#/inbox">Inbox</a></li>
</ul>
<Child/>
</div>
)
}
}) ReactDOM.render(<App />, document.body)
官网DEMO：https://github.com/reactjs/react-router-tutorial/tree/master/lessons
参考配置文件：http://schemastore.org/json/
在 NodeJs 上搭建 React 开发环境的更多相关文章
- 在WP8上搭建cocos2d-x开发环境
在WP8上搭建cocos2d-x开发环境 转自:https://github.com/koowolf/cocos-docs/blob/master/manual/framework/native/in ...
- 如何在Windows上搭建Android开发环境
Android开发越来越火,许多小伙伴们纷纷学习Android开发,学习Android开发首要任务是搭建Android开发环境,由于大家 主要实在Windows 上开发Android,下面就详细给大家 ...
- 如何在 macOS 上搭建 PHP 开发环境
如何在 macOS 上搭建 PHP 开发环境 Linux, Nginx, MySQL, PHP $ php --version $ php -v # PHP 7.3.11 (cli) (built: ...
- Windows系统上搭建Clickhouse开发环境
Windows系统上搭建Clickhouse开发环境 总体思路 微软的开发IDE是很棒的,有两种:Visual Studio 和 VS Code,一个重量级,一个轻量级.近年来VS Code越来越受欢 ...
- 在 macOS 上搭建 Flutter 开发环境
下载 Flutter SDK flutter官网下载:https://flutter.io/sdk-archive/#macos 若上述链接无法访问,可通过GitHub下载 https://githu ...
- Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- Windows上搭建android开发环境
在搭建android开发环境时需要四部分内容,框架如下 其中Java SDK和Eclipse在java4android中有过介绍,重点介绍ADT和Android SDK的安装. 安装Android S ...
- 从零搭建react开发环境
早在六年前,前端开发已经实现了模块化.工程化开发,既然是模块化工程化开发那就少不了包管理工具,所以我们的第一步就是先从安装nodejs开始(安装nodejs携带JavaScript的包管理工具npm) ...
- 在Mac上搭建ReactNative开发环境
1.安装Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL https://raw.g ...
随机推荐
- nyoj_205_求余数_201404271630
求余数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 现在给你一个自然数n,它的位数小于等于一百万,现在你要做的就是求出这个数除10003之后的余数 输入 第一 ...
- Layui选项卡、进度条、面板、徽章、时间线、辅助元素
Layui选项卡.进度条.面板.徽章.时间线.辅助元素 Tab选项卡 - 页面元素 导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能.面包屑结构简单,支持自 ...
- gradle 安装及设置本地仓库地址
进入地址:http://services.gradle.org/ 下载-bin.zip 解压到自己指定的目录. 配置环境变量 GRADLE_HOME gradle的根目录. 在path 中 添加 % ...
- 所有的异常都要使用try catch 语句捕获？
在开发应用程序过程中必须检测代码可能发生的错误并进行正确的处理,这个在理想的情况下,应用程序中的每行 代码都按照预想的执行,要用到的每种资源总是可以利用,但是在实际的开发过程中,写代码难免会出错,或是 ...
- JSP的安全性
以下内容引用自http://wiki.jikexueyuan.com/project/jsp/security.html: JavaServer Pages和Servlets有几种可用的机制可以使We ...
- visio中怎样画线条或箭头
1.在"画图"工具栏上,单击"铅笔"工具 或"线条"工具 . (凝视 假设看不到"画图"工具栏,请单击" ...
- vuejs快速入门
参考链接:http://www.cnblogs.com/keepfool/p/5619070.html
- Redis开源项目的终极杀手？ ——CRUG解读Redis开源协议变更
引言: 数据库制造商 Redis Labs 本周将公司开发的Redis 模块从 AGPL 迁移到将 Apache v2.0 与 Commons Clause 相结合的许可证,对许可证涵盖的软件作了限制 ...
- cocos2dx 纹理优化
description: 为什么要谈纹理的问题,游戏的画面无时无刻不充斥着图像,通俗意义上一款精致的游戏都有着非常精美的画面.这样往往能给玩家带来更好的游戏体验,这一点也是对于游戏制作者来说所尽力追求 ...
- iOS UITableViewCell 几个方法的优先级
#第一组 - (void)setDataDict:(NSDictionary *)dataDict;这种方法优先运行 - (id)initWithStyle:(UITableViewCellSty ...