1、React 入门实例教程 ：http://www.ruanyifeng.com/blog/2015/03/react.html （ 阮一峰的博客）  或   https://segmentfault.com/a/1190000012921279（作为阅读参考）

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

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

    <script type="text/babel">

      // ** Our code goes here! **

    </script>

  </body>

</html>

注意：Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

1、组件 ：

var HelloMessage = React.createClass({

  render: function() {

    return <h1>Hello {this.props.name}</h1>;

  }

});

ReactDOM.render(

  <HelloMessage name="John" />,

  document.getElementById('example')

);

react — script引入 和 脚手架使用的区别的更多相关文章

  1. <script runat=server>、<%%>和<%#%>的区别

    ①<script runat="server">代码段与<%%>内联代码段的区别 在asp.net页面的aspx文件中允许使用<script runa ...

  2. ElementUI（vue UI库）、iView（vue UI库）、ant design（react UI库）中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  3. ​Web(click and script) 与 Web(HTTP/HTML)协议区别

    Web(click and script) 与 Web(HTTP/HTML)协议区别 webjavascriptvbscript浏览器脚本login 先从最简单的说明上来看, Web(HTTP/HTM ...

  4. <script>, <script async>, <script defer> 三种标签的区别

    <script>, <script async>, <script defer> 三种标签的区别 <script>标签 阻塞html parsing 脚 ...

  5. vue+cesiumjs的环境搭建【script引入】

    [可以看我的博客里另外一篇----- import引入 ,可以不用script引入] 最近做项目要用到cesium,然后参照网上的一些步骤,最后发现报错了,其中有两种错比较多: ①  This dep ...

  6. script标签async和defer的区别及作用

    作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...

  7. React 项目引入 Dva

    背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...

  8. Ant design在vue，react的引入

    文章地址: https://www.cnblogs.com/sandraryan/ 最近由于 一些不可描述的原因 要研究一下Ant design这个前端框架. 祭上官网: https://ant.de ...

  9. XML引入以及与html的区别

    1.1 引入 HTML: 负责网页的结构 CSS: 负责网页的样式(美观) Javascript: 负责在浏览器端与用户进行交互. 负责静态的网页制作的语言 HTML语言特点: 1)由标签组成. &l ...

随机推荐

  1. delphi 判断MDI窗体的子窗体是否存在

    //***************************************************************************//函 数名: CreateForm //返 ...

  2. ORACLE基本用法及常用命令

    切换ORACLE用户 su - oracle ---------------------------- 重启数据库 sqlplus sys / as sysdba shutdown immediate ...

  3. Python做简单的字符串匹配详解

    Python做简单的字符串匹配详解 由于需要在半结构化的文本数据中提取一些特定格式的字段.数据辅助挖掘分析工作,以往都是使用Matlab工具进行结构化数据处理的建模,matlab擅长矩阵处理.结构化数 ...

  4. Linux ftp安装

    ftp安装部分,操作步骤如下: 可以使用yum命令直接安装ftp # yum install vsftpd ftp服务的开启与关闭命令: 开启:# /bin/systemctl start vsftp ...

  5. python深浅拷贝的理解和区分

    import copy a1 = ['s1','s2','s3'] #可变数据类型 a = [1,2,a1] b = a a1.append('s4') #浅拷贝 c = copy.copy(a) # ...

  6. ubuntu 去除开机背景

    sudo apt remove plymouth sudo sed -i 's/ splash//g' /etc/default/grub sudo update-grub

  7. 初识redis基础

    一.redis 的五大数据类型: 1.String(字符串): 2.List(列表): 3.Set(集合): 4.Hash(哈希,类似于Java里的Map); 5.Zset(sorted set:有序 ...

  8. HDU3461_Code Lock

    Description 一排可以转动的密码锁,现在给你很多个区间,你可以操作同时转动这个区间内的密码锁,能够通过转动使之一样的密码锁为一种密码 如可以操作2~4这个区间:那么ABBB 和AAAA是一个 ...

  9. Codeforces 1132G(dfs序+线段树)

    题面 传送门 分析 对于每一个数a[i],找到它后面第一个大于它的数a[p],由p向i连边,最终我们就会得到一个森林,且p是i的父亲.为了方便操作,我们再增加一个虚拟节点n+1,把森林变成树. 由于序 ...

  10. Regular Expression 範例

    Regular expression 被實作於各種語言中,可以用來對字串做 比對 擷取 分隔 這幾類的處理.以下是 JavaScript的處理範例. 各位看官,可以按F12開啟 brower 的 de ...