react基础Day01-React概述&脚手架搭建&JSX&组件

React基础知识点

目标

• 能够说出React是什么
• 能够说出React的特点
• 能够掌握React的基本使用
• 能够使用React脚手架

什么是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

<