当前位置: 首页 > news >正文

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;

相关文章:

  • SQLiteC/C++接口详细介绍sqlite3_stmt类(十三)
  • C#多态性
  • 2024/3/24 蓝桥杯
  • 酒店智能水电表管理解决方案:提升效率、节约成本与环保并重
  • go面向对象
  • 软件杯 深度学习 机器视觉 人脸识别系统 - opencv python
  • Leetcode的使用方法
  • 深入解析代理模式:使用场景、实现及应用实例
  • Nextcloud激活被锁用户
  • 深入了解 Flutter 中多种预定义的 Physics 类
  • ideaSSM 学员信息管理系统bootstrap开发mysql数据库web结构java编程计算机网页源码maven项目
  • 社交媒体的未来:探讨Facebook的发展趋势
  • scala05-函数式编程02
  • C语言中常用的文件操作
  • Mysql数据库——高级SQL语句补充
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • Docker入门(二) - Dockerfile
  • HTTP--网络协议分层,http历史(二)
  • java B2B2C 源码多租户电子商城系统-Kafka基本使用介绍
  • java第三方包学习之lombok
  • Quartz初级教程
  • 关于springcloud Gateway中的限流
  • 类orAPI - 收藏集 - 掘金
  • 区块链技术特点之去中心化特性
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 设计模式 开闭原则
  • 使用common-codec进行md5加密
  • 使用putty远程连接linux
  • 小程序开发之路(一)
  • ​queue --- 一个同步的队列类​
  • # include “ “ 和 # include < >两者的区别
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • (4)STL算法之比较
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (HAL库版)freeRTOS移植STMF103
  • (译) 函数式 JS #1:简介
  • (译)2019年前端性能优化清单 — 下篇
  • (转)关于如何学好游戏3D引擎编程的一些经验
  • (转)拼包函数及网络封包的异常处理(含代码)
  • (转)使用VMware vSphere标准交换机设置网络连接
  • *Django中的Ajax 纯js的书写样式1
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET 程序如何获取图片的宽高(框架自带多种方法的不同性能)
  • .NET6实现破解Modbus poll点表配置文件
  • .NET委托:一个关于C#的睡前故事
  • .net最好用的JSON类Newtonsoft.Json获取多级数据SelectToken
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • .sh
  • @html.ActionLink的几种参数格式
  • @NoArgsConstructor和@AllArgsConstructor,@Builder
  • [ web基础篇 ] Burp Suite 爆破 Basic 认证密码
  • [100天算法】-目标和(day 79)
  • [AIGC] SQL中的数据添加和操作:数据类型介绍