React简介及基本使用

什么是 react及概念：

• React是一个用于构建用户界面的JavaScript库
• React只要用来写HTML页面或构建Web应用
• 如果从MVC的角度来看，React仅仅是视图层（V），负责视图的渲染
• React起源于FaceBook内部项目

基本使用：

1、安装React

npm i react react-dom

react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关功能等
2、引入两个js文件、创建React元素、渲染React元素到页面中

       1）引入js文件

       2）创建react元素

        //参数一、元素名称；二、元素属性；三、元素的子节点

        const title = React.createElement('h1', null, 'hello React')

       3）渲染react元素

        //参数一“要渲染的react元素

        //参数二”挂载点

        ReactDOM.render(title, document.getElementById('root'))
 

React脚手架

特点：零配置、关注业务、而不是工具配置、脚手架是开发现代web应用的必备、Webpack || Bable || ESlint等工具辅助项目开发

脚手架使用：index.js

import React from 'react'
import ReactDOM from 'react-dom'
 
const title = Reacte.createElement('h1',null,'hello React!!')
 
ReactDOM.render(title,document.getElementByLd('root'))

JSX 

jsx是React的核心内容

jsx是JavaScript的简介，表示在js代码中写html格式的代码

优势：声明式语法更加直观、与html结构相同，降低了学习成本、提升开发效率

Reacte.createElement 使用繁琐不简介、不直观、无法一眼看出所描述的结构，不优雅，用户体验不佳

 使用步骤：
 

使用JSX语法创建react元素
const title =

        

hello JSX

使用ReactDOM.render()方法渲染react元素到页面中
ReactDOM.render(title,root)

JSX语法更能体现React的声明式特点

⚠️  注意点： 

React元素的属性名使用驼峰命名法
特殊属性名：class->className、for ->htmlFor、tabindex->tabIndex
没有子节点的React元素可以用< />结束
推荐：使用小括号包裹JSX，从而避免js中的自动插入分号陷阱