React | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第23天一、React概述 1、是一个JavaS

这是我参与「第四届青训营」笔记创作活动的的第23天

一、React概述

1、是一个JavaScript库，旨在简化可视化界面的开发

2、基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写

3、React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。组件将数据和逻辑进行封装

二、ReactDOM.render()方法的语法格式

1、ReactDOM.render(element,container)

2、element参数：必须，表示渲染的源对象(元素或组件)

3、container参数：必须，表示渲染的目标对象(元素或组件)

4、callback参数：可选，用于定义回调函数

三、React开发环境的搭建

1、基本应用(传统应用)：在页面文件中导入React的核心库(.js文件)

（1）核心库：react.development.js

（2）与DOM相关的库：react-dom.development.js

（3）babel编译器库：将ES6转换成ES5

（4）创建react虚拟DOM

 <script type="text/babel">
		ReactDOM.render(
			<h1>Hello World</h1>,
			document.getElementById('example')
	)
</script>

ReactDOM对象：是React的虚拟DOM对象,内置对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReactDOM</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="react-div"></div>
    <script type="text/babel">
        let reactDiv = document.getElementById('react-div');
        //创建虚拟的DOM元素
        const reactH3 = React.createElement('h3',{},'虎虎生威');
        const reactP = React.createElement('p',{},'新年快乐');
        const reactSpan = React.createElement('spn',{},reactH3,reactP);
        //将span渲染到div中
        ReactDOM.render(reactSpan,reactDiv)
    </script>
</body>
</html>

render函数：渲染函数,将react的虚拟DOM元素渲染到页面

2、脚手架开发：搭建React项目,根据不同的需求开发组件

（1）create-react-app：属于FacdBook,快速的、不做任何配置的构建React开发环境

                    npm install -g create-react-app

（2）create-react-app构建的react开发环境是基于webpack+ES6