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
README.md：项目说明文档。node_modules：项目依赖包。package.json：项目配置文件。.gitignore：Git 忽略文件配置。public：静态资源目录。src：项目源码目录。App.css：项目全局样式文件。App.js：项目入口文件。App.test.js：项目测试文件。index.css：项目入口样式文件。index.js：项目入口文件。logo.svg：项目 logo 文件。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 表达式，比如常见的变量、函数调用、方法调用等等
- 使用引号传递字符串
- 使用
JavaScript变量 - 函数调用和方法调用
- 使用
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>);
}