【react】配置React 的开发环境

安装之前要确认你的机器上安装了 node.js 环境包括 npm。如果没有安装,可以到 node.js 的官网下载自己电脑的对应的安装包来安装好环境。Node.js 安装配置菜鸟教程   node自带npm

第一种方法(create-react-app)

安装好环境以后,只需要按照官网的指引安装 create-react-app 即可。

  1. npm install -g create-react-app

这条命令会往我们的机器上安装一条叫 create-react-app 的命令,安装好以后就可以直接使用它来构建一个 react 的前端工程:

 
  1. create-react-app hello-react

这条命令会帮我们构建一个叫 hello-react 的工程,并且会自动地帮助我们安装所需要的依赖,现在只需要安静地等待它安装完。

额外的小贴士:

如果有些同学安装过程比较慢,那是很有可能是因为 npm 下载的时候是从国外的源下载的缘故。所以可以把 npm 的源改成国内的 taobao 的源,这样会加速下载过程。在执行上面的命令之前可以先修改一下 npm 的源:

npm config set registry https://registry.npm.taobao.org

下载完以后我们就可以启动工程了,进入工程目录然后通过 npm 启动工程:

 
  1. cd hello-react
  2. npm start

终端提示成功:

React.js 安装教程图片

并且会自动打开浏览器,就可以看到 React 的工程顺利运行的效果:

React.js 安装教程图片

这时候我们把 src/App.js 文件中的 <h2> 标签的内容修改为 Hello React

 
  1. <h2>Hello React</h2>

保存一下,然后户就会发现浏览器自动刷新,并且我们的修改也生效了:

React.js 安装教程图片

到这里我们的环境已经安装好了

第二种方法,VSCode中直接新建项目:

第一步:打开VScode,ctrl+shift+` 进入终端,npx create-react-app 【新项目名称】

第二步:运行项目 npm run start

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Mellel 5 for mac(文字处理软件)

Mellel 5 for mac一款非常好用的文字处理软件&#xff0c;Mellel 5版包括所有经典的文本编辑工具&#xff0c;强大&#xff0c;灵活和可靠&#xff0c;它将帮助您撰写书籍&#xff0c;学术论文或博士学位论文&#xff0c;从概述想法到完成手稿。 Mellel 5 for mac安装教程 在本…

bliss android x86,Bliss OS现在可让您基于Android-x86和AOSP在PC上运行Android 10

Bliss OS是一个基于Android-x86项目的开源操作系统&#xff0c;有望让您在任何Linux&#xff0c;Windows或Chromebook PC或平板电脑设备上运行最新的Android 10移动操作系统。 Bliss OS基于AOSP(Android开放源代码项目)和Android-x86项目&#xff0c;提供了许多自定义和主题选项…

nginx跨域步骤详情

此文章只实现在本地开发环境下的应用nginx跨域 1.下载nginx稳定版本 下载地址&#xff1a;nginx: download 2. 配置nginx文件下的nginx.conf 3. 打包 我用的react &#xff0c;打包命令是&#xff1a;npm run bulid , 把打包后的dist文件下的内容复制到下面的文件地址 4…

index.html trend.html

1.jq22模板下载&#xff1a;http://www.jq22.com/jquery-info22538 2.layUI下载&#xff08;layUI-v2.5.5&#xff09;&#xff1a;https://www.layui.com/ 3.jquery下载&#xff08;Development 3.4.1&#xff09;&#xff1a;https://jquery.com/download/ 【网页直接打开文件…

Starlink星链计划能与5G抗衡?看一下马斯克吹过的牛

文章目录 一、Starlink星链计划是什么&#xff1f;1. 卫星发射情况2. 性能测试 二、5G 通信性能1. 通信速度2.通信时延3. 速度快的主要原因4. 系统容量 三、Starlink 与 5G 的对比1. 覆盖范围2. 通信速度 四、Starlink 的优势1. 局部地区的网络服务2. 军事服务3. 未来远景 一、…

docker基础使用

docker下载centos镜像(用作配置jdk环境系统) docker pull centos #版本号可以自己加,默认拉取最新的 docker命令 docker search xxxx 搜索xxxx镜像 docker pull xxxx 下载xxxx镜像&#xff0c;版本号…

Keras--基于VGG16卷积神经网络---猫狗分类

Cats vs. Dogs&#xff08;猫狗大战&#xff09;来源于 Kaggle 上的一个竞赛&#xff0c;内容非常简单&#xff0c; Kaggle 提供了一个猫和狗的数据集&#xff0c;我们需要建立一个算法进行训练&#xff0c;最后这个算法要能准确识别出猫和狗。Kaggle 提供的数据集分为训练集…

软件欺诈的骗局揭露:“替罪羊”究竟是如何构建的?

创建一个能工作的软件产品是很困难的&#xff0c;卖欺诈性的软件产品要容易得多。 声明&#xff1a;本文已获作者Matt Stancliff翻译授权。 作者 | Matt Stancliff 译者 | 苏本如&#xff0c;责编 | 郭芮 头图 | CSDN 下载自东方 IC 出品 | CSDN&#xff08;ID&#xff1a;CSDN…

什么?我要对AI礼貌?人机交互面临的道德漏洞

作者 | 库珀 来源 | 数据实战派 头图 | 付费下载于 IC Photo 如果你在一条道路上行驶&#xff0c;突然前面拐弯处出现一辆无人驾驶汽车&#xff0c;你会继续坚持你的道路优先权&#xff0c;还是让位使它先过去&#xff1f; 目前&#xff0c;我们大多数人在涉及其他人的情况下能…

Docker安装 elasticsearch-head

目录 前言安装elasticsearch-head步骤1&#xff1a;准备1. 安装docker2. 搜索可以使用的镜像。3. 也可从docker hub上搜索镜像。4. 选择合适的redis镜像。 步骤2&#xff1a;拉取elasticsearch-head镜像拉取镜像查看已拉取的镜像 步骤3&#xff1a;创建容器创建容器方式1&#…

猿创征文|瑞吉外卖——管理端_菜品管理_1

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 专栏&#xff1a;瑞吉外卖 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;真正的程序员不看参考手册&#xff0c;新手和胆小鬼才会看。 本项目基于B站黑马程序员Jav…

【CSS】CSS 布局——常规流布局

<h1>基础文档流</h1><p>我是一个基本的块级元素。我的相邻块级元素在我的下方另起一行。</p><p>默认情况下&#xff0c;我们会占据父元素 100%的宽度&#xff0c;并且我们的高度与我们的子元素内容一样高。我们的总宽度和高度是我们的内容 内边距…

SpringBoot整合、SpringBoot与异步任务

目录 一、背景描述二、简单使用方法三、原理五、使用自定义线程池六、Async失效情况 一、背景描述 java 的代码是同步顺序执行&#xff0c;当我们需要执行异步操作时我们通常会去创建一个新线程去执行。比如new Thread()。start()&#xff0c;或者使用线程池线程池 new Thread…

stm工程文件夹

STM32工程文件构成 从下图可以看出我们的工程目录是由CORE、OBJ、STM32F10x_FWLib、USER、SYSTEM以及HARDWARE文件夹组成的。此外还有一个文本文档README.TXT、以及一个Windows 批处理文件 (.bat)keilkilll.bat。 1、CORE文件夹 CORE文件夹下一共有三个文件&#xff0c;它们分…

STL文件及其读取

1引言 STL(Stereo lithographic)文件格式是美国3D SYSTEMS公司提出的三维实体造型系统的一个接口标准&#xff0c;其接口格式规范。采用三角形面片离散地近似表示三维模型&#xff0c;目前已被工业界认为是快速成形(rapid prototypi ng)领域的标准描述文件格式。在逆向工程、有…

Python-OpenCV中的图像处理-直方图

Python-OpenCV中的图像处理-直方图 直方图统计直方图绘制直方图Matplotlib绘制灰度直方图Matplotlib绘制RGB直方图 使用掩膜统计直方图直方图均衡化Numpy图像直方图均衡化OpenCV中的直方图均衡化CLAHE 有限对比适应性直方图均衡化 2D直方图OpenCV中的2D直方图Numpy中2D直方图 直…

基于frida检测demo来学习frida检测及anti

原文地址:https://www.zhuoyue360.com/crack/108.html 前言 随着逆向的攻防强度不断的提升,目前主流的移动安全厂商的加固服务基本上都已包含了常见Hook框架的反调试,我们最常见的hook工具如下: fridaxposed 为了更好的提升自己相关的经验,我们可以拿这类demo来进行原理的学…

腾讯云轻量应用服务器镜像应用模板清单大全

腾讯云轻量应用服务器支持多种应用模板镜像&#xff0c;Windows和Linux镜像模板都有&#xff0c;如&#xff1a;宝塔Linux面板腾讯云专享版、WordPress、WooCommerce、LAMP、Node.js、Docker CE、K3s、宝塔Windows面板和ASP.NET等应用模板镜像&#xff0c;腾讯云服务器网分享腾…

聊一下互联网开源变现

(点击即可收听) 互联网开源变现其实是指通过开源软件或者开放源代码的方式&#xff0c;实现收益或盈利。这种方式越来越被广泛应用于互联网行业 在互联网开源变现的模式中&#xff0c;最常见的方式是通过捐款、广告、付费支持或者授权等方式获利。 例如&#xff0c;有些开源软件…

Linux 基础(五)常用命令-文件属性

文件属性 文件权限文件属性修改文件权限属性 文件所有者 文件权限 文件属性 Linux中文件权限 可以通过文件属性体现&#xff1b; 使用 ll 查看文件列表 最前面的 l d 表示文件类型 1 5 表示硬链接数 或者 子文件夹个数 所属用户 所属用户组 文件大小 创建/更新时间 文件&…