美文网首页
React之HelloWorld

React之HelloWorld

作者: yanghanbin_it | 来源:发表于2017-06-06 17:53 被阅读0次

第一个程序HelloWorld

  1. 先安装react,react-dom,babel
    在0.14版本发布后,react拆分为react,react-dom,同时弃用了react-tools 及 JSXTransformer.js,推荐使用babel(javascript编译器)来编译JSX。
mkdir helloreact
cd helloreact
npm init --yes
npm install react react-dom babel-standalone --save
  1. 新建hello.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello React</title>
    <script src="./node_modules/react/dist/react.js"></script>
    <script src="./node_modules/react-dom/dist/react-dom.js"></script>
    <script src="./node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello World!</h1>,
            document.getElementById('app')
        );
    </script>
</body>
</html>
  1. 在浏览器中运行hello.html
image.png

相关文章

  • React—Native

    react-native init helloWorld 创建react-native名为helloWorld...

  • React之HelloWorld

    第一个程序HelloWorld 先安装react,react-dom,babel在0.14版本发布后,react拆...

  • 关于react native遇到的问题

    2016.10.17 新建文件 react-native init Helloworld 打开Helloworld...

  • React Native之HelloWorld

    上一期介绍了怎样搭建开发环境,现在正是进入开发实战环节1、下面通过终端键入下面命令行语句来创建一个名为HelloW...

  • React-Native之HelloWorld

    前言 之前就学习过一段时间的RN,但是却还没有系统的学完。发现时间久了,很多知识都快要淡了,最近上班比较闲,准备重...

  • ReactNative插件开发

    ReactNative插件开发 安装 创建HelloWorld 编译并运行 React Native 应用 步骤 ...

  • react-native 入门之 helloworld

    简介 在网上找了一篇很不错的例子,推荐给大家边学边做 helloworld 首先,我们先创建一个项目,它的原始代码...

  • React 开始:Helloworld

    开篇前言 最近在尝试如何做一个全栈程序员,考虑到Facebook的React Native可以用在Android和...

  • React(一)—— HelloWorld

    最近开始重新学习React,以此记录自己的历程 React是啥?这些话就不扯了,直接进入正题 引入js https...

  • react-HelloWorld

    html示例

网友评论

      本文标题:React之HelloWorld

      本文链接:https://www.haomeiwen.com/subject/fthnfxtx.html