【React学习笔记】从0开始——01基本使用

React系列笔记共包括：React基本使用、React 组件基础、React组件进阶、React原理、React路由、React实战六个部分，本篇博客为第一部分【React基本使用】，学习的视频为黑马的React。
React官网文档链接：网址

一、React基础

1、React是什么

React就是用于构建用户界面的JavaScript库，只负责视图的渲染(V)，并非提供Model(M)、Controller(C)的的功能。

2、React的特点

• 声明式：只需要描述UI的样子，React只负责渲染UI，并在数据变化时更新UI

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

• 基于组件
  最重要的内容，组件表示的页面中的部分内容。如果之前学习过Vue等其他框架，应该能理解什么意思。通过组合、复用多个组件，可以实现页面的完整功能。
• 应用场景多

3、React基本使用

基本是通过脚手架去开发项目的，该部分仅做了解。

• (1)安装命令：

npm i react react-dom

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

• (2)html文件中引入下载好的react和react-dom。这里有个小细节需要注意，下面代码引用的局部安装的模块文件，如果执行上述安装命令并没有在文件中显示模块依赖，可能是npm设置了全局安装。

<script src="./node_modules/react/umd/react.development.js"></script> 
 <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

• (3)创建react元素并渲染
  成功引入后通过React.createElement(元素名称，元素属性，元素的子节点）创建，接着ReactDOM.render(渲染元素，挂载点如document.getElementById(‘root’)）进行渲染

4、React脚手架

(1)初始化项目

npx create-react-app my-app

create-react-app是脚手架名称，不可更改；my-app是项目名称，可自定义
(2)启动项目

npm start

如果有yarm，也可以执行yarm start。注意，一定要在项目的根目录下执行
(3)在脚手架中使用React
第一步：与基本使用相同，导入react和react-dom两个包

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

第二步：React.createElement()创建元素，ReactDOM.render()渲染元素，用法与前面一样

5、JXS

(1) JXS简介

JXS是Javascript XML的简写，表示Javascript在XML格式的代码，声明式语法更加直观，与HTML内容结构相同。
使用JSX语法创建react元素
注意：

1. 元素的属性名使用驼峰命名法，以及一些特殊的属性名class->className for->htmlFor
2. 没有子节点的React元素可以写成单标签
3. 推荐使用（）包裹JSX，避免JS中的自动插入分号陷阱

//创建react元素
const title = (
<h1>Hello JXS <span/></h1>
)
//渲染创建好的元素
ReactDOM.render(title,root)

(2) JXS使用表达式

1. JXS中可以使用任何JS表达式（对象除外）
2. JSX自身也可以是表达式
3. 不能在 ** {}中** 出现语句

(3)JSX渲染

1. 条件渲染

//判断语句
const isLoading = true
const loadData =()=>{
    if(isLoading){
      return <div>Loading...</div>
    }
    return <div>数据加载完成</div>
}
//三元表达式
const loadData =()=>{
 return isLoading ?(<div>Loading</div>):(<div >数据加载完成</div>)
}
//逻辑与运算符
const loadData =()=>{
 return isLoading &&(<div>Loading</div>)
}

2. 列表渲染
   使用数组map()方法，渲染列表时应该添加Key属性（Key值要保证唯一）

const movies=[
  {id:1, name:'绿皮书'},
  {id:2, name:'何以为家'},
  {id:3, name:'霸王别姬'}
]
const list=(
  <ul>
  //避免使用索引号等可变化的属性当作key
    {movies.map(item => {
     <li key={item.id}>{item.name}</li>
    })}
  </ul>
)

（4）JSX样式处理

1. 行内样式
2. 类名——className【推荐】
   在文件开头引入样式即可

下一篇博客：React组件基础