电气网站开发,网站建设课程任务,公司logo设计免费生成在线制作,谷歌推广网站建设一、React 介绍
React 是一个由 Meta#xff08;原Facebook#xff09; 开发和维护的 开源JavaScript库#xff0c;主要用于构建用户界面#xff08;User Interface, UI#xff09;。它是前端开发中最流行的工具之一#xff0c;广泛应用于单页应用程序#xff08;SPA原Facebook 开发和维护的 开源JavaScript库主要用于构建用户界面User Interface, UI。它是前端开发中最流行的工具之一广泛应用于单页应用程序SPA和移动端应用开发中。
1. React 核心特点 a. 组件化开发 React 的 UI 是由一个个小的、可复用的组件构成的组件可以像积木一样组合在一起构建出复杂的用户界面。 b. 声明式编程 React 使用声明式的方式描述 UI。开发者只需要定义组件在不同状态下的样子React 会自动更新和渲染界面。 c. 虚拟DOM React 使用虚拟DOMVirtual DOM来提升性能。当状态发生变化时React 会先更新虚拟DOM然后计算出最小的变更再将变更应用到真实DOM中。 d. 单向数据流 数据在React中是单向流动的从父组件流向子组件这使得数据管理更加清晰和可靠。 e. JSX语法 React 提供了一种类似HTML的语法扩展——JSX允许开发者在JavaScript中直接编写HTML结构。 2. React 的生态系统 a. React Router用于处理路由。 b. Redux 或 Context API用于状态管理。 c. Next.js基于 React 的服务端渲染SSR框架。 d. React Native用于开发跨平台的移动端应用。 3. React 的优点 a. 高效通过虚拟DOM优化性能。 b. 灵活支持与其他库或框架结合使用。 c. 可维护性高组件化开发使代码结构清晰、易于维护。 d. 社区强大丰富的社区资源和第三方库支持。 二、开发环境
1. Node.js 和 npm
下载并安装 Node.js包含 npm。验证安装是否成功 node -v
npm -v2. 代码编辑器 推荐使用 Visual Studio Code。 二、创建 React 项目
最简单的方式是使用官方工具 Create React App。
1. 创建步骤
打开终端或命令行工具进入你想创建项目的目录运行以下命令
npx create-react-app my-app 等待安装完成后进入项目目录
cd my-app启动开发服务器
npm start
浏览器会自动打开 http://localhost:3000显示 React 的默认页面 2. 文件结构说明 my-app/
├── node_modules/ # 项目依赖目录
├── public/ # 静态资源目录
│ ├── favicon.ico # 浏览器标签图标
│ ├── index.html # 主 HTML 文件React 挂载到此文件
│ ├── logo192.png # 默认 logo 图片 (192x192)
│ ├── logo512.png # 默认 logo 图片 (512x512)
│ ├── manifest.json # PWA 配置文件
│ └── robots.txt # 搜索引擎爬虫配置
├── src/ # 源代码目录
│ ├── App.css # App 组件的样式文件
│ ├── App.js # 主组件文件
│ ├── App.test.js # App 组件的测试文件
│ ├── index.css # 全局样式文件
│ ├── index.js # 应用程序的入口文件
│ ├── logo.svg # 默认 logo 文件 (SVG 格式)
│ ├── reportWebVitals.js # 性能监控文件
│ └── setupTests.js # 测试环境的配置文件
├── .gitignore # Git 忽略规则
├── package-lock.json # 锁定依赖版本的文件
├── package.json # 项目配置文件
└── README.md # 项目说明文档三、创建一个React页面
以下是详细的教程包括如何创建页面组件、路由配置以及页面样式等
创建 React 页面步骤
1. 创建页面组件
React 中的页面通常是一个独立的组件。你可以在 src 目录下新建一个文件夹如 pages用于存放所有页面组件。
在 src 目录下创建一个 pages 文件夹。在 pages 文件夹中创建一个新的页面组件文件例如 MyPage.js。
示例代码
import React from react;
import ./MyPage.css; // 引入样式文件可选const MyPage () {return (div classNamemy-pageh1欢迎来到我的页面/h1p这是一个属于自己的页面/p/div);
};export default MyPage;2. 创建样式文件
为页面组件添加样式文件让页面更美观。
在 pages 文件夹中创建一个样式文件例如 MyPage.css。
示例代码
.my-page {text-align: center;background-color: #f0f8ff;padding: 20px;color: #333;
}.my-page h1 {font-size: 2rem;color: #007bff;
}.my-page p {font-size: 1.2rem;margin-top: 10px;
}3.设置路由
在 React 中路由是由 react-router-dom 提供的。你需要安装路由库并配置路由规则。
确保安装了 react-router-dom npm install react-router-dom在 src 目录下的 App.js 中配置路由.
示例代码
import React from react;
import { BrowserRouter as Router, Routes, Route } from react-router-dom;
import MyPage from ./pages/MyPage; // 引入新页面
import Home from ./Home; // 假设有一个主页组件const App () {return (RouterRoutesRoute path/ element{Home /} / {/* 主页 */}Route path/my-page element{MyPage /} / {/* 新页面 */}/Routes/Router);
};export default App;4. 启动项目并访问页面
启动开发服务器
npm start
在浏览器中访问新页面 主页http://localhost:3000/ 新页面http://localhost:3000/my-page 5. 可选功能
为了更方便地切换页面可以添加一个导航栏
代码示例添加导航栏在src下创建 Navbar.js
import React from react;
import { Link } from react-router-dom;const Navbar () {return (nav style{{ padding: 10px, backgroundColor: #007bff, color: #fff }}Link to/ style{{ margin: 0 10px, color: #fff, textDecoration: none }}主页/LinkLink to/my-page style{{ margin: 0 10px, color: #fff, textDecoration: none }}我的页面/Link/nav);
};export default Navbar;修改 App.js
将导航栏添加到页面中
import React from react;
import { BrowserRouter as Router, Routes, Route } from react-router-dom;
import Navbar from ./Navbar; // 导航栏组件
import MyPage from ./pages/MyPage;
import Home from ./Home;const App () {return (RouterNavbar / {/* 导航栏 */}RoutesRoute path/ element{Home /} /Route path/my-page element{MyPage /} //Routes/Router);
};export default App;代码结构
src/
├── pages/
│ ├── MyPage.js # 新页面组件
│ └── MyPage.css # 新页面样式
├── App.js # 路由配置
├── Navbar.js # 导航栏组件
├── Home.js # 主页组件示例
└── index.js # 应用入口
6. 打开页面 至此可以成功创建属于自己的React页面。
