#React#基础学习笔记#01-React基础

1.React概述

1.1什么是react

用户构建用户界面的JavaScript库

用户界面：html页面（前端）

react主要用来写html页面，或构建web应用

如果从mvc的角度来看，react仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的M和C的功能。

1.2特点

声明式

基于组件

组件是react最重要的内容

组件表示页面中的部分内容

组合、复用多个组件，可以实现完整的页面功能

学习一次，随处使用

使用react可以web应用

使用react可以开发移动端原生应用（react-native）

使用react可以开发VR(虚拟现实)应用（react 360)

2.react的基本使用

2.1安装

安装命令：npm i react react-dom

• react包是核心，提供创建元素、组件等功能
• react-dom包提供DOM相关功能等

执行完成安装命令之后可以在package.json进行查看

2.2使用

1.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>

2.创建React元素

<script>
    const title=React.createElement('h1',null,'Hello React')
</script>

3.渲染React元素到页面中（注意代码的大小写问题）

<div id="root"></div>
    <script>
        const title=React.createElement('h1',null,'Hello React')
        ReactDOM.render(title,document.getElementById('root'))
    </script>

2.3方法说明

React.createElement()说明 （知道）

• 返回值：React元素
• 参数1：要创建的React元素的名称
• 参数2：该React元素的属性
• 参数3（及以后的参数）：该React元素的子节点

const e1=createElement('h1',{title:'标题'},'Hello React')

ReactDOM.render（） 说明

• 参数1:要渲染的React元素
• 参数2：DOM对象，用于指定渲染页面中的位置

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

3.React脚手架的使用

3.1意义

• 脚手架是开发现代WEB应用的必备
• 充分利用Webpack、Babel、ESLint等工具辅助项目开发
• 零配置，无需手动配置繁琐的工具即可使用
• 关注业务，而不是工具配置

3.2使用脚手架初始化项目

初始化项目，命令：npx create-react-app my-app

启动项目，在项目的根目录执行命令：npm start

npx命令介绍

• npm v5.2.0引入的一条命令
• 目的：提升包内提供的命令工具的使用体验
  • 原来：先安装脚手架包，在使用这个包中提供的命令
  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

补充说明

• 推荐使用：npx create-react-app my-app

  • create-react-app：固定的脚手架的名字，不可以更改

  • my-app：自己项目的名字，可以自己随意填写

• npm init react-app my-app

• yarn create react-app my-app

  • yarn是Facebook发布的包管理器，可以看作是npm替代品，功能和npm相同
  • yarnh具有快速、可靠和安全的特点
  • 初始化新项目：yarn init
  • 安装包：yarn add 包名称
  • 安装项目依赖项：yarn
  • 其他命令，参考中文文档 | Yarn 中文文档 (bootcss.com)

3.3在脚手架中使用后React

导入react和react-dom两个包

import React from 'react'
import ReactDOM from 'react-dom'

Reac基础总结

1. React是构建用户界面的JavaScript库
2. 使用react时，推荐使用脚手架方式
3. 初始化项目命令：npx create-react-app my-app
4. 启动项目命令：yarn start（或npm start）
5. React.createElement()方法用于创建react元素（知道）
6. ReactDOM.render()方法负责渲染react元素到页面中