只需安装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. Android: Toolbar、AppBarLayout

    ToolBar是google退出的一个应用程序动作条 包括: 设置导航栏图标 设置应用程序Logo 设置标题 设置子标题 添加各种自定义控件 添加动作条菜单 API:https://developer ...

  2. (2)写给Web初学者的教案-----让我们开始准备学习

    课前准备 我们将会从零基础带领大家一步一步的学习Web前端技术,这个零基础是什么概念呢?你只要具备以下技能就可以学习: 一.个人学习条件(必备) 会开关电脑,手机.(哇塞,任老师你逗我们吧!). 会打 ...

  3. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  4. Caused by: java.lang.RuntimeException: java.io.IOException: invalid constant type: 18

    工程启动的时候有报下面这个错误的,更新下工程的jar包依赖,然后在工程的pom文件里加上下面的jar包 Caused by: java.lang.RuntimeException: java.io.I ...

  5. 实现input输入时智能搜索

    // 智能搜索 function oSearchSuggest(searchFuc) { var input = $('#in'); var suggestWrap = $('#gov_search_ ...

  6. yii中调整ActiveForm表单样式

    Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, <?php $form = ActiveForm::begin([ 'id' => 'login-for ...

  7. Android使用ADB命令和stetho查看app数据库

    一.使用ADB命令查看 打开命令窗口,进入Android SDK目录下的platform-tools,执行命令: 1.输入:在windows下: adb shell 在linux下: ./adb sh ...

  8. moment倒计时插件

    https://github.com/icambron/moment-countdown

  9. MCMC(三)MCMC采样和M-H采样

    MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链 MCMC(三)MCMC采样和M-H采样 MCMC(四)Gibbs采样(待填坑) 在MCMC(二)马尔科夫链中我们讲到给定一个概率平稳分布$\pi$ ...

  10. bootstrap file input 官方文档翻译

    file Input官方文档 中文翻译 file input 特性 1.这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js ...