react介绍和安装
一.介绍
react是由Facebook公司前端开发团队进行开和维护
定义.
用于构建用户界面的 JavaScript 库
特点:
- react是基于组件化进行开发
- react中由数据驱动和视图渲染来构建单页面应用
- react中没有基本的指令,计算属性,监听器.过滤器等等
- react中没有自动的数据双向绑定
-
React是react.js的核心. -
ReactDOM是react-dom.js的核心
二.下载安装
- 方式一:
<!--
2.引入react
1.引入react.js
2.react-dom.js
3.development: 开发环境中使用
-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
- 方式二:
npm init #初始化
npm i react --save #安装react
三.核心对象及方法介绍
-
React-
React是react.js的核心对象 -
React.createElement('创建的元素',{属性集合},文本内容)
-
-
ReactDOM-
ReactDOM是react-dom.js的核心对象 -
ReactDOM.render(元素对象,渲染到元素作用域范围)
-
四.案例
- 体验demo
<!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>Document</title>
<!--
2.引入react
1.引入react.js
2.react-dom.js
3.development: 开发环境中使用
-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<!-- 1.创建一个容器 -->
<div id="container">
</div>
<script>
// 1.React
/**
1.React.createElement() #创建一个元素
2.参数一: 创建的元素
3.参数二: 属性集合
4.参数三: 文本内容
*/
// React.createElement('创建的元素',{属性集合},文本内容);
const h1 = React.createElement('h1',{title:'react',style:{background:'aqua',color:'red',border:'1px solid orange'}},'第一次学习react');
// console.log(h1);
// 2.ReactDOM
/**
* 1.ReactDOM.render() #将元素对象成功的渲染到视图
* 2.参数一: 元素对象
* 3.参数二: 渲染到元素作用域范围
*/
// ReactDOM.render(元素对象,渲染到元素作用域范围)
ReactDOM.render(h1,document.querySelector('div'));
</script>
</body>
</html>
- 嵌套
<!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>Document</title>
<!--
2.引入react
1.引入react.js
2.react-dom.js
3.development: 开发环境中使用
-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<!-- 1.创建一个容器 -->
<div id="container">
</div>
<script>
const h2 = React.createElement('h2',{title:'新闻列表'},'新闻列表');
const img = React.createElement('img',{src:'./images/nanshidiao.jpg'},null);
const div = React.createElement('div',{className:'main'},h2,img);
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>