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-appyarn 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

概念:JSXJavaScriptXML(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 (
    
{/* 1. 使用引号传递字符串 */}

{"Hello, React!"}

{/* 2. 使用 `JavaScript` 变量 */}

{message}

{/* 3. 函数调用 */}

{getMessage()}

{/* 4. 方法调用 */}

{new Date().toLocaleString()}

{/* 5. 使用 `JavaScript` 对象 */}

{"使用 `JavaScript` 对象"}

); }

JSX 中实现列表渲染

### 语法

{/* 列表渲染 */}

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

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

JSX 中实现条件渲染

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

{/* 条件渲染 */}

const isShow = true;

{/* 条件渲染 */} {/* 逻辑与运算符 && */} {isShow &&

显示内容

} {/* 三元表达式 */} {/* condition ? expressionIfTrue : expressionIfFalse */} {isShow ?

显示内容

: null}

复杂情况的条件渲染

需求:列表中需要根据文章状态适配三种情况,分别是:单图、三图、无图三种模式
实现:自定义函数 + if 判断语句

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

// 定义核心函数(根据文章类型返回不同的 jsx 模板
function renderArticle(articleType) {
  if (articleType === 1) {
    return 
单图模式
; } else if (articleType === 2) { return
三图模式
; } else if (articleType === 3) { return
无图模式
; } } 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 (
    {/* 列表渲染 */} {articleList.map((item) => (
  • {/* 条件渲染 */} {renderArticle(item.type)}
  • ))}
); }

你可能感兴趣的:(React,react.js,前端,前端框架)