likes
comments
collection
share

前端开发框架 React入门

作者站长头像
站长
· 阅读数 62

React

安装项目脚手架

执行下列命令行进行安装：

npm i -g create-react-app

查看路径

安装的路径可以通过执行下列命令行进行查看：

npm config ls

前端开发框架 React入门

我们到此路径下去查看： 前端开发框架 React入门

已经部署好了

新建项目

安装完成后，我们可以使用以下命令来创建一个新的React项目：

create-react-app my-react

目录结构：

前端开发框架 React入门

Vue & React --流行的前端框架

组件开发思想

Vue和React都采用组件化设计，将应用拆分为可复用的独立模块，每个模块负责渲染特定的部分，增强代码的可读性和可维护性。

Vue组件：在Vue中，组件是自包含的单元，可以在单个.vue文件中定义，包括模板、脚本和样式。组件通过<template>标签定义结构，使用<script>标签编写逻辑，以及<style>标签添加样式。

React组件：React组件通常定义在.js或.jsx文件中，通过函数或类的形式返回JSX，这是一种类似于HTML的JavaScript语法，用来描述UI的结构。

返回 JSX 函数就是组件
react 组件由 js 文件+css 组成 import
开发的最小单元
App
<App />像 html 一样的方式挂载

props

props 是一个对象，可以传递数据 父组件传过来的数据 由有状态

MVVM思想

MVVM（Model-View-ViewModel）思想是现代前端框架，如Vue和React（虽然React更倾向于MVC或Unidirectional Data Flow），为了提高开发效率和应用性能而采纳的设计模式之一。它主要解决了传统DOM编程的低效问题，让开发者能更专注于业务逻辑而非底层API细节。

关键点

  1. Model（模型） ：代表数据层，通常包含数据和业务规则。它是应用程序的核心，负责存储数据并提供数据访问和操作的方法。

  2. View（视图） ：负责展示数据，即用户看到的界面。在传统的DOM编程中，视图的更新需要手动操作DOM，这往往导致代码冗余且难以维护。

  3. ViewModel（视图模型） ：充当Model和View之间的桥梁，它负责数据绑定和事件监听，使视图和模型解耦。ViewModel通过观察Model的变化自动更新View，反之亦然，无需直接操作DOM。

优点：

  1. 不再需要 DOM 编程（性能低下）

  • 视图的更新完全由数据模型驱动，减少了对DOM的操作，提高了应用的性能。

  1. 关注业务而不是 API
  • ViewModel隔离了View和Model，使得业务逻辑和视图展示分离，降低了代码的耦合度，便于维护和测试

create-react-app my-react -github 拉去一个标准的项目模板 -src 开发目录 -入口文件

  • 安装项目依赖

运行 Vue & React

创建Vue应用

  1. 创建一个新的Vue应用： 
    vue create my-vue-app
    进入项目目录： 
    cd my-vue-app

运行Vue应用

  1. 启动开发服务器： 
    npm run serve

Vue应用结构

  • public/index.html：Vue应用的首页，Vue也在这里挂载应用。

  • src/main.js：Vue应用的入口文件，Vue实例在这里被创建并挂载到#app元素上。

构建项目

  1. 打包项目用于生产环境： 
    npm run build
    这个命令会生成一个dist目录，包含了用于生产环境的优化过的静态文件。

创建React应用

  1. 使用create-react-app创建一个新的React应用：

    npx create-react-app my-app

    这个命令会生成一个预配置好的React项目。

  2. 进入项目目录：

    cd my-app

运行React应用

  1. 启动开发服务器： 
    npm start
    此命令会启动一个本地Web服务器，默认监听在3000端口，可以通过http://localhost:3000在浏览器中访问应用。 会看到这个界面

前端开发框架 React入门

React应用结构

  • public/index.html：这是应用的首页，React将在此文件中的<div id="root"></div>元素中挂载整个应用。

  • src/index.js：这是React应用的入口文件。在这个文件中，React会接管开发流程，使用ReactDOM.createRoot()方法创建一个根节点，然后调用render()方法，将<App />组件渲染到root元素上。

JSX语法

React应用中使用JSX语法来创建组件，这是一种JavaScript的语法扩展，使得HTML和JavaScript代码可以混合编写，提高了代码的可读性和表现力。

构建项目

  1. 打包项目用于生产环境： 
    npm run build

生成一个build目录，包含了用于生产环境的优化过的静态文件。

转载自:https://juejin.cn/post/7389137198782136372
评论
请登录