react基础学习

react特点

(1) 声明式UI

const jsx = <div className="app">
    <h1>Hello React! 动态数据变化:{count}</h1>
</div>

对比原生: document.createElement('div') 命令式

虚拟dom: 通过 js 对象的方式, 模拟真实的dom, 这个结构, 就是虚拟dom

(2) 组件化

• 组件是react中最重要的内容
• 组件用于表示页面中的部分内容
• 组合、复用多个组件，就可以实现完整的页面功

React 脚手架（CLI）

• 脚手架：为了保证各施工过程顺利进行而搭设的工作平台

• 对于前端项目开发来说，脚手架是为了保证前端项目开发过程顺利进行而搭设的开发平台

• 脚手架的意义：

  • 现代的前端开发日趋成熟，需要依赖于各种工具，比如，webpack、babel、eslint、sass/less/postcss等

  • 工具配置繁琐、重复，各项目之间的配置大同小异

  • 开发阶段、项目发布，配置不同

    • 项目开始前，帮你搭好架子，省去繁琐的 webpack 配置

    • 项目开发时，热更新、格式化代码、git 提交时自动校验代码格式等

    • 项目发布时，一键自动打包，包括：代码压缩、优化、按需加载等

使用 React 脚手架创建项目

• 命令：npx create-react-app react-basic
• npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称

• react-basic 表示项目名称，可以修改

• 启动项目：yarn start or npm start

• npx 调用最新的 create-react-app 直接创建 React 项目

React 的基本使用

• 使用步骤

- 导入react和react-dom     
- 创建react元素(虚拟DOM)
- 渲染react元素到页面中

• 导入react和react-dom

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

• 创建react元素

// 创建元素
const title = React.createElement('h1', null, 'hello react')

• 渲染react元素到页面

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))