只需安装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. 算法模板——splay区间反转 2

    实现功能:同splay区间反转 1(基于BZOJ3223 文艺平衡树) 这次改用了一个全新的模板(HansBug:琢磨了我大半天啊有木有),大大简化了程序,同时对于splay的功能也有所完善 这里面没 ...

  2. 自学 iOS - 三十天三十个 Swift 项目 第一天

    最近公司项目不是很忙,偶然间看到编程语言排行榜,看到swift 已经排到前10了,然OC排名也越来越后了,感觉要上车了,虽然现在项目都是用OC写的,但是swift是一种趋势.在网上看到"自学 ...

  3. SQL语句流程函数

    本人因为今天用到了流程函数,顿时感觉语法生疏啊,为了防止以后忘记,故写此篇!!! 流程函数是MySQL相对常用的一类函数, 用户可以使用这类函数在一个SQL语句中实现条件选择, 这样能够提高效率. 下 ...

  4. HTTP协议＆SOCKET协议

    一. HTTP协议是什么? 我们在浏览器的地址栏里输入的网站地址叫做 URL(UniformResourceLocator,统一资源定位符).就像每家每户都有一个门牌地址一样,每个网页也都有一个Int ...

  5. IE10去掉input的type=”text”输入内容时出现的小叉号（X）和type=”password”出现的小眼睛图标

    最近在做一个后台管理系统项目,遇到以下两个问题: 1.从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉号(X),方便用户点击清除已经输 ...

  6. mac下安装 resin 奇葩问题总结

    mac 下安装 resin(需要确认电脑配置好了 java 环境变量): 第一步:去 resin 的官网下载最新的压缩包,官网连接:http://caucho.com/products/resin/d ...

  7. @RequestParam--SpringMVC 注解系列文章（一)

    概述 RequestParam 注解是使用 SpringMVC 开发过程中,比较常用的一个注解,用于映射请求参数. 代码 package rex.springmvc.handlers; import ...

  8. EventBus通信小能手

     1.EventBus简介 EventBus 是由 greenrobot 组织开发的一个 Android 事件发布/订阅轻量级框架,特点:代码简洁,是一种发布订阅设计模式(观察者设计模式). Even ...

  9. Shell常见用法小记

    shell的简单使用 最近发现shell脚本在平常工作中简直算一把瑞士军刀,很多场景下用shell脚本能实现常用的简单需求,而之前都没怎么学习过shell,就趁机把shell相关的语法和常见用法总结了 ...

  10. PRINCE2考试一共多少道题

    一.Foundation 基础级: 考试时长 1 个小时: 75 道单选题,其中 5 道随机测试题,无论对错都不计入考分:满分 70 分,获得 35 分才能通过考试,正确率 50%: 全程闭卷考试 二 ...