步骤:

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/

如何搭建 node,react 开发环境的更多相关文章

  1. 快速搭建 Node.js 开发环境以及加速 npm

    如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...

  2. 【转】使用nvm快速搭建 Node.js 开发环境

    原文链接:http://www.cnblogs.com/shuoer/p/7802891.html 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本 ...

  3. ES6 学习笔记 (2)-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境

    笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...

  4. 手把手教你学node之搭建node.js开发环境

    搭建node.js开发环境 本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...

  5. 1.0搭建 Node.js 开发环境

    <搭建 Node.js 开发环境> 本课程假设大家都是在 Linux 或者 Mac 下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 ...

  6. 搭建 webpack + React 开发环境

    说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...

  7. 从零开始搭建webpack+react开发环境

    环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...

  8. 阿里云ECS搭建node/mongodb开发环境及部署

    一.前端的er在window或mac上安装开发环境应该再清楚不过了.但在服务器上安装还是有点不同的,毕竟是 centOS,从此不得不走上用命令操作…… 二.前期准备 1.首先,我们去阿里云网站阿里云服 ...

  9. VSCode搭建node + typescript开发环境

    我们一起来喜欢TypeScript 现在写js不用TypeScript,伦家可能会觉得你是外星人. 是的,TypeScript很大程度增强了代码的可读性,可跟踪性,可维护性和减少了bug. 那么没有理 ...

随机推荐

  1. 《LoadRunner12七天速成宝典》来了

    看到自己的新书又要发行了,算算从09年第一本书开始,不知不觉已经是第四本书了(帮朋友合写的书不算),每次写完之后都会说太累了,不想再写了,但是却又次次反悔,吞下食言的苦果.如果非要说第四本书的感受,那 ...

  2. 详解Js中文件读取机制

    前言,文件读取是提高应用体验度的必须接口,应用场景中需求很频繁. Js处理文件读取,由于处于安全方面的考虑,在2000年以前,都是以“<input type="file"&g ...

  3. Rman备份的保留策略(retention policy)

    什么是备份的保留策略(retention policy) 保留策略就是指某份备份是否要保留以及保留多久.可以使用configure retention policy命令来创建一个一致的.自动的备份保留 ...

  4. C Primer Plus(第五版)4

    第四章 字符串和格式化输入输出 4.2 字符串简介 字符串(character string)就是一个或多个字符的序列.下面是一个字符串的例子: “Zing went the strings of m ...

  5. node.js模块之Buffer模块

    http://nodejs.org/api/buffer.html Pure JavaScript is Unicode friendly but not nice to binary data. W ...

  6. Impala与Hive的比較

    1. Impala架构        Impala是Cloudera在受到Google的Dremel启示下开发的实时交互SQL大数据查询工具,Impala没有再使用缓慢的Hive+MapReduce批 ...

  7. Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  8. 如何在MAC上安装SSHFS

    找了半天,试了各种方法,最后一种可行的方法. macOS 版本 10.12.6 具体看下面的说明: 安装Fuse 下载 osxfuse-3.6.3.dmg 并且安装. 链接 安装sshfs 下载ssh ...

  9. php编码的一些小规范

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/104 最近在整理线上的hhvm warning,虽然每天产生百万 ...

  10. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...