一、【React基础】React简介及基本使用

文章目录

  • 1、官网
  • 2、特点
  • 3. 相关js库
  • 4、基本使用
    • 4.1、CODE
    • 4.2、Result

  1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)

  2. 由Facebook开源

1、官网

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

2、特点

  1. 声明式编码

  2. 组件化编码

  3. React Native 编写原生应用

  4. 高效(优秀的Diffing算法)

3. 相关js库

  1. react.js:React核心库

  2. react-dom.js:提供操作DOM的react扩展库

  3. babel.min.js:解析JSX语法代码转为JS代码的库

4、基本使用

4.1、CODE

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demotitle>
head>
<body>
	
	<div id="byJsx">div>

	
	<div id="byJs">div>

	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	
	<script type="text/babel" >
		//1.创建虚拟DOM(多层级换行写需要用小括号包起来)
		const JsxVDOM = <h1 id="jsx_id">Hello,React by jsx</h1> /* 不要写引号!不是字符串! */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(JsxVDOM, document.getElementById('byJsx'))
	script>

	
	<script type="text/javascript" >
		//1.创建虚拟DOM(多层级需要React.createElement无限套娃)
		const JsVDOM = React.createElement('h1', {id: 'js_id'}, 'Hello,React by js')
		//2.渲染虚拟DOM到页面
		ReactDOM.render(JsVDOM, document.getElementById('byJs'))
	script>
    
body>
html>

4.2、Result

一、【React基础】React简介及基本使用_第1张图片



小白学习参考视频:尚硅谷React教程

你可能感兴趣的:(React,react.js,前端)