React
React是一个用于构建用户界面的 javaScript库
起源于facebook的内部项目,后续在13年开源了出来
特点
-
声明式
你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI
-
基于组件
组件时React最重要的内容,组件表示页面中的部分内容
-
学习一次,随处使用
使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用
React基本使用
React的安装
npm i react react-dom
react
包是核心,提供创建元素,组件等功能react-dom
包提供DOM相关功能
React的使用
- 引入react和react-dom的两个js文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
- 创建React元素
// 创建元素节点
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
let title = React.createElement('li', null, 'hellow react');
- 渲染到页面
// 渲染到页面
ReactDOM.render(title, root)
React脚手架
React脚手架意义
- 脚手架是开发现代Web应用的必备
- 充分利用 Webpack,Babel,ESLint等工具辅助项目开发
- 零配置,无需手动配置繁琐的工具即可使用
- 关注业务,而不是工具配置
使用React脚手架初始化项目
- 初始化项目,命令:
npx create-react-app my-pro
- npx 目的:提升包内提供的命令行工具的使用体验
- 原来:先安装脚手架包,再使用这个包中提供的命令
- 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
create-react-app
这个是脚手架名称 不能随意更改my-pro
自己定义的项目名称
- 启动项目,在项目根目录执行命令:
npm start
yarn
命令简介
yarn
是Facebook发布的包管理器,可以看做是npm
的替代品,功能与npm
相同yarn
具有快速,可靠和安全的特点- 初始化新项目:
yarn init
- 安装包:
yarn add 包名称
- 安装项目依赖:
yarn
脚手架中使用React
- 导入react和react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'
- 创建元素
let h1 = React.createElement('h1',null,'我是标题')
- 渲染到页面
ReactDOM.render(h1,document.getElementById('root'))