通过 CLI 和引入的方式使用 React:基础入门

使用React 有两种使用方式,主要有以下几个原因:

  1. 灵活性和适应性:

    • 引入的方式可以让开发者在现有的 HTML 页面中快速引入 React,无需设置完整的项目环境。这适合小型或原型项目。

    • CLI 方式则更适合用于构建大型复杂的 React 应用程序,因为它提供了更完整的项目结构和构建工具支持。

  2. 学习曲线:

    • 引入的方式相对简单,更容易上手。这对于 React 初学者来说是个不错的起点。

    • CLI 方式需要一些额外的工具和配置,但提供了更强大的功能和灵活性。对于有一定基础的开发者来说更适合。

  3. 社区支持:

    • 引入的方式是 React 发展初期就有的使用方式,得到了广泛的社区支持和大量相关教程。

    • CLI 方式由 Facebook 官方推出的 create-react-app 工具,也得到了项目社区的广泛使用和支持。

  4. 项目需求:

    • 小型项目可能更适合引入的方式,因为设置成本更低。

    • 大型企业级项目则更适合使用 CLI 方式,因为它提供了更好的项目结构和构建工具支持。

总的来说,两种使用方式各有优缺点,适用于不同类型的项目和不同阶段的开发者。理解这两种方式的适用场景有助于开发者选择最合适的 React 入门方式。

一、直接引入

  1. 首先需要在 HTML 文件中引入 React 和 ReactDOM 的 JavaScript 库:
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>My React App</title><script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><div id="root"></div><script type="text/babel">// 在这里编写你的 React 代码</script></body>
</html>
  1. <script> 标签中编写你的 React 代码。可以使用 JSX 语法,但需要将 type 属性设置为 "text/babel",以便 Babel 能够转译 JSX 代码。

  2. <div id="root"></div> 中渲染 React 组件:

ReactDOM.render(<MyComponent />, document.getElementById('root'));
  1. 创建你的 React 组件:
function MyComponent() {return (<div><h1>Hello, React!</h1><p>This is a simple React component.</p></div>);
}

通过这种引入的方式使用 React,你可以快速地创建一个简单的 React 应用程序。不过对于更复杂的项目,通常会使用 create-react-app 或 Webpack 等工具来设置项目环境,这样可以更好地管理依赖和构建过程。

二、通过命令行界面(CLI)

通过命令行界面(CLI)使用 React 的基本步骤如下:

  1. 安装 Node.js: 首先确保你的电脑上已经安装了最新版本的 Node.js。你可以从官网 (https://nodejs.org/) 下载并安装。

  2. 安装 create-react-app: 打开终端或命令提示符,运行以下命令全局安装 create-react-app 工具:

    npm install -g create-react-app
    
  3. 创建 React 项目: 在终端中运行以下命令,创建一个新的 React 项目:

    create-react-app my-app
    

    这将创建一个名为 my-app 的新 React 项目目录。

  4. 启动开发服务器: 进入新创建的项目目录,并运行以下命令启动开发服务器:

    cd my-app
    npm start
    

    这将启动开发服务器,并在默认浏览器中打开 React 应用程序。

  5. 探索项目结构: create-react-app 生成的项目结构如下:

    • src/: 包含应用程序的源代码文件。
    • public/: 包含 HTML 模板文件和其他静态资源。
    • node_modules/: 包含项目依赖的 Node.js 模块。
    • package.json: 定义了项目的依赖关系和其他配置。
  6. 编写 React 代码: 在 src/ 目录下,你可以编写 React 组件、样式表和其他相关文件。src/App.js 是应用程序的主要组件。

  7. 构建和部署: 当你准备好部署应用程序时,可以运行以下命令生成生产环境构建:

    npm run build
    

    这将在 build/ 目录下生成优化后的静态文件,你可以将这些文件部署到 Web 服务器上。

通过使用 create-react-app 工具,你可以快速搭建一个新的 React 项目,并专注于编写应用程序代码,而不需要担心配置构建工具和开发环境。这是最简单和最流行的开始使用 React 的方式之一。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/807757.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索 ChatGPT:解读 AI 对话的魔力(文末推荐一款AI工具聚合平台,可免费体验)

&#x1f947;作者简介&#xff1a;CSDN内容合伙人、新星计划第三季Python赛道Top1 &#x1f525;个人主页&#xff1a;hacker707的csdn博客 &#x1f4ac;推荐一款AI工具聚合平台&#x1f449;Hulu AI 探索 ChatGPT&#xff1a;解读 AI 对话的魔力 ChatGPT 的魅力如何使用 C…

JVM修炼之路【10】- 垃圾回收器和垃圾回收算法

垃圾回收算法 我们先简要看一下 四种主要的垃圾回收算法 看到这不禁感慨一下 人家1960年 都搞出GC算法了 太强了 评价标准 既然有这么多算法 那就跟各个牌子的游戏本一样 有个比较&#xff0c;这里我们重点介绍一下 垃圾回收算法的评价标准 这几个标准非常重要是 是后面理解很…

springCloudAlibaba集成sentinel实战(超详细)

一、Sentinel介绍 1. 什么是Sentinel Sentinel是阿里开源的项目&#xff0c;提供了流量控制、熔断降级、系统负载保护等多个维度来保障服务之间的稳定性。 分布式系统的流量防卫兵&#xff1a; 随着微服务的普及&#xff0c;服务调用的稳定性变得越来越重要。Sentinel以“流…

你知道 Java 线程池的原理吗?

Java线程池是用于管理和复用线程的机制&#xff0c;它可以帮助开发者有效地管理线程的生命周期和资源&#xff0c;并提高应用程序的性能和稳定性。 1. 线程池概述 在计算机科学中&#xff0c;线程池是一种可用来执行异步任务的线程队列。它主要包含以下几个组成部分&#xff…

python连接mysql数据库并将dataframe的数据插入表中

代码中连接的sql表为"20230411_hangzhuanlie"&#xff0c;表结构如下&#xff1a; 代码如下&#xff08;按需修改用户名、库名等即可&#xff09;&#xff1a; import pymysql import pandas as pd from sqlalchemy import create_enginehost 127.0.0.1:3306/ user_…

科研学习|论文解读——基于旅游知识图谱的游客偏好挖掘和决策支持(IPM,2023)

原文题目 Mining tourist preferences and decision support via tourism-oriented knowledge graph 摘要 目前,旅游管理研究的重点是通过对异构用户生成的内容进行广泛分析,来理解旅游偏好的波动,制定有针对性的发展策略。然而,鉴于在线景点评论涉及过多的混合和无形维度…

【51单片机入门记录】IIC总线协议 EEPROM存储器AT24C02应用

目录 一、AT24C20相关函数操作流程 &#xff08;0&#xff09;根据第十五届蓝桥杯初始iic.c进行的初步修改&#xff08;便于编写后续函数&#xff09; &#xff08;1&#xff09;AT24C20存数据操作流程及代码 &#xff08;2&#xff09;AT24C02读数据操作流程及代码 &#…

一、OpenMIPS指令集CPU的ori指令的实现

前言 根据“自己动手写CPU”这本书学习&#xff0c;自己动手实现一个MIPS指令集的CPU。 本文章实现了一个ori指令即“或”操作的五级流水线&#xff0c;后续会持续添加其他指令完善此CPU。 文章作为学习笔记持续更新&#xff0c;源代码也在github上持续更新 项目源码https://…

MySQL 行锁和表锁是什么?区别,作用等学习总结

一、所谓‘锁’ 是什么 个人理解&#xff0c;所谓的锁就是为了保证数据库数据操作的一致性而产生的一种机制&#xff0c;即我们可能有很多数据&#xff0c;但是当我们有多个人或者多个线程或会话对同一条数据或同一批数据执行操作时&#xff0c;可能大家都要修改这一部分数据&…

头歌-机器学习 第1次实验 Python机器学习软件包Scikit-Learn的学习与运用

第1关&#xff1a;使用scikit-learn导入数据集 scikit-learn包括一些标准数据集&#xff0c;不需要从外部下载&#xff0c;可直接导入使用&#xff0c;比如与分类问题相关的Iris数据集和digits手写图像数据集&#xff0c;与回归问题相关的波士顿房价数据集。 以下列举一些简单…

JAVA面试八股文之数据库

MySQL面试题 MySQL 存储引擎架构了解吗&#xff1f;CHAR 和 VARCHAR 的区别是什么&#xff1f;索引是越多越好嘛&#xff1f;MySQL数据库中空值&#xff08;null&#xff09;和空字符串&#xff08;&#xff09;的区别&#xff1f;SQL 中 on 条件与 where 条件的区别&#xff1…

mySql数据库学习003-多表查询

多表查询 创建数据表&#xff1a;班级表与学生表 create table if not exists class(id tinyint unsigned primary key auto_increment,name varchar(20) not null,description varchar(255),createAt timestamp default current_timestamp,updateAt timestamp default curre…

面试算法-171-翻转二叉树

题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 解 class Solution {public TreeNode invertTree(TreeNode root) {if (root n…

Leetcode【双指针法】

目录 一、left right在一个循环里 二、两个指针在各自的循环里 三、slow fast追逐型 四、slow fast条件型 双指针法常用与题型&#xff1a;数组、字符串、链表、N数之和 一、left right在一个循环里 left right在一个循环里。 left和right移动需要条件&#xff0c;一般是向…

腾讯云4核8G服务器多少钱?4核8G能干啥?

腾讯云4核8G服务器多少钱&#xff1f;腾讯云4核8G轻量应用服务器12M带宽租用价格646元15个月&#xff0c;活动页面 txybk.com/go/txy 活动链接打开如下图所示&#xff1a; 腾讯云4核8G服务器优惠价格 这台4核8G服务器是轻量应用服务器&#xff0c;详细配置为&#xff1a;轻量4核…

【2024年5月备考新增】冲刺(1)《第四版教材十五矩阵》

所谓十五矩阵,就是十大管理,五大过程组 【高项】信息系统项目管理师教程(第4版)十五矩阵知识领域项目管理过程组启动过程组规划过程组执行过程组监控过程组收尾过程组项目整合管理制定项目章程制订项目管理计划指导与管理项目工作监控项目工作结束项目或阶段管理项目知识实…

前端代码优化--computed

随便记录一下 主要是通过计算属性来简化和优化代码。在 Vue 中&#xff0c;计算属性是一种方便的工具&#xff0c;可以让你根据依赖状态的变化来动态计算衍生值。在这个例子中&#xff0c;我们使用计算属性 formattedCommunicationType 来根据 workDetail.realTimeItemDeviceDT…

node.js常用命令大全

命令用法nodenode [文件名]&#xff1a;运行指定的 Node.js 脚本文件&#xff1b; node --version&#xff1a;显示当前安装的 Node.js 版本号&#xff1b; node -h 或 node --help&#xff1a;显示 Node.js 的帮助信息。npmnpm install [模块名]&#xff1a;安装指定的 Node.j…

Scala之函数Day-2

Scala 函数(Function) 概述 将一段逻辑进行封装便于进行重复使用&#xff0c;被封装的这段逻辑就是函数。在Scala中&#xff0c;必须通过def来定义函数 基本语法 def 函数名(参数列表) : 返回值类型 {函数体return 返回值 }案例 // 案例&#xff1a;定义函数计算两个整数的…

openlayer实现webgis端绘制制图及编辑

在WebGIS端制图是指通过Web浏览器界面实现地理信息数据的可视化、编辑、分析以及地图产品的制作。这一过程通常涉及以下几个关键环节&#xff1a; **1. 前端技术栈&#xff1a; •HTML/CSS/JavaScript&#xff1a;作为Web开发的基础&#xff0c;用于构建用户界面布局、样式设…