React 初识 和 React 组件基础

目录

一. react背景及它是什么？

二. React 特点

三 . 脚手架创建项目

JSX 是什么

JSX 是如何工作的

JSX 使用注意点

react中使用样式的两种方式：

className

---

一. react背景及它是什么？

React 起源于 Facebook(Meta) 的内部项目（2011，News Feed），之后又被用来开发网站（2012，Instagram），并于 2013 年 5 月开源。

它是一个用于构建用户界面的JavaScript库

二. React 特点

1.声明式

---只需要描述 UI（HTML）看起来是什么样子，就像写 HTML 一样简单，React 内部负责渲染 UI，并在数据变化时自动更新 UI。

2.组件化

把复杂的页面拆分成一个一个的单元，这些组成页面的基本单元就是组件，通过组合、复用组件来编写复杂界面的方式，就是组件化。

三 . 脚手架创建项目

1.命令是：npx create-react-app react-basic(这个是你创建的项目名字)

2.启动的命令是 ：yarn start 或者 npm start

用npx创建脚手架项目的优点是：会调节最新的 create-reate-app  直接创建react项目

使用react脚手架来渲染页面的基本步骤
1.首先是 引入2个包  ---第一个是核心包（react），还有一个是dom的操作包（react-dom）
2.然后是调用react.createElement（里面有三个参数，1.标签名   2.标签属性  3.标签的内容 ）方法创建react元素  ，它返回的是一个react元素（虚拟dom）
3.最后就是调用操作包也就是reactDOM.render()方法渲染react元素到页面（渲染也有两个参数，1.渲染的是谁  2. 渲染到哪）

在上面我们使用React.createElement() 创建 React 元素的问题：它的使用繁琐，不直观，并且代码不容易维护

JSX 是什么

JSX 是 JavaScript XML 的简写，表示可以在 JavaScript 代码中写 XML（HTML） 格式的代码。

优势：声明式语法更加直观，与 HTML 结构相同，降低了学习成本，提高了开发效率，JSX 是 React 的核心之一。

1.使用 JSX 创建 React 元素

const title = <h1>Hello JSX</h1>

2.使用ReactDOM.render()方法渲染React 元素到页面中

ReactDOM.render(title, document.querySelector('#root'))

JSX 是如何工作的

JSX 需要使用 Babel 编译成 React.createElement() 的形式，然后配合 React 才能在浏览器中使用，而 create-react-app 脚手架中已经内置了 Babel 及相关配置。

JSX 使用注意点

1. 必须有 1 个根节点，或者虚拟根节点 <></>、<React.Fragment></React.Fragment>。

2. 属性名一般是驼峰的写法且不能是 JS 中的关键字，例如 class 改成 className，label 的 for 属性改为 htmlFor，colspan 改为 colSpan。

3. 元素若没有子节点，可以使用单标签，但一定要闭合，例如 <span/>。

4. React@16.14 之前需要先引入 React 才能使用 JSX（这个也好理解，因为 JSX 最后还是要被转成 React.createElement() 的形式）。

5. 换行建议使用 () 进行包裹，防止换行的时候自动插入分号的 Bug。

6. 

JSX中使用的表达式

1.单大阔号中可以使用任意的表达式（一定要是能产生结果的式子）如下

const name = 'zs'
const age = 18
const title = (
    <h1>
        姓名：{name}, 年龄：{age}
    </h1>
)

2.对象中的属性

const car = {
    brand: '思域',
}
const title = <h1>汽车：{car.brand}</h1>

3.数组中的某一项或者整个数组

const friends = ['张三', '李四']
const title = <h1>人名：{friends}</h1>

4.还可以调用方法

function sayHi() {
    return '你好'
}
const title = <h1>姓名：{sayHi()}</h1>

注意

js对象虽然也是表达式，但是不能直接嵌套在{}中，一般只会出现在style中

还有就是JSX本身也是表达式  如下：

const span = <span>我是一个span</span>
const title = <h1>盒子{span}</h1>

小结：

JSX中可以包含任意的表达式（除了对象）

JSX中不能放语句，列如 ： if   ， switch ， for   while 等等...

在JSX里面常用的是数组的map方法来生成列表结构---map返回新数组

关于key的作用

1.特点：key值要保证唯一，尽量避免使用索引号，key 在最终的 HTML 结构中是看不见的

2.加在哪里：map遍历谁，就把key加在谁上面

3.作用：react内部用来进行性能优化时使用的，key 在最终的 HTML 结构中是看不见的

样式处理

react中使用样式的两种方式：

1.行内样式

<div style={{ width: 200, height: 200, lineHeight: '200px', backgroundColor: 'black', color: 'white', textAlign: 'center', fontSize: 30 }}>React</div>

注意点：

a，为啥有两个{{ }}，外层的 {} 表示要开始写 JS 表达式了，内层的 {} 表示是一个对象。

b，属性名是小驼峰格式，例如 background-color 需要写成 backgroundColor。

c，属性值是字符串，如果单位是 px，可以简写成数值。

className

用className定义类名

1.首先是准备index.css文件，然后在 index.js 文件中通过 import './index.css' 引入文件

.title {
    width: 200px;
    height: 200px;
    color: white;
    background-color: black;
}

import './index.css'
<div className='title'>Hello React</div>

小结：

类名使用className，推荐

行内样式，<div style={{ color: 'red' }}>Hello</div>

--------------------------------------------------------------------------------------------------------------