只需安装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. Eclipse添加tomcat出现 The Apache Tomcat installation at this directory is version 8.5.6. A Tomcat 8.0 installation is expected.

    打开tomcat安装目录:apache-tomcat-8.5.6\lib 找到catalina.jar 用解压缩工具打开 org/apache/catalina/util/ServerInfo.pro ...

  2. 用TTL线在CFE环境下拯救半砖wrt54g路由器

    缘起:路由器被刷成半砖 Linksys wrt54gs v4路由器,已刷入 tomato-dualwlan 1.23.使用数年,未出现任何故障. 在日用的wifi网络上,通过web界面刷入了错误的to ...

  3. Swiper3 的特色功能

  4. mysql---数据控制语言（用户及其权限管理）

    用户管理 用户数据所在位置: mysql中的所有用户,都存储在系统数据库(mysql)中的user 表中--不管哪个数据库的用户,都存储在这里.

  5. curl javaSSm框架中传入json数组的格式方法

    curl与java结合传入get.post,head请求, 比如: curl的地址: curl -l 127.0.0.1:8080/spacobj/core/do?acid=100 -H " ...

  6. linux 根分区扩展

    linux根分区扩容 今天网站上传图片出问题了,一开始还以为是程序问题,后来发现原来是服务器存储空间不够,明明有200G的磁盘空间,没理由这么快就用完,查了一下分区情况,原来有两块磁盘,根分区只挂载在 ...

  7. extern “ C”的含义

    见博客:http://www.cnblogs.com/xulei/archive/2006/11/12/558139.html

  8. Android Things教程：电气基础之直流电路理论

    译者注:由于本人水平有限,译文中难免会出现概念模糊.晦涩难懂,如果实在没心思看下去,请发挥你的学习能动性,到原文中自行翻译,感谢!!!点这里,直达英文各种长句的世界. 好了,既然你选择继续往下看,那就 ...

  9. ajax 原理----初级篇

    一.贴dome,ajax三大步 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  10. jenkins+SVN配置

    开发项目,版本控制必不可少,我用的版本控制软件为SVN,那么如何把jenkins和SVN结合,使得SVN源码一有上传更新,jenkins就马上构建项目呢?下面说一下配置过程   1)         ...