react框架的基本使用

安装命令:npm i react react-dom

这是两个包同时安装 ,可以在package.json中查看.

前期基本工作做完后.开始导入文件.

1.在index.html中引入react和react-dom两个js文件

<script src='./react/umd/react.development.js'></script>先引入

<script src='./react-dom/umd/react-dom.development.js'></script>后引入

2.创建react元素

3.渲染到页面

    <div id='root'></div>
    <script>
    const title = React.createElement('h1',null,'Hellow React') //创建元素
    ReactDOM.render(title,document,getElementById('root'))  //调用render方法获取元素,渲染页面
    </script>
//创建有三个参数,一为创建元素的名称,二为元素的属性,三为元素的节点(子节点,可以是元素节点也可以是文本节点)
//第二个参数,如果创造的元素没有属性,可以写成null

render方法渲染react元素,参数1,代表要渲染的额react元素,参数2,代表挂载点

这是三个基础运用,是一切的起点.

方法说明:

React.createElement(),这个方法创建的元素操作比较繁琐,但是最基本的原理,有必要了解.

在第二个参数,可以加一个对象这样就可以为元素添加多个属性. 第三个参数,可以为元素添加节点,新增的节点也是一个创建的元素也要用到React.createElement(),于是结构就变成了这个样子

const text = React.createElement('p',
{title:'标题',id:'1'}
React.createElement('span',null,'子节点'))  //可以是元素节点也可以是文本节点

重点方法

ReactDOM.render() 主要是将已经创建好的元素渲染到页面中,第二个参数是指定渲染到页面中哪个位置的,比如指定挂载到root上面.

细节:元素获取和JavaScript的方法是一样的,如果是需要挂载到某个盒子可以通过id或者类获取,# 和 . 都是不可获缺的.