React基本使用

1.react 概念

React 是一个开源的 JavaScript 库，用于构建 web 应用中的视图层，既是 web 应用的前端用户页面。（一个用于构建用户界面的 javascript 库，与 2012 年由 Facebook 创建，13 年 5 月开源维护）

2.创建 react 项目

指令使用：

#全局安装react脚手架
npm install create-react-app@5.0.1 -g
#创建项目 名称
create-react-app react-basic
#进入项目根目录启动项目
npm start

目录结构分析

# 项目结构分析
├── README.md                     # 项目的说明书
├── package.json                  # npm 包说明文件、记录项目信息
├── package-lock.json             # 跟踪被安装的每个软件包的确切版本
├── public                        # 本地开发服务器提供的静态资源目录
│   ├── favicon.ico               # 网站图标、显示在浏览器的标签栏中
│   ├── index.html                # 项目的 HTML 模板
│   ├── logo192.png               # react logo 图片 (示例代码中用于设置 IOS 移动端网站图标)
│   ├── logo512.png               # react logo 图片
│   ├── manifest.json             # web 应用清单如名称, 作者, 图标和描述 (主要用于将 Web 应用程序安装到设备的主屏幕)
│   └── robots.txt                # 爬虫协议文件
└── src                           # 项目源码目录
    ├── App.css                   # 示例程序中的根组件样式文件
    ├── App.js                    # 示例程序中的根组件文件
    ├── App.test.js               # 示例程序中的根组件测试文件
    ├── index.css                 # 示例程序中的全局样式文件
    ├── index.js                  # 项目的入口文件
    ├── logo.svg                  # 示例程序中根组件中显示的网站图标文件
    ├── reportWebVitals.js        # 测试应用程序的性能
    └── setupTests.js             # 项目的测试文件

3.react 初使用

#创建h1元素
#参数属性-》(标记名称，标记属性，子元素...);
const title = React.createElement(
 "h1",
 {title:"hello",id:1},
 "hello react"
)
document.createElement("h1");
#获取public文件下的index.html中的div盒子id
const root = ReactDOM.createRoot(document.getElementById("root"))
#使用render方法生成template模板
root.render(title);

4.JSX 概述

jsx 概念

jsx 语法是 React 提供另一种创建用户界面的方式，看起来很像 HTML,但他绝不是 HTML,他是一只 JavaScript 语法扩展。facebook 处于性能考虑，解决必须通过 React.createElement 创建元素，创建出了 jsx，在应用构建的过程中 jsx 由 babel(js 编译器)转换成 React.createElement 方法调用

代码样式

const list = (
  <div className="list">
    <h2>Hello React</h2>
    <ul>
      <li>hello</li>
      <li>react</li>
    </ul>
  </div>
);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(list);

5.JSX 注意事项

(1)JSX 格式美化

当 jsx 中存在多个标记使用小括号（）进行包裹，使代码格式美化排列，创建元素时，元素的最外层必须要有一个根标记

const jsx = (
  <div>
    <ul>
      <li></li>
    </ul>
  </div>
);

(2)避免出现无意义标记，可使用幽灵标记<></>(完整语法<React.Fragment></React.Fragment>)

const jsx = (
  <>
    <div></div>
    <p></p>
  </>
);

(3)JSX 中使用单标签必须是闭合状态

<input type="text"/>
<img src="" alt=""/>

(4)在 JSX 中标记属性使用小驼峰命名法 （由多个单词组成，第一个单词首字符小写，其他单词首字符大写）

<input maxLength="100" readOnly autoFocus />

(5)在 JSX 中为元素添加属性时使用 className 代替 class、htmlFor 代替 for （jsx 本质上是 javaScript）

<input type="text" className="todos"/>
<label htmlFor="demo"/>

6.JSX 嵌入表达式

含义：将表达式产生的值渲染到用户界面中。

表达式就是一个能够产生结果的式子,jsx 里面只能放表达式，非表达式不能被嵌入 JSX

插入值（{}花括号）包裹插入属性值

//插入文本内容
const name = "张三";
const jsx = <div>{name}</div>;
//插入属性值
const activeName = "active";
const jsx = <input type="text" className={activeName} />;
//计算
const x = 10;
const y = 20;
const jsx = <p>{x * y}</p>;
//渲染函数返回值
function getValue() {
  return "jsx";
}
const jsx = <p>{getValue()}</p>;
//表达式
const status = true;
const jsx = status ? <div>true</div> : <div>false</div>;
//插入对象  内容中不能直接插入对象
const jsx = <p style={{ width: 200 }}>{{ name: "jsx" }}</p>;
//注释
{
  /**/
}

7.条件渲染

（1）使用 if 分支语句进行条件渲染

const Status = fasle;
function getContent() {
  if (Status) {
    return <span>true</span>;
  } else {
    return <span>fasle</span>;
  }
}
const jsx = <div>{getContent()}</div>;

（2）使用三元运算符进行条件渲染

const Status = false;
const jsx = Status:<span>true</span>:<span>false</span>

(3)使用逻辑运算符进行条件渲染

逻辑运算符 &&,全为真时返回真，有一个为假返回假
true&&true
false&&true