React系列,初识
学习react对于新手来说,还没有学react往往就会被webpack,npm等搞的晕头转向,所以我们今天就从最简单的方式入手
<script src="react.js"></script> //核心文件
<script src="react-dom.js"></script> //用于渲染dom节点
首先在页面中引入这2个文件
<div id="box"></div>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script type="text/javascript">
ReactDOM.render( //核心方法,接收三个参数,
"hello", //1,内容
document.body, //2,接收的容器
function(){ //3,渲染完成的回掉
console.log("render done");
}
);
//Uncaught Error: ReactDOM.render(): Invalid component element. Instead of passing a string like 'div', pass React.createElement('div') or <div />.
</script>
调用react的核心方法ReactDOM.render方法,运行后,我们发现程序报错了,错误信息的意思就是,我们不能用像‘div’这样的字符串作为内容的参数,我们可以用像React.createElement('div')或者</div>这种标签的形式(标签的形式其实就是jsx语法)
我们先试一试第一种方式
var RDom = React.createElement('h2');
console.log( RDom );
ReactDOM.render(
RDom,
document.body
) //Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
这时候我们发现h2这个标签确实是被渲染进了body里面,但是控制台报了一个警告信息,大概意思就是不能用body作为容器
var RDom = React.createElement('h2');
ReactDOM.render(
RDom,
document.getElementById("box")
)
这时候我们发现警告信息没有了,且div里面渲染进了一个h2标签,其实React.createElement();是接收三个参数的,第一个参数表示标签,第二个参数表示传的参数,第三个参数表示标签里面的内容
var RDom = React.createElement('h2',null,'sadfisdfisd');
ReactDOM.render(
RDom,
document.getElementById("box")
)
那如果我们想在h2标签中创建一个div呢
var RDom = React.createElement('h2',null,React.createElement('div',null,'我是div'));
ReactDOM.render(
RDom,
document.getElementById("box")
)
我们看到是这种层层嵌套的关系,那如果有十层八层的写起来就太麻烦了,这时候就该jsx语法上场了
铛铛铛。。。。
<script src="browser.min.js"></script>
在页面中引入brower.js,它就是将jsx语法编译成js
同时我们要修改script标签中的type属性,像这样
<script type="text/babel">
我们来看看jsx的威力
ReactDOM.render(
<h2>
<div title="123">
<div>我是jsx语法创建的</div>
</div>
</h2>,
document.getElementById("box")
)
就是如此简单,像写html一样
React系列,初识的更多相关文章
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- React 系列教程 1:实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...
- 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- 从 0 到 1 实现 React 系列 —— 2.组件和 state|props
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- react系列笔记1 用npx npm命令创建react app
react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...
- react系列教程
这个系列将从基础语法讲起,把react全家桶都讲到,然后到具体的使用,最后完成后,会写一个完整的demo. 前置要求: 基本的CSS,JS要熟练. 部分ES6语法需要了解.可以参考下面提到的阮一峰老师 ...
- React系列之--props属性
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...
随机推荐
- saltstack配置文件详解
软件依赖 Python版本大于2.6或版本小于3.0: 对Python版本要求 msgpack-python: SalStack消息交换库 YAML: SaltStack配置解析定义语法 Jinja2 ...
- 在ensp上的ARP及Proxy ARP
啥是ARP?啥又是Proxy ARP? ARP是用来将 IP 地址解析为 MAC 地址的协议. ARP 表项可以分为动态和静态两种类型.动态 ARP ,是利用 ARP 广播报文,动态执行并自动进行 I ...
- 查看端口被哪个程序占用的DOS命令
netstat -aon | findstr 80Proto Local Address Foreign Address State PID==== ============ ============ ...
- Mac OS备份迁移iBooks图书操作方法
前段时间换电脑,需要把原本电脑上的一些文件备份.迁移出来,包括iBooks中的电子书. 理论上,苹果体系中通过icloud账号可以把通讯录.备忘录等东西同步过去,但查了一下发现图书支持有限,而且我的e ...
- 如何在一个文件中写多个Vue组件(译-有删改)
原文地址 Writing multiple Vue components in a single file 在一个文件中编写多个组件是React的模式,其中一些文件包含多个组件. 走开发过程中,有些组 ...
- LeetCode 946. 验证栈序列(Validate Stack Sequences) 26
946. 验证栈序列 946. Validate Stack Sequences 题目描述 Given two sequences pushed and popped with distinct va ...
- Go语言( 函数)
函数是组织好的.可重复使用的.用于执行指定任务的代码块.本文介绍了Go语言中函数的相关内容. 函数 Go语言中支持函数.匿名函数和闭包,并且函数在Go语言中属于“一等公民”. 函数定义 Go语言中定义 ...
- 【IDEA使用技巧】(4) —— IDEA 构建Java Maven项目、导入Eclipse项目、多Module Maven项目
1.IntelliJ IDEA构建Java Maven项目 1.1. IDEA构建Java Maven项目 ①选择Create New Project,选择创建Maven项目,并勾选Create fr ...
- Jmeter 接口测试之MD5加密函数(函数助手篇)
转自:https://blog.csdn.net/hhyangel372/article/details/81571058 本文给大家介绍一下如何使用Jmeter自带的函数对常量和变量进行简单的加密处 ...
- HTTPDNS
传统 DNS 缺点 1.域名缓存问题 它可以在本地做一个缓存,也就是说,不是每一个请求,它都会去访问权威 DNS 服务器,而是访问过一次就把结果缓存到自己本地,当其他人来问的时候,直接就返回这 ...