React项目的开发前准备 以及 JSX 的基本使用

React 项目的开发前准备 以及 JSX 的基本使用

React 项目创建

create-react-app

npx create-react-app my-app
cd my-app
npm start

yarn create react-app

yarn create react-app my-app
cd my-app
yarn start

create-react-app 和 yarn create react-app 都可以快速创建一个 React 项目，并且会自动安装依赖。

项目目录结构

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

1. README.md：项目说明文档。
2. node_modules：项目依赖包。
3. package.json：项目配置文件。
4. .gitignore：Git 忽略文件配置。
5. public：静态资源目录。
6. src：项目源码目录。
7. App.css：项目全局样式文件。
8. App.js：项目入口文件。
9. App.test.js：项目测试文件。
10. index.css：项目入口样式文件。
11. index.js：项目入口文件。
12. logo.svg：项目 logo 文件。
13. serviceWorker.js：项目 PWA 文件。

项目运行

npm start

JSX

什么是JSX？

概念：JSX 是 JavaScript 和 XML(HTML) 的缩写，
表示在 JavaScript 代码中编写 HTML 模板结构，
它是 React 中编写 UI 模板的方式。

为什么要使用JSX？

• 代码可读性高：JSX 代码可读性高，可以直观地看到 HTML 结构。
• 代码提示：JSX 代码提示可以自动补全，提高编码效率。
• 代码压缩：JSX 代码压缩后可以减少代码体积，提高加载速度。
• 代码复用：JSX 代码可以被其他 JSX 文件复用，提高代码复用率。

使用JSX的优势

• HTML 的声明式模板写法
• JS 的可编程能力

JSX 的本质

JSX 不是标准的 JavaScript 语法
它是 JS 语法的扩展，浏览器本身识别不到 JSX 代码，需要通过解析工具解析之后才能在浏览器中运行。

JSX 语法

JSX 语法的基本规则：

• JSX 代码必须包含在 React.createElement() 方法中。
• JSX 代码中只能有一个顶层元素。

JSX 高频场景

JSX 中使用 js 表达式

在 JSX 中可以通过 大括号语法{} 识别 js 表达式，比如常见的变量、函数调用、方法调用等等

1. 使用引号传递字符串
2. 使用 JavaScript 变量
3. 函数调用和方法调用
4. 使用 JavaScript 对象

// 项目的根组件

const message = "message";
function getMessage() {
  return "函数调用";
}

export default function App() {
  return (
    <div className="App">
      {/* 1. 使用引号传递字符串 */}
      <p>{"Hello, React!"}</p>

      {/* 2. 使用 `JavaScript` 变量 */}
      <p>{message}</p>

      {/* 3. 函数调用 */}
      <p>{getMessage()}</p>

      {/* 4. 方法调用 */}
      <p>{new Date().toLocaleString()}</p>

      {/* 5. 使用 `JavaScript` 对象 */}
      <p style={{ color: "blue" }}>{"使用 `JavaScript` 对象"}</p>
    </div>
  );
}

JSX 中实现列表渲染

###　语法

{/* 列表渲染 */}

const list = ["apple", "banana", "orange"];

<ul>
  {/* 列表渲染 */}
  {/* map 循环那个结构 return 结构 */}
  {/* 加上 key 值， 独一无二的标识符 字符串或者 number id */}
  {/* key 的作用：React 框架内部使用，提示更新性能的 */}
  {list.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

JSX 中实现条件渲染

语法：在 React 中，可以通过逻辑与运算符 &&、三元表达式 condition ? expressionIfTrue : expressionIfFalse 来实现条件渲染。

{/* 条件渲染 */}

const isShow = true;

<div>
  {/* 条件渲染 */}
  {/* 逻辑与运算符 && */}
  {isShow && <p>显示内容</p>}

  {/* 三元表达式 */}
  {/* condition ? expressionIfTrue : expressionIfFalse */}
  {isShow ? <p>显示内容</p> : null}
</div>

复杂情况的条件渲染

需求：列表中需要根据文章状态适配三种情况，分别是：单图、三图、无图三种模式

实现：自定义函数 + if 判断语句

// 定义文章类型
const articleType = 1; // 1: 单图 2: 三图 3: 无图

// 定义核心函数（根据文章类型返回不同的 jsx 模板
function renderArticle(articleType) {
  if (articleType === 1) {
    return <div>单图模式</div>;
  } else if (articleType === 2) {
    return <div>三图模式</div>;
  } else if (articleType === 3) {
    return <div>无图模式</div>;
  } 
}

export default function App() {

  const articleList = [
    {
      id: 1,
      title: "文章1",
      type: 1, // 1: 单图 2: 三图 3: 无图
    },
    {
      id: 2,
      title: "文章2",
      type: 2, // 1: 单图 2: 三图 3: 无图
    },
    {
      id: 3,
      title: "文章3",
      type: 3, // 1: 单图 2: 三图 3: 无图
    },
  ];

  return (
    <div className="App">
      <ul>
        {/* 列表渲染 */}
        {articleList.map((item) => (
          <li key={item.id}>
            {/* 条件渲染 */}
            {renderArticle(item.type)}
          </li>
        ))}
      </ul>
    </div>
  );
}