学习笔记 React(一)Hello React例子及创建虚拟DOM的两种方式

  • React官网地址
  • React库
  • 最基础的例子

官网

1.    英文官网: https://reactjs.org/
2.    中文官网: https://react.docschina.org/

React库

babel.min.js(ES6 => ES5     JSX => JS)

react.development.js(核心库)

react-dom.development.js(扩展库)

prop-types.js(用来校验父组件传递过来值的类型)

最基础的例子

下面是一个没有基于脚手架写的例子:

例子中有三个需要注意的地方

1、JS加载是有顺序的,严格执行下面的顺序;

2、虚拟DOM的值不可以加引号;

3、

上面代码中,这句话就是直接用的JSX去创建虚拟DOM。

const VDOM = 

Hello,React

/* 此处一定不要写引号,因为不是字符串 */

问题来了,我们为什么不用原生的JS,要用JSX呢?还要重新学JSX,JS究竟怎么了?

仔细再来对比一下,先看JSX创建虚拟DOM的例子










运行后生成代码如下,主要看第3行:


	
	

Hello,React

再来看用JS创建虚拟DOM,这里不需要再引入babel.min.js了,因为不需要写JSX了:

仔细看下面的注释










运行后生代码如下:

Hello React-js

写到这里,发现JSX实现的内容,JS也可以实现,那为什么还要学JSX,再来深入一点点看一个例子,就立刻知道了JSX的香了。。。

需求:在上面的h1标签 里再包含一下span标签,应该怎么写程序呢?

JSX写法:

 const VDOM = 

Hello,React

运行结果如下:

Hello,React

JS写法,如果JS这样写:

const VDOM = React.createElement('h1',{id:'title'},'Hello React-js') 

运行结果是把Hello React-js直接输出到了页面上。因为标签体内容写标签程序是不认的,所以还是再创建一个DOM

所以JS要这样改造一下才行,循环嵌套createElement:

	

这样运行出来就对了,那么如果再来几层嵌套,JS这种写法就显得力不从心了。

也就是说,JSX可以更加简单的创建多层虚拟DOM,写起来更加流畅,JSX也可以按层次写代码,但要用小括号包起来,如:

	

总结一下,浏览器不认识上面的代码,所以要通过写

你可能感兴趣的:(学习笔记,React,react.js,学习,javascript)