服务器上面安装nodejs react

1、nvm管理nodejs
2、修改端口
/node_modules/react-scripts/scripts/start.js

// 这是start.js部分源码
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';// 将3000修改自己需要的端口号
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9527;
const HOST = process.env.HOST || '0.0.0.0';

3、
下面是一个简单的步骤来开始使用 React:

  1. 确保你的计算机上已安装 Node.js。你可以在命令行中输入 node -v 来检查是否已安装。

  2. 打开命令行工具,并进入你想要创建项目的目录。

  3. 运行以下命令来创建一个新的 React 项目:

    npx create-react-app my-app
    

    这将使用 Create React App 工具来快速生成一个基本的 React 项目结构。

  4. 进入新创建的项目目录:

    cd my-app
    
  5. 启动开发服务器:

    npm start
    

    这将启动一个本地开发服务器,并在默认浏览器中打开项目。

现在你已经成功创建了一个 React 项目,可以开始编写代码了。你可以在 src 目录中找到 App.js 文件,这是应用程序的主要组件。你可以编辑该文件并查看实时更新的效果。

React 的核心概念之一是组件。一个组件是一个独立的、可重用的代码块,用于构建用户界面。你可以创建自己的组件,并在需要的地方使用它们。

例如,你可以创建一个简单的 Hello 组件,在 src 目录下创建一个新文件 Hello.js,并添加以下代码:

import React from 'react';function Hello() {return <h1>Hello, React!</h1>;
}export default Hello;

然后,在 App.js 中使用这个组件:

import React from 'react';
import Hello from './Hello';function App() {return (<div><Hello /></div>);
}export default App;

保存文件后,你将在浏览器中看到更新后的界面,显示 “Hello, React!”。

note

1 Installing the environment has wasted a lot of my time.

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

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

相关文章

KMP字符串匹配算法

介绍&#xff1a; KMP算法是一种改进的字符串匹配算法&#xff0c;由D.E.Knuth&#xff0c;J.H.Morris和V.R.Pratt提出的&#xff0c;因此人们称它为克努特—莫里斯—普拉特操作&#xff08;简称KMP算法&#xff09;。KMP算法的核心是利用匹配失败后的信息&#xff0c;尽量减少…

绘制太极图 - 使用 PyQt

大家好&#xff01;今天我们将一起来探讨一下如何使用PyQt&#xff0c;这是一个强大的Python库&#xff0c;来绘制一个传统的太极图。这个图案代表着古老的阴阳哲学&#xff0c;而我们的代码将以大白话的方式向你揭示它的奥秘。 PyQt&#xff1a;是什么鬼&#xff1f; 首先&a…

C# 中的接口

简介 官方说明&#xff1a;接口定义协定。 实现该协定的任何 class 或 struct 必须提供接口中定义的成员的实现。 接口可为成员定义默认实现。 它还可以定义 static 成员&#xff0c;以便提供常见功能的单个实现。 从 C# 11 开始&#xff0c;接口可以定义 static abstract 或 …

【AI-Pos系列】DeepLabCut 学习

level: nature neuroscience author:Alexander Mathis  1,2, Pranav Mamidanna1 , Kevin M. Cury3 , Taiga Abe3 , Venkatesh N. Murthy  2 , Mackenzie Weygandt Mathis  1,4,8* and Matthias Bethge1,5,6,7,8 date: 2018 keyword: quantifying behavior; pose estimation;…

超级胶水(第十一届蓝桥杯)

题目 小明有 n n n颗石子&#xff0c;按顺序摆成一排。他准备用胶水将这些石子粘在一起。 每颗石子有自己的重量&#xff0c;如果将两颗石子粘在一起&#xff0c;将合并成一颗新的石子&#xff0c;重量是这两颗石子的重量之和。 为了保证石子粘贴牢固&#xff0c;粘贴两颗石…

架构师之路(十六)计算机网络(传输层)

前置知识&#xff08;了解&#xff09;&#xff1a;计算机基础。 作为架构师&#xff0c;我们所设计的系统很少为单机系统&#xff0c;因此有必要了解计算机和计算机之间是怎么联系的。局域网的集群和混合云的网络有啥区别。系统交互的时候网络会存在什么瓶颈。 既然网络层已经…

.net访问oracle数据库性能问题

问题&#xff1a; 生产环境相同的inser语句在别的非.NET程序相应明显快于.NET程序&#xff0c;执行时间相差比较大&#xff0c;影响正常业务运行&#xff0c;测试环境反而正常。 问题详细诊断过程 问题初步判断诊断过程&#xff1a; 查询插入慢的sql_id 检查对应的执行计划…

直播间流程解析基础

通过用户心理需求引导用户行为 贯穿内容和产品牵引想要和需要 直播间内流程解析 分为播前准备、开播暖场、产品介绍、穿插活动、结尾预告 &#xff08;1&#xff09;直播间内流程解析----播前准备 &#xff08;2&#xff09;直播间内流程解析----开播暖场 &#xff08;3&…

互联网加竞赛 基于机器视觉的银行卡识别系统 - opencv python

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的银行卡识别算法设计 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng…

电涌保护器(SPD)、后备保护器(SCB)、断路器(CB)的区别与应用

随着现代电力系统的不断发展&#xff0c;电力设备的保护显得愈发重要。其中&#xff0c;电涌保护器&#xff08;SPD&#xff09;、后备保护器&#xff08;SCB&#xff09;和断路器&#xff08;CB&#xff09;是三种常见的保护设备&#xff0c;但它们各自具有不同的功能和特点。…

【渗透测试】借助PDF进行XSS漏洞攻击

简介 在平时工作渗透测试一个系统时&#xff0c;常常会遇到文件上传功能点&#xff0c;其中大部分会有白名单或者黑名单机制&#xff0c;很难一句话木马上传成功&#xff0c;而PDF则是被忽略的一个点&#xff0c;可以让测试报告更丰富一些。 含有XSS的PDF制作步骤 1. 编辑器…

论文阅读《thanking frequency fordeepfake detection》

项目链接&#xff1a;https://github.com/yyk-wew/F3Net 这篇论文从频域的角度出发&#xff0c;提出了频域感知模型用于deepfake检测的模型 整体架构图&#xff1a; 1.FAD&#xff1a; 频域感知分解&#xff0c;其实就是利用DCT变换&#xff0c;将空间域转换为频域&#xff…

element+vue 之 v-limit 按钮操作权限

1.新建一个permission.js文件 import store from /storeexport default {inserted: function (el, binding) {const { perms: limits } store.state.userconst { value: params } bindingif (!limits.length) returnif (params && Array.isArray(params)) {if (!limi…

如何利用PyTorch?

上一篇文章介绍了“What is PyTorch?”,本篇文章探讨一下“How to use PyTorch&#xff1f;” 1、PyTorch PyTorch 是一个开源机器学习库&#xff0c;基于 Torch 库开发&#xff0c;主要由 Facebook 的人工智能研究实验室&#xff08;FAIR&#xff09;研发。它是一个强大且灵…

【备忘】thinkphp5.1之websocket长连接框架使用流程简述

前言 本文纯属经验备注&#xff0c;有许多地方未进行测试&#xff0c;请勿照搬&#xff0c;仅供参考。 之前专门花了几天时间测试了websocket&#xff0c;当时只记得踩了许多坑&#xff0c;但是没有对测试流程进行记录&#xff0c;导致长时间未使用从而无从下手。 今天就简单…

08.Elasticsearch应用(八)

Elasticsearch应用&#xff08;八&#xff09; 1.为什么需要相关性算分 我们在文档搜索的时候&#xff0c;匹配程度越高的相关性算分越高&#xff0c;算分越高的越靠前&#xff0c;但是有时候我们不需要算分越高越靠前我们可能需要手动影响算分来控制顺序比如广告&#xff08…

2016年认证杯SPSSPRO杯数学建模A题(第一阶段)洗衣机全过程文档及程序

2016年认证杯SPSSPRO杯数学建模 A题 洗衣机 原题再现&#xff1a; 洗衣机是普及率极高的家用电器&#xff0c;它给人们的生活带来了很大的方便。家用洗衣机从工作方式来看&#xff0c;有波轮式、滚筒式、搅拌式等若干种类。在此基础上&#xff0c;各厂商也推出了多种具体方案…

微信小程序(十五)自定义导航栏

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.组件文件夹创建方法 2.自定义组件的配置方法 3.外部修改组件样式&#xff08;关闭样式隔离或传参&#xff09; 创建组件文件夹 如果是手动创建建议注意在json文件声明&#xff1a; mynav.json {//声明为组件可…

从CDN了解到的边缘计算与前端渲染

文章概叙 本文代码量较少&#xff0c;讲的是在云开发的基础上使用边缘计算的&#xff0c;代码量不高&#xff0c;​建议看完理解下就可以丢了&#xff0c;知道个概念就好。 废话1 第一次接触边缘计算是在2020年的时候&#xff0c;公司的cloud课程中&#xff0c;有一些相关概…

2024年第四届机器人与人工智能国际会议(JCRAI 2024) | Ei、Scopus双检索

会议简介 Brief Introduction 2024年第四届机器人与人工智能国际会议(JCRAI 2024) 会议时间&#xff1a;2024年8月9日-11日 召开地点&#xff1a;中国上海 大会官网&#xff1a;www.jcrai.org 人工智能和机器人技术在过去几十年里得到了长足的发展&#xff0c;为未来的机器人应…