nodejs安装使用React

1、react安装
首先,确保电脑上具备nodejs环境,之后用 win+r 呼出控制台,输入 cmd 命令弹出cmd控制台(小黑框)之后在默认路径输入如下代码

npm i -g create-react-app //全局安装react环境无需选择特定文件夹

安装成功后用cd / 命令跳转到要创建目录的文件夹之下输入如下代码创建一个react项目,我这里安装在了C盘中

create-react-app mreact  //create-react-app + 文件名 该文件名是react根文件名cd mreact //转到mreact文件目录下npm start  //运行项目

2、封装个组件,导出组件

function Profile() {return (<div>ddade</div>);
}export default function Gallery() {return (<section><h1>导入应该主键</h1><Profile /><Profile /><Profile /></section>);
}

3、引入组件使用,组件function Dade()首字母必须大写

import logo from './logo.svg';
import './App.css';
import Gallery from './admin/index.js'function Dade(){let dades = 999999;if(dades == 999999){return (<div>{dades}</div>)}else{return (8888)}
}function App() {return (<div className="App"><Gallery /><section><Dade /></section></div>);
}
export default App;

在这里插入图片描述

function Item({ name, isPacked }) {if (isPacked) {return <li className="item">{name}</li>;}return <li className="item">{name}</li>;
}export default function PackingList() {return (<section><h1>Sally Ride 的行李清单</h1><ul><Item isPacked={true} name="宇航服" /><Item isPacked={true} name="带金箔的头盔" /><Item isPacked={false} name="Tam 的照片" /></ul></section>);
}

4、遍历

import logo from './logo.svg';
import './App.css';
import Gallery from './admin/index.js'function Dade(){const people = ['遍历1','遍历1','遍历1','遍历1','遍历1',];const lis = people.map(req=><li>{req}</li>);let dades = 999999;return (<div>{dades}{lis}</div>)
}function App() {return (<div className="App"><Gallery /><section><Dade /></section></div>);
}
export default App;

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

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

相关文章

深度学习-2.9梯度不稳定和Glorot条件

梯度不稳定和Glorot条件 一、梯度消失和梯度爆炸 对于神经网络这个复杂系统来说&#xff0c;在模型训练过程中&#xff0c;一个最基础、同时也最常见的问题&#xff0c;就是梯度消失和梯度爆炸。 我们知道&#xff0c;神经网络在进行反向传播的过程中&#xff0c;各参数层的梯…

ADW300多功能无线计量仪表

仪表应用背景 电力运维行业&#xff1a;运维服务系统实时采集大量用户站的运行和动环数据&#xff0c;经专业数据分析&#xff0c;当用户站发生异常情况或运行故障时&#xff0c;及时反馈到运维指挥中心&#xff0c;并通过移动终端通知相应的运维工程师&#xff0c;指导现场作…

浅谈Javascript虚拟列表(virtaul list)改造成虚拟表格(virtaul table)的技术

前端加载百万条数据列表&#xff0c;如果采用真实的DOM插入100万个div&#xff08;或li&#xff09;标签&#xff0c;肯定是非常卡顿的。这就不得不使用虚拟列表技术方案&#xff0c;但是虚拟列表技术方案网上有很详细的实现方法&#xff0c;今天我就来谈谈根据网上的方案&…

ChatGPT:提升论文写作能力

ChatGPT无限次数:点击直达 ChatGPT&#xff1a;开启智能对话&#xff0c;提升论文写作能力 ChatGPT是一款强大的人工智能对话引擎&#xff0c;它不仅可以帮助用户进行智能对话&#xff0c;还能在论文写作中发挥重要作用。本文将探讨如何利用ChatGPT提升论文写作能力&#xff0c…

Educational Codeforces Round 163 (Rated for Div. 2)(A,B,C,D,E)

比赛链接 好忙好忙好忙&#xff0c;慢慢补老比赛的题解了。 这场没啥算法&#xff0c;全是思维。有也是BFS&#xff0c;屎。 A. Special Characters 题意&#xff1a; 您将得到一个整数 n n n 。 您的任务是构建一串大写的拉丁字母。此字符串中必须正好有 n n n 个特殊字…

Docker - 哲学 默认网络和 自定义网络 与 linux 网络类型 和 overlay2

默认网络&#xff1a;不指定 --nerwork 不指定 网络 run 一个容器时&#xff0c;会直接使用默认的网络桥接器 &#xff08;docker0&#xff09; 自定义网络&#xff1a;指定 --nerwork 让这两台容器互相通信 的前提 - 共享同一个网络 关于 ip addr 显示 ens160 储存驱动 ov…

入门linux之Ubuntu学习

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1、介绍Ubuntu2、虚拟机目录解析3、常用指令ls&#xff1a;罗列当前目录文件信息对ls -l 的结果解析1.第一个字符2.每三个字符&#xff08;第一个字符后&#x…

jmeter超高并发报错解决方法

1、比如jmeter设置并发量为5000&#xff0c;运行后报错socket closed。原因是客户端与服务端做了三次握手之后&#xff0c;后面不需要握手了&#xff0c;但是jmeter没有这个功能&#xff0c;5000个并发每次发接口请求都是独立的&#xff0c;jmeter端口处理不了这么大量的请求&a…

【嵌入式DIY实例】-DIY 灌水机

DIY 灌水机 文章目录 DIY 灌水机1、硬件准备2、YF-S201 霍尔效应水流量传感器介绍3、4x4矩阵键盘4、硬件接线5、代码实现在这个项目中,我们将使用流量传感器和 Arduino 构建一个水灌装机。用户使用 44 键盘输入液体总量。泵在收到用户输入后抽取准确数量的水。当准确数量完成后…

v-for=“item in arr“ 的理解

在 Vue.js 中&#xff0c;v-for 是一个指令&#xff0c;用于在模板中渲染一个列表的数据。v-for"item in arr" 这个语法中&#xff0c;item 和 arr 分别代表以下含义&#xff1a; item: item 是当前迭代到的数组元素或对象的别名。在每次迭代中&#xff0c;item 会被…

Android视角看鸿蒙第八课(module.json5中的各字段含义之abilities)下

Android视角看鸿蒙第八课(module.json5中的各字段含义之abilities&#xff09;下 导读 上篇文章开始学习abilities下的各字段含义&#xff0c;因为篇幅原因只学习了name、srcEntry、description、icon和label字段的含义和用法&#xff0c; 这篇文章继续学习和了解其他字段。 …

GPT4.0

GPT4.0 支持官网所有功能以及所有第三方GPTS&#xff0c;完全同步官网。无需魔法&#xff0c;填写授权码直达官网。全天超18小时维护&#xff0c;无需担心不稳定。没有永久卡&#xff0c;3.5免费提供&#xff0c;4.0可以按需下单即可&#xff0c;不存在跑路。 需要的联系

格瑞纳电子邀您参观2024杭州快递物流展

2024长三角快递物流供应链与技术装备展览会 2024.7.8-10 杭州国际博览中心 参展企业介绍 北京格瑞纳电子产品有限公司是一家立足于专业科学技术领域集产品代理、培训咨询和个性化增值服务的高科技公司&#xff0c;于2009年成立于北京&#xff0c;立足于复杂系统仿真领域&…

皓学IT:WEB06_ EL表达式JSTL标签库

一、EL表达式 1.1.特点 是一个由java开发的工具包 用于从特定域对象中读取并写入到响应体开发任务&#xff0c;不能向域对象中写入。 EL工具包自动存在Tomcat的lib中&#xff08;el-api.jar&#xff09;&#xff0c;开发是可以直接使用&#xff0c;无需其他额外的包。 标准…

seleniumUI自动化实例(登录CSDN页面)

今天分享一个CSDN登录模块的登录场景 1.配置文件 CSDNconf.py&#xff1a; from selenium import webdriver options webdriver.ChromeOptions() options.binary_location r"D:\Program Files\360\360se6\Application\360se.exe" # 360浏览器安装地址 driver w…

电脑审计系统知多少

域智盾的电脑审计系统是一款功能强大的软件&#xff0c;主要用于监控和审计电脑的使用情况。通过安装该系统&#xff0c;组织能够全面了解员工的电脑活动。 首先&#xff0c;该系统能够详细记录用户的上网记录&#xff0c;包括访问的网站、浏览的网页内容等。这使得管理员可以监…

剑指offer面试题42 翻转字符顺序 VS 左旋字符串

考察点 字符串遍历知识点 题目 分析 类似这种题目只能观察元素特点找出规律确定算法了&#xff0c;像第一道题目翻转单词顺序&#xff0c;我们可以很容易的得到翻转每个字符后的的字符串&#xff0c;再仔细观察一下紧接着以空格为间隔分别翻转俩边的字符串就可以解这道题目了…

鸿蒙Harmony应用开发—ArkTS-@Provide装饰器和@Consume装饰器:与后代组件双向同步

Provide和Consume&#xff0c;应用于与后代组件的双向数据同步&#xff0c;应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递&#xff0c;Provide和Consume摆脱参数传递机制的束缚&#xff0c;实现跨层级传递。 其中Provide装饰的变…

YOLOv8 如何实现多主干特征融合方式 | GhostNet+ShuffleNet / SwinTransformer+ShuffleNet

文章目录 前言模块添加方法双特征提取例子`GhostNet+ShuffleNet` 双主干结构图代码`Swin+ShuffleNet` 双主干结构图代码参数量与计算量1. 什么是YOLO-Magic框架?2. 如何加入这个框架?3. 加入后如何使用框架?4. GitHub组织是什么?

LeetCode-热题100:39.组合总和

题目描述 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复被…