react.js在visual code 下的hello World

想学习reacr.js ,就开始做一个hello world。 我的环境是visual code ,所以我找这个环境下的例子。参照: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

 要学习react.js ,还得先安装node.js,我在visual code 下的node.js的hello world-CSDN博客 

这个文章中介绍了怎么安装。

检查是否安装成功就是 node -v 能返回版本信息就好了。

 教程第一个要求是 create-react-app 建立一个服务,命令是:

npx create-react-app myfirst

对于我来说,它不成功,报错。原文中说

Note: If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.

就是说你原来安装过create-react-app ,你就要卸载重新安装,我昨天才装的,我也没有装过,我应该不属于这类。但我总是报这个错,后来我想我也卸载试试,结果uninstall 后果然可以运行了。

下面是我运行过程:

C:\>cd reactjs

C:\reactjs>npx create-react-app myfirst
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\leon\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\leon\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\leon\AppData\Local\npm-cache\_logs\2023-09-27T12_49_11_676Z-debug-0.log

C:\reactjs>npm uninstall -g create-react-app

up to date in 783ms

C:\reactjs>npx create-react-app myfirst
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\reactjs\myfirst.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

...

Success! Created myfirst at C:\reactjs\myfirst
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myfirst
  npm start

Happy hacking!

C:\reactjs>cd myfirst

C:\reactjs\myfirst>npm start

> myfirst@0.1.0 start
> react-scripts start

.....

Compiled successfully!

You can now view myfirst in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Compiling...
Compiled with warnings.

程序运行起来了,界面如下:


 

下面来看看代码:

可以在myfirst 目录里启动code ,当然也可以启动code 后打开这个目录,然后就可以看代码了

代码在src 目录下,主要的是 index.js, app.js,其实你在index.js 里改代码就好了,但这个调用app.js ,代码在app.js 里,红框里改为 <h1> Hello World</h1>

全部代码如下:

import logo from './logo.svg';
import './App.css';function App() {return (<div className="App"><header className="App-header"><h1> Hello World</h1></header></div>);
}export default App;

界面里显示 Hello World

不过也可以直接修改index.js如下:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));reportWebVitals();

 这样也是显示Hello World

很多学习的例子,都是直接在index.js 里修改代码,比较直接。

往后,就执行 npm start 启动这个工程。只是第一次需要 npx create-react-app my-app 建立框架。

启动这工程也不需要visual code ,编辑时才需要。

npm run build  建立一个发布目录。

下面链接介绍怎么发布react.js

How To Deploy a React Application with Nginx on Ubuntu 20.04 | DigitalOcean

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

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

相关文章

github代码提交过程详细介绍

1、下载github上面的代码 &#xff08;1&#xff09;在github网站上&#xff0c;找到想要下载的代码仓库界面&#xff0c;点击Code选项就可以看到仓库的git下载地址&#xff1b; &#xff08;2&#xff09;使用命令下载&#xff1a;git clone 地址&#xff1b; 2、配置本地git…

【通意千问】大模型GitHub开源工程学习笔记(1)

9月25日&#xff0c;阿里云开源通义千问140亿参数模型Qwen-14B及其对话模型Qwen-14B-Chat,免费可商用。 立马就到了GitHub去fork。 GitHub&#xff1a; GitHub - QwenLM/Qwen: The official repo of Qwen (通义千问) chat & pretrained large language model proposed b…

在vue使用wangEditor(简单使用)

wangEditor不同的版本使用方法都不一样&#xff0c;这里以目前最新的参考官网方法使用2023-09-28 首先安装&#xff0c;参考官网&#xff0c;注意editor跟editor-for-vue两个都要装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --saveyarn add wangedit…

【Linux指令集】---git命令的基本使用

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Linux专栏】&#x1f388; 本专栏旨在分享学习Linux的一点学习心得&#xff0c;欢迎大家在评论区讨论&#x1f48c; 演示环境&#xff1…

Event Loop——事件循环

JS 是单线程的&#xff0c;也就是同一个时刻只能做一件事情。 那么思考&#xff1a;为什么浏览器可以同时执行异步任务呢&#xff1f;因为浏览器是多线程的。 当 JS 需要执行异步任务时&#xff0c;浏览器会另外启动一个线程去执行该任务。 也就是说&#xff0c;“JS 是单线程…

Springboot中slf4j日志的简单应用

1、注入依赖&#xff08;pom.xml&#xff09; <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api --> <dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId><version>2.0.9</version> &…

【5G PHY】物理层逻辑和物理天线的映射

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

最新AI创作系统源码ChatGPT源码+附详细搭建部署教程+AI绘画系统+支持国内AI提问模型

一、AI系统介绍 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&am…

数学术语之源——纤维(fiber)

1. 数学术语“纤维”(英英“fibre”,美英“fiber”)在数学中的起源 fiber[ˈfaɪbə(r)]这个词始于14世纪晚期&#xff0c;词义为“肝叶的一瓣(a lobe of the liver)”,也指“内脏(entrails)”。来自中世纪拉丁语“fibre”,其又源自拉丁语“fibra”,词义为“纤维(a fiber)、细…

31.链表练习题(2)(王道2023数据结构2.3.7节16-25题)

【前面使用的所有链表的定义在第29节】 试题16&#xff1a;两个整数序列A&#xff0c;B存在两个单链表中&#xff0c;设计算法判断B是否是A的连续子序列。 bool Pattern(LinkList L1,LinkList L2){ //此函数实现比较L1的子串中是否有L2LNode *p, *q; //工作在L1,p记录L1子串…

springcloud之自我介绍

写在前面 在这篇文章 中我们分析了单体应用的问题&#xff0c;以及用来解决这些问题的解决的方案微服务&#xff0c;并接着看了微服务需要考虑的各种&#xff0c;如服务调用&#xff0c;负载均衡&#xff0c;服务治理&#xff0c;链路追踪&#xff0c;分布式事务&#xff0c;等…

【IDEA】使用idea调试时查看对象集合的值

1、在实体类上添加toString方法 2、在要查看集合的地方右键View as→toString 3、View Text复制对象集合的值 4、复制map集合的值同理

《动手学深度学习 Pytorch版》 7.6 残差网络(ResNet)

import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2l7.6.1 函数类 如果把模型看作一个函数&#xff0c;我们设计的更强大的模型则可以看作范围更大的函数。为了使函数能逐渐靠拢到最优解&#xff0c;应尽量使函数嵌套&…

Qt 画自定义饼图统计的例子

先给出结果图&#xff0c;这个例子是将各种事件分类然后统计的其比例&#xff0c;然后画饼图显示出来 这个是我仿照官方给的例子&#xff0c;让后自己理解后&#xff0c;修改的&#xff0c;要生成饼图&#xff0c;需要QT的 charts 支持&#xff0c;安装QT 没有选择这个的&#…

【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图

特性&#xff1a; 支持自定义瓦片图尺寸支持显示预览最小尺寸100x100像素大小&#xff0c;切换为实际切割尺寸支持获取切割后的文件Files数组 sgUploadTileImage源码 <template><div :class"$options.name"><div class"sg-ctrl"><di…

并查集专题

一、并查集的定义 二、基本操作 1、初始化 一开始,每个元素都是独立的集合 #include<iostream>using namespace std;const int maxN=1000; int father[maxN];int</

商场做小程序商城的作用是什么?

商场是众多商家聚集在一起的购物公共场所&#xff0c;大商场也往往入驻着众多行业商家&#xff0c;是每个城市重要的组成部分。 随着互联网电商深入及客户消费行为改变&#xff0c;不少商场如今的客流量非常有限&#xff0c;甚至可以说是员工比客人多&#xff0c;这就导致撤店…

力扣:113. 路径总和 II(Python3)

题目&#xff1a; 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;力扣&#xff08;…

项目集成七牛云存储sdk

以PHP为例 第一步&#xff1a;下载sdk PHP SDK_SDK 下载_对象存储 - 七牛开发者中心 sdk下载成功之后&#xff0c;将sdk放入项目中&#xff0c;目录选择以自己项目实际情况而定。 注意&#xff1a;在examples目录中有各种上传文件的参考示例&#xff0c;这里我们主要参考的是…

高速,低延,任意频丨庚顿新一代实时数据库鼎力支撑电力装备服务数字化

产品同质化日趋严重以及市场需求不断迭代等内外形势下&#xff0c;电力装备制造业自身赢利需求不断增涨&#xff0c;电力等下游产业数字化发展形成倒逼之态&#xff0c;作为国家未来发展的高端装备创新工程主战场&#xff0c;电力装备智能化以及服务型转型升级已经成为装备制造…