React构建用户界面的JavaScript库,主要用于构建UI界面

特点

声明式的设计
高效，采用虚拟DOM来实现DOM渲染，最大限度的减少DOM操作
灵活，跟其他库灵活搭配使用
JSX，俗称JS里面写HTML，JavaScript语法的扩展
组价化，模块化。代码容易复用，大型项目非常喜欢react
单向数据流。没有实现数据的双向绑定。数据-》视图-》事件-》数据

创建项目(两种方式)

1、通过script引入使用，仅用于学习调试使用

2、通过react的脚手架，创建项目进行开发，部署

1.安装脚手架Create React App

cnpm install -g create-React-app

2.创建项目

Create-react-app my-app(项目名称,名称中不能有大写字母)

React 渲染

let h1 = <h1>hello world</h1>
使用JSX的写法,可以创建JS元素对象
注意:JSX元素对象,或者组件对象,必须只有1个根元素(根节点)

案例

function clock(){
  let time = new Date().toLocaleTimeString();
  let element = (
    <div>
      <h1>现在的时间是{time}</h1>
      <h2>这是副标题</h2>
    </div>
  )
  let root = document.querySelector('#root');
  ReactDOM.render(element,root);
}

clock();

setInterval(clock, 1000);

函数式组件渲染

// react 函数式组件
function Clock(props){
  return(
    <div>
      <h1>现在的时间是{props.date.toLocaleTimeString()}</h1>
      <h2>这是副标题</h2>
    </div>
  )
}
function run(){
  ReactDOM.render(
    <Clock date={new Date()}/>,
    document.querySelector('#root')
  )
}

setInterval(run,1000);

React JSX

优点

1、JSX执行更快，编译为JavaScript代码时进行优化

2、类型更安全，编译过程如果出错就不能编译，及时发现错误

3.JSX编写模板更加简单快速（不要跟VUE比）

注意

1.JSX必须有根节点

2.正常的普通HTML元素要小写。如果是大写，默认认为是组件

JSX表达式

1、由HTML元素构成

2、中间如果需要插入变量用{}

3、{}中间可以使用表达式

4、{}中间表达式中可以使用JSX对象

5、属性和html内容一样都是用{}来插入内容

用例

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

let time = new Date().toLocaleTimeString();
let str = "当前时间是:"
let element = (
  <div>
    <h1>helloworld</h1>
    <h2>{str+time}</h2>
  </div>
);

let man = '发热';
let element2 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man === '发热' ? <button>隔离</button>: "躺床上"}</h2>
  </div>
)

let element4 = (
  <div>
    <span>横着躺</span>
    <span>竖着躺</span>
  </div>
)
let element3 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man === '发热1' ? <button>隔离</button>: element4}</h2>
  </div>
)
let color = 'bgRed';
let logo = 'https://www.baidu.com/img/fddong_e2dd633ee46695630e60156c91cda80a.gif';
// HTML 样式类名要写className,因为class在js当中是关键字
let element5 = (
  <div className={color}>
    <span>red</span>
    <img src={logo}/>
  </div>
)

ReactDOM.render(
  element5,
  document.querySelector('#root')
)

JSX样式

1、Class，style 中不可以存在多个className属性

<div className = 'abc' className= "active"></div>  错误的表示

2.style样式中,如果存在多个单词的属性组合,第二个单词开始,首字母大写。否则会报错

<h1 style={{background: 'skyblue', borderBottom:'1px solid red'}}>helloworld2</h1>

标签中样式属性采用驼峰命名,style中以对象形式传入

let exampleStyle = {
  background: 'skyblue',
  borderBottom: '1px solid red'
}

let element = (
  <div>
  	// 两种格式都可以
    <h1 style={exampleStyle}>helloworld</h1>
    //<h1 style={{background: 'skyblue', borderBottom:'1px solid red'}}>helloworld2</h1>
  </div>
)

3.多个类共存的操作

class命名不可以使用两个className属性,否则会被后面的className覆盖要添加多个class需要以下格式写, 固定的class需要在名字之后加个空格

let classStr = 'bgRed';
let element2 = (
  <div>
    <h1 className ={"abc "+ classStr}>helloworld</h1>
  </div>
)

另一种方法就是将class定义在数组中进行拆分,结果以上代码的效果是一致的

let classStr2 = ['abc2', 'bgRed2'].join(' '); // 拆分的时候以空格进行分隔
let element3 = (
  <div>
    <h1 className ={classStr2}>helloworld</h1>
  </div>
)

4.jsx注释

必须在括号的表达式内书写，否则报错

{/* 这里写注释 */}

认识React及JSX

特点