程序员经验分享-hwhale

初学React，制作案例页面1

2023-11-09

通过node搭建开发环境，先下载node并安装，然后在cmd中用npm命令下载react脚手架，

我选择了react-bootstrap作为UI框架，所以也在cmd中下载react-bootstrap资源包。

npm install -g create-react-app

npm install react-bootstrap bootstrap 

然后创建项目，再进入运行项目

create-react-app myreact

cd myreact

npm start 

会自动打开页面，网址：http://localhost:3000/ 这是开发环境网页，项目中有已生成的index页面文件，在index.js里引用bootstrap的css文件

 我将App.js内容改造为三个板块

页面变成了这样 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

react知识点

ReactJS

初学React，制作案例页面1 的相关文章

随机推荐

  • AI对游戏外包开发的影响

    人工智能 AI 对游戏行业产生了深远的影响 从游戏设计 开发到玩家体验等方面都发挥着重要作用 以下是AI对游戏行业的一些主要影响 和大家分享一些观点 希望对大家有所帮助 北京木奇移动技术有限公司 专业的软件外包开发公司 欢迎交流合作 1 游

  • 使用Vlc.DotNet打开摄像头并截图 C#

    参考上一篇 使用vlc打开usb摄像头 理论上输入下面地址 dshow dshow size 1600 1200 dshow vdev USB CAM2 C 就能打开摄像头了类似打开本地文件或者rtsp之类的网络地址 但实际测试怎么着都是打

  • 计算机网络复习4----TCP的拥塞窗口cwnd大小与传输轮次n的关系

    这里是 凤凰谷佛的计算机网络复习系列之4 一起来看看吧 书中P236 图5 27 1 5 39 TCP的拥塞窗口cwnd大小与传输轮次n的关系如下所示 试分析回答 1 指明TCP工作在慢开始阶段的时间间隔 解析 满开始时间间隔看在哪一刻2倍

  • traits：Traits技术初探

    概述 traits是一种特性萃取技术 color 663300 font family 宋体 padding 0px margin 0px gt 它在Generic Programming中被广泛运用 常常被用于使不同的类型可以用于相同的操

  • PHP文件包含漏洞代码分析-通过漏洞getshell-学习笔记

    一 原理分析 文件包含漏洞是代码注入的一种 其原理就是注入一段用户能控制的脚本或代码 并让服务器端执行 代码注入的典型代表就是文件包含 File inclusion 文件包含可能会出现在jsp php asp等语言中 服务器通过函数去包含任

  • Python笔记4

    迭代器 迭代是Python最强大的功能之一 是访问集合元素的一种方式 迭代器是一个可以记住遍历的位置的对象 迭代器对象从集合的第一个元素开始访问 直到所有的元素被访问完结束 迭代器只能往前不会后退 迭代器有两个基本的方法 iter 和 ne

  • css flex布局 —— 项目属性 align-self

    align self属性定义 flex 子项单独在侧轴 纵轴 方向上的对齐方式 可覆盖 align items 属性 默认值为 auto 表示继承父元素的 align items 属性 如果没有父元素 则等同于 stretch 语法 ite

  • 实战--Kafka入门（一）

    问题导读 1 如何理解消息队列 MessageQueue 2 如何解析Kafka基础架构 3 如何安装Kafka集群 4 Kafka命令行操作有哪些 第1章 Kafka概述1 1定义 Kafka是一个分布式的基于发布 订阅模式的消息队列 主

  • 关于野指针的一些问题与总结

    void Test void char str char malloc 100 strcpy str hello free str if str NULL strcpy str world printf str 请问运行Test函数会有什么

  • 在闲鱼上卖什么东西比较赚钱？

    在闲鱼上卖什么东西比较赚钱 这牵扯做闲鱼的一个关键问题 选品 可以这么说 会选品 选好品 就成功了一半 剩下的一半 一半交给技术 另一半交给运气 怎么选品 要遵循下面几个原则 第一 做实物 但不要做食物 不要去做虚拟产品 也不要去做生鲜食物

  • 查看YOLO的模型大小和参数量的三种方式

    查看YOLO的模型大小和参数量的三种方式 1 使用Darknet YOLO的原始实现 2 使用Python和深度学习库 3 使用PyTorch 要查看YOLO模型的大小和参数量 你可以使用相关的深度学习库和工具 比如TensorFlow P

  • Centos7/SSH Weak Key Exchange Algorithms Enabled/SSH Server CBC Mode Ciphers Enabled

    SSH Weak Key Exchange Algorithms Enabled SSH Server CBC Mode Ciphers Enabled https knowledge broadcom com external artic

  • 中文乱码解决大全

    一 Java中文问题的由来 Java的内核和class文件是基于unicode的 这使Java程序具有良好的跨平台性 但也带来了一些中文乱码问题的麻烦 原因主要有两方面 Java和JSP文件本身编译时产生的乱码问题和Java程序于其他媒介交

  • data must not be longer than 256 bytes

    1 问题 在进行 RSA 解密时候报错 data must not be longer than 256 bytes 2 分析 RSA加解密算法通常有两种不同的方式 是使用对称密钥 比如 AES DES等加解密方法 加密数据 然后使用非对称

  • JSP简单练习-一个简单的计数器

    在JSP中 在 之间书写的程序代码成为java程序片 一个JSP页面中可以有多个java程序片 要注意的是 在Java程序片中声明的变量在它们所在JSP页面的所用程序片及表达式中都有效 基于此 可以把一个较大的程序片分成几个小的程序片 还可

  • python 作图中的图标题title 和坐标轴标签的axes的调整

    这里主要是调整title和坐标轴标签的样式 要注意抓住设定的套路和规律 不要被复杂的外表所迷惑 import matplotlib pyplot as plt import numpy as np from matplotlib impor

  • C# HttpWebRequest 获取 HTTPS 网页内容

    在 C 中 可以使用 HttpWebRequest 类来获取 HTTPS 网页内容 需要注意的是 HTTPS 网页采用了 SSL TLS 加密传输机制 必须在发送请求之前获取服务器端的证书并进行验证才能成功获取网页内容 下面是一份示例代码

  • js--纯js实现省市地区三级联动

    QQ自己的JS省市区三级联动 已验证 使用引用外部JS来实现三级联动的 JS如下 http ip qq com js geo js

  • CPU是如何工作的

    晶体管到门电路 二极管的工作 相信大家都知道二极管的工作特性 那如何使用二极管去构建一个门电路呢 二极管的与门 上拉电阻 只有AB同时为高电平 输出为高电平 二极管的或门 下拉电阻 只要AB任一一个为高电平 输出为高电平 MOS管的工作 在

  • 初学React，制作案例页面1

    通过node搭建开发环境 先下载node并安装 然后在cmd中用npm命令下载react脚手架 我选择了react bootstrap作为UI框架 所以也在cmd中下载react bootstrap资源包 npm install g cre

热门标签