学习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系列,初识的更多相关文章

  1. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  2. React 系列教程 1:实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  3. 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  4. 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

    本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...

  5. 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  6. 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  7. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  8. react系列笔记1 用npx npm命令创建react app

    react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...

  9. react系列教程

    这个系列将从基础语法讲起,把react全家桶都讲到,然后到具体的使用,最后完成后,会写一个完整的demo. 前置要求: 基本的CSS,JS要熟练. 部分ES6语法需要了解.可以参考下面提到的阮一峰老师 ...

  10. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

随机推荐

  1. saltstack配置文件详解

    软件依赖 Python版本大于2.6或版本小于3.0: 对Python版本要求 msgpack-python: SalStack消息交换库 YAML: SaltStack配置解析定义语法 Jinja2 ...

  2. 在ensp上的ARP及Proxy ARP

    啥是ARP?啥又是Proxy ARP? ARP是用来将 IP 地址解析为 MAC 地址的协议. ARP 表项可以分为动态和静态两种类型.动态 ARP ,是利用 ARP 广播报文,动态执行并自动进行 I ...

  3. 查看端口被哪个程序占用的DOS命令

    netstat -aon | findstr 80Proto Local Address Foreign Address State PID==== ============ ============ ...

  4. Mac OS备份迁移iBooks图书操作方法

    前段时间换电脑,需要把原本电脑上的一些文件备份.迁移出来,包括iBooks中的电子书. 理论上,苹果体系中通过icloud账号可以把通讯录.备忘录等东西同步过去,但查了一下发现图书支持有限,而且我的e ...

  5. 如何在一个文件中写多个Vue组件(译-有删改)

    原文地址 Writing multiple Vue components in a single file 在一个文件中编写多个组件是React的模式,其中一些文件包含多个组件. 走开发过程中,有些组 ...

  6. LeetCode 946. 验证栈序列(Validate Stack Sequences) 26

    946. 验证栈序列 946. Validate Stack Sequences 题目描述 Given two sequences pushed and popped with distinct va ...

  7. Go语言( 函数)

    函数是组织好的.可重复使用的.用于执行指定任务的代码块.本文介绍了Go语言中函数的相关内容. 函数 Go语言中支持函数.匿名函数和闭包,并且函数在Go语言中属于“一等公民”. 函数定义 Go语言中定义 ...

  8. 【IDEA使用技巧】(4) —— IDEA 构建Java Maven项目、导入Eclipse项目、多Module Maven项目

    1.IntelliJ IDEA构建Java Maven项目 1.1. IDEA构建Java Maven项目 ①选择Create New Project,选择创建Maven项目,并勾选Create fr ...

  9. Jmeter 接口测试之MD5加密函数(函数助手篇)

    转自:https://blog.csdn.net/hhyangel372/article/details/81571058 本文给大家介绍一下如何使用Jmeter自带的函数对常量和变量进行简单的加密处 ...

  10. HTTPDNS

    传统 DNS 缺点 1.域名缓存问题     它可以在本地做一个缓存,也就是说,不是每一个请求,它都会去访问权威 DNS 服务器,而是访问过一次就把结果缓存到自己本地,当其他人来问的时候,直接就返回这 ...