react的”Hello World ！“
本文主要简述react的开始使用
1.引入js文件
<!-- 1.核心文件 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 2.操作的DOM -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 3.翻译器 将浏览器不识别的JS（es7，es8）语法转化为识别的es5 JSX语法 翻译成浏览器识别的语法 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>2.整体代码
<body>
<!-- react布局容器 -->
<div id="app"> </div>
<script type="text/babel">
// render(布局，容器)
ReactDOM.render(<h1>hello world !</h1>,
//在哪个容器中使用
document.querySelector("#app")
)
</script>
</body>这样，hello world !就会显示在页面上啦！
3.进一步和注意事项
script中的type一定要写type=”text/babel“
<body>
<div id="app2">乌拉</div>
<script type="text/babel">
ReactDOM.render( <div><h1>新闻标题</h1>
<p>乌克兰的总统是个好演员</p>
<hr/>{ //单表签一定要加"/",不然直接报错
//JSX语法中< </ 识别为html解析的开始和结束
}
<p>注释{
// 这样写单行注释
// JSX{}识别为JS
// 单括号语法 里面可以写表达式
/*
段落注释 多行注释
*/
}
</p>
</div>,app2)
// 布局比较复杂的时候 用（）包起来 简洁 方便阅读
// react和vue2使用组件一样，必须有唯一的根元素，即有<div></div>包裹
// 在app2中有内容的情况下，内容会被覆盖掉
</script>
</body>4.上方代码简写
上方3的代码越多，看起来越复杂，越紊乱，可以用变量将html接收一下
<body>
<div id="app2">乌拉</div>
<script type="text/babel">
//layout 虚拟Dom 一般把虚拟DOM 看作一个js对象(存储了布局的信息)
let layout=(
<div><h1>新闻标题</h1>
<p>乌克兰的总统是个好演员</p>
<hr/>
<p>注释 </p>
</div> )
ReactDOM.render(layout,app2)
console.log("lauout:",layout)
console.log("app2:",app2)
</script>
</body>react的”Hello World ！“的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- 利用 Python 进行数据分析（Python 数据分析）· 第 2 版
译者:SeanCheney 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. ApacheCN 机器学习交流群 629470233 ApacheCN 学习资源 Sklearn 与 ...
- 鸿蒙轻内核源码分析：文件系统LittleFS
摘要:本文先介绍下LFS文件系统结构体的结构体和全局变量,然后分析下LFS文件操作接口. 本文分享自华为云社区<# 鸿蒙轻内核M核源码分析系列二一 02 文件系统LittleFS>,作者: ...
- Python绘图工具turtle库的使用
#PythonDraw.py import turtle #引入了一个绘图库(海归库) turtle.setup(650,350,200,200) #设置一个窗体 turtle.penup() #将画 ...
- SSH 密钥登录
一.什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会 ...
- Linux开机显示模式切换
修改vim /etc/inittab 默认为5-图形界面模式,改为3-多用户模式即可 # Default runlevel. The runlevels used are: # 0 - halt (D ...
- Java与网页JSP文件编码的小总结
感谢大佬: https://www.cnblogs.com/yangguoe/p/8467672.html(编码发展史) https://blog.csdn.net/seabiscuityj/arti ...
- Elementui【tooltip】 在弹框关闭之后再次‘出现’的问题
如图,第一次弹窗进来的时候,符合条件之后,这个提示文字的位置是对的,而且正常显示: 现在点击取消按钮,第二次进入弹窗,如图,提示文字就跑到了左上角,而且输入符合条件的数值之后,会另外显示一个toolt ...
- 使用纯swift代码文件制作framework
因为最近我们公司的一个客户要求我们使用swift编写程序并且将API封装成framework的形式提供给他们,所以我就开始了swift实践之路. 程序编写完之后,我就琢磨怎么封装成framework的 ...
- 帆软报表（finereport）禁用右键
点击模板>模板web属性>(填报,数据分析,分页预览设置),选择为该模板单独设置,在下面的事件设置里面添加一个加载结束事件,完整js代码如下: 这段代码的基本原理是让用户的页面右键点击事件 ...
- PHP实习生面试准备的建议
你好,是我琉忆.PHP程序员面试笔试图书系列作者. 今天就跟大家聊聊作为一个PHP程序员,每年的跳槽季都应该怎么准备一番. 其实普遍的跳槽季总的就有2个. 分别是新年后的3-4月,还有9-10月份. ...