读过我的上一篇文章,大家应该对React的有了点小小的认识也带着小小的疑问,我个人认为,读的再多说的再好也不如实际上手练一练,俗话说得好真金不怕火炼,敲上那么一敲,走上正轨 let‘s Go
万丈高楼平地起,今天我们就学习一下怎么像平常开发似的引入react
互联网的资源还是很丰富的,我们找到下面的几个文件
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.js"></script>//编译文件 实现高版本js转成适应浏览器版本对应的js文件
有了这三个文件我们就可以开始进行下一步的开发
<div id="app"></div>
这是我们的body部分,起了一个id为app的div作为我们的容器
接下来正式进入我们react的js开发部分
<script type="text/babel">
var obj = "lisi"
ReactDOM.render(
<div>
<h1>React Js Hello</h1>
<h2>{5+5}</h2>
<h1>{ obj }</h1>
</div>,
document.getElementById('app')
)
</script>
js中有 3个点 是需要我们 特别关注 的地方
1. script标签
<script type="text/babel"></script>
关注的地方1: 我们的script标签的 type值为“text/babel”
只有加上这样一条属性,我们的浏览器才会通过引入的babel.js去正确执行我们写好的文件
<script type="text/babel">
var obj = "lisi"
ReactDOM.render(
<div>
<h1>React Js Hello</h1>
<h2>{5+5}</h2>
<h1>{ obj }</h1>
</div>,
document.getElementById('app')
)
</script>
关注的地方2: React渲染视图的方式 ReactDOM.render()
既然我们使用的是React,那么我们就要遵循react给我们定制好的规则一步一步的向下走,
这个函数里有两个参数,第一个参数: 我们要渲染的内容,第二个参数: 渲染视图的容器
ReactDOM.render(
<div>
<h1>React Js Hello</h1>
<h2>{5+5}</h2>
<h1>{ obj }</h1>
</div>,
document.getElementById('app')
)
关注的地方3: 第一个参数
第一个参数作为我们要渲染的视图部分,有且只能有一个顶层容器来包裹
视图代码,看着像是我们普通的HTML代码,但不是。这里的代码为JSX的语法
(JSX ---->javascript + xml)
我们定义了一个obj 值为 “lisi” <===> let obj = " lisi "
通过插值表达式的方式,将我们定义的值插入其中 { obj }
插值表达式也可以接受一些计算值{5+5}
这样我们的第一个react实例就做好了,打开浏览器看看效果吧。
下一篇我们将进入更深层次的学习,相信自己,加油!!!!