只需安装babel命令，即可将react的jsx写法转换成浏览器认识的js写法

1.安装nodejs（百度下载安装即可，自带npm）

2.cmd打开命令行，cd进入在自己的文件夹下

　　执行命令：

npm install --global babel-cli
npm install babel-preset-react

若本机npm无法安装完成，可以使用cnpm：如文：http://www.cnblogs.com/wuhairui/p/6796523.html

3.执行完成后，将jsx写法的react文件进行转换（此处已helloworld.js为例）

ReactDOM.render(

    <h1>Hello, world!</h1>,

    document.getElementById('example')

);

　　在该文件的目录下执行命令：

babel --presets react helloworld.js --watch --out-dir helloworld

　　转换后的js文件将会生成在helloworld文件夹中。打开后是这样的：

ReactDOM.render(React.createElement(

    'h1',

    null,

    'Hello, world!'

), document.getElementById('example'));

4.react jsx写法（babel转换前）：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Hello React!</title>

        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    </head>

    <body>

        <div id="example"></div>

        <script type="text/babel">

        ReactDOM.render(

            <h1>Hello, world!</h1>,

            document.getElementById('example')

        );

        </script>

    </body>

</html>

5.react js写法（babel转换后）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Hello React!</title>

        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

        <!-- 转换后不需要 Babel了! -->

    </head>

    <body>

        <div id="example"></div>

        <script>

        ReactDOM.render(React.createElement(

            'h1',

            null,

            'Hello, world!'

        ), document.getElementById('example'));

        </script>

    </body>

</html>

react基于nodejs简单的搭建与开发方法的更多相关文章

  1. 基于NodeJS的全栈式开发

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的 NodeJS,试 ...

  2. （转）也谈基于NodeJS的全栈式开发（基于NodeJS的前后端分离）

    原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...

  3. 也谈基于NodeJS的全栈式开发（基于NodeJS的前后端分离）

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...

  4. 基于NodeJS的全栈式开发（基于NodeJS的前后端分离）

    也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们 ...

  5. 基于ionic4、cordova搭建android开发环境

    前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解and ...

  6. 珠联壁合地设天造|M1 Mac os(Apple Silicon)基于vscode(arm64)配置搭建Java开发环境(集成web框架Springboot)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_194 也许有人从未听说过Python,但是不会有人没听说过Java,它作为一个拥有悠久历史的老牌编程语言,常年雄踞TIOBE编程语 ...

  7. 基于微软XAML技术的前端开发方法

    使用XAML技术的平台目前包括WPF,Silverlight,Windows8等平台,未来的Windows10统一Windows App也使用XAML技术. 前端开发指通过可视化集成开发环境进行用户界 ...

  8. 基于Visual Studio Code搭建Golang开发调试环境【非转载】

    由于对Docker+kubernetes的使用及持续关注,要理解这个平台的原理,势必需要对golang有一定的理解,基于此开始利用业余时间学习go,基础语法看完之后,搭建开发环境肯定是第一步,虽然能g ...

  9. 基于Visual Studio Code搭建Vue开发环境

    安装node.js最新版 这里安装的是8.11.4版   image.png 更新npm至最新版 安装node.js后, npm默认版本为: 6.1.0   image.png 使用npm insta ...

随机推荐

  1. Objective-C日记-之编码对象属性

    NSCoder类 1,概述 将对象的实例变量和其他数据编码为数据块,然后将他们存在到磁盘当中:以后将这些数据块读回到内存中,并且还基于保存的数据创建新的对象,也称序列化或反序列化. 2,用法 a,首先 ...

  2. Xamarin自定义布局系列——瀑布流布局

    Xamarin.Forms以Xamarin.Android和Xamarin.iOS等为基础,自己实现了一整套比较完整的UI框架,包含了绝大多数常用的控件,如下图 虽然XF(Xamarin.Forms简 ...

  3. .Net程序员学用Oracle系列(21)：分组查询(GROUP BY)

    1.GROUP BY 标准分组 1.1.GROUP BY 概述 1.2.WHERE 和 HAVING 的区别? 2.GROUP BY 扩展分组 2.1.ROLLUP 分组 2.2.CUBE 分组 2. ...

  4. 嵌入式ARM开发环境搭建

    1. 安装,配置,启动FTP服务 安装FTP: sudo apt-get install vsftpd 修改vsftpd的配置文件/etc/vsftpd.conf,将下面两行的'#'去掉#local_ ...

  5. HBuilder的webview操作

    HBuilder的webview操作 webviewAPI文档:http://www.html5plus.org/doc/zh_cn/webview.html 创建新的webview窗口: Webvi ...

  6. NDK(三方库引入、Mk文件)

    NDK笔记-----第三方库引入 一.字符操作: 1 二.NDK*(JNI)对象操作: 2 1.C++调用java对象 3 三.Android.mk说明: 3 四.Application.mk说明 3 ...

  7. 给 Virtualbox 中 Ubuntu 系统设置静态 IP ，让 DNS 配置信息不会在重启后被清除

    虚拟机网络选择 桥接网卡 模式. 主要涉及两个步骤: 1. 修改 /etc/network/interfaces 文件: 2. 修改 dns : 第一步,修改 interfaces 文件: sudo ...

  8. javascript中常用的

    1.javascript中构造equals().trim()方法并应用 String.prototype.Trim = function() { return this.replace(/(^\s*) ...

  9. 苹果ATS特性服务器证书配置指南

    配置指南: 需要配置符合PFS规范的加密套餐,目前推荐配置: ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!AD ...

  10. oracle备份脚本

    利用EXP导出全库,必须用SYSTEM或者DBA用户来导出. 具体脚本实现如下 全库导出(fullbackup): #!/bin/bash bname=`date +%Y%m%d` cd /backu ...