React 从入门到实战 一一开发环境基础搭建(小白篇)

news2024/12/23 23:09:30

React 从入门到实战一一开发环境基础搭建(小白篇)

  • React 介绍
    • 什么是 react ?
    • react 主要功能
    • react 框架特点
  • 开发工具
  • 渲染测试

React 介绍

最近两年,react 也愈来愈火热,想要在里面分一杯羹,那肯定逃不过 react 技术,不管是职场人士提升自己的硬实力还是毕业生找工作,都可以跟着本文章一步一步从入门到实战。

什么是 react ?

React是Facebook开发的一款JS库,那么Facebook为什么要建造React呢,主要为了解决什么问题,通过这个又是如何解决的?

从这几个问题出发我就在网上搜查了一下,有这样的解释。

Facebook认为MVC无法满足他们的扩展需求,由于他们非常巨大的代码库和庞大的组织,使得MVC很快变得非常复复杂,每当需要添加一项新的功能或特性时,系统的复杂度就成级数增长,致使代码变得脆弱和不可预测,结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用,当系统中有很多的模型和相应的视图时,其复杂度就会迅速扩大,非常难以理解和调试,特别是模型和视图间可能存在的双向数据流动。

react 主要功能

React主要用于构建UI。可以在React里传递多种类型的参数,如声明代码,帮助开发者渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

react 框架特点

  • 1.声明式设计:React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图,当数据变动时 React能高效更新并渲染合适的组件。
  • 2.组件化: 构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
  • 3.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
  • 4.灵活:无论使用什么技术栈,在无需重写现有代码的前提下,通过引入React来开发新功能。

开发工具

这里,我们就使用 VSCode 开发工具,简单方便。

如果还没安装的,可以去官网上 https://code.visualstudio.com/Download 安装。选择自己电脑的版本系统即可。

在这里插入图片描述

安装完成后,我们先在本地创建一个 名为 react 的文件夹。

然后,双击打开安装的 vscode ,找到 File ,点击 选择 Open Folder ,选择刚刚创建好的 react 文件夹

在这里插入图片描述

然后会出现一个空项目界面,如下图所示:

在这里插入图片描述

这时候,我们需要在终端利用命令行的方式,创建项目,npx create-react-app

然后等待它创建成功。

在这里插入图片描述
当创建成功后,我们打开我们的项目文件夹,看一下文件夹目录

如果出现·一下这些内容,就代表着项目创建成功。

在这里插入图片描述

大家可以看到,文件夹内容也很多哈,对于0基础的小白来说,看着有点复杂,那我们可以把 src 文件夹下的内容,除了标红的给大家圈出来的俩外,全删了就行。只保留,index.js 和 app.js 俩文件就行,如图所示,这样就干净整洁多了。

在这里插入图片描述
项目创建成功后,我们需要把终端目录切换到项目文件下,,不然后续启动的时候会报错,找不到文件。如图所示:

在这里插入图片描述

然后我们打开 package.json 文件 ,点击deug,选择第一个start 就可以启动项目了,也可以在命令行了里输入,npm run start
在这里插入图片描述

启动后如果出现以下界面,代表着项目创建成功了,我们就可以在里面写业务了!。

在这里插入图片描述

渲染测试

既然项目创建成功了,那我们就稍作修改,改一下页面数据看看能不能展现出来。

在这里插入图片描述
在这里插入图片描述
如图所示,修改下,app.js 内 div里的内容,看下页面效果:

在这里插入图片描述

至此第一步,项目的开发环境的基础搭建已经完成,不管是做过开发的还是0基础未开发过的,都可以利用教程,单独创建一个react 项目。

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

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

相关文章

CentOS 7开启SSH连接

1. 安装openssh-server 1.1 检查是否安装openssh-server服务 yum list installed | grep openssh-server如果有显示内容,则已安装跳过安装步骤,否则进行第2步 1.2 安装openssh-server yum install openssh-server2. 开启SSH 22监听端口 2.1 打开ssh…

阿里云盾占用资源的问题AliYunDun,AliYunDunUpdate

目录 1.关闭AliYunDunUpdate,AliYunDun,AliYunDunMonitor。 2.发现报错如下 3.打开阿里云安全中心控制台 4.成功解决 2.开启云盾命令 “如果您在解决类似问题时也遇到了困难,希望我的经验分享对您有所帮助。如果您有任何疑问或者想分享您…

【考研数学】线代满分经验分享+备考复盘

我一战二战复习都听了李永乐的线代课,二战的时候只听了一遍强化,个人感觉没有很乱,永乐大帝的课逻辑还是很清晰的。 以下是我听向量这一章后根据听课内容和讲义例题总结的部分思维导图,永乐大帝讲课的时候也会特意点到线代前后联…

spark shell

1.进行shell命令行 spark-shell 2.创建RDD 2.1 读取文件创建RDD 2.1.1读取linux文件系统的文件创建RDD --需要保证每一个worker中都有该文件 val data1 sc.textFile("file:/opt/file/word.txt") 2.1.2读取hdfs文件系统上的文件创建RDD val data2sc.textFile("…

基于dcm4chee搭建的PACS系统讲解(一)docker搭建精简版

文章目录 知识点PACSdcm4chedcm4chee部署dcm4chee方式 docker部署docker编排 总结 最近项目开始需要用到PACS系统,于是研究了一番,选用了dcm4chee搭建PACS系统,抛出 dcm-arc-light的git地址 。 知识点 PACS Picture Archiving and Communic…

视频压缩文件太大了怎么缩小?怎么压缩视频大小?视频压缩方法:10个!(宝藏)

视频压缩文件太大了怎么缩小?让我看看是谁下班之后不是一手刷手机短视频,顺便葛优躺在沙发上的?互联网发展到现在,视频已成为我们生活中不可或缺的一部分。不管是视频录制还是视频缓存,视频文件体积越来越庞大&#xf…

.net6 core Worker Service项目,使用Exchange Web Services (EWS) 分页获取电子邮件收件箱列表,邮件信息字段

Program.cs 安装包:Microsoft.AspNetCore.Hosting.WindowsServices、Microsoft.Extensions.Hosting、Microsoft.Extensions.Hosting.WindowsServices、Microsoft.Extensions.Logging.Log4Net.AspNetCore 新建Configs/log4net.config using Com.Chinahorn.Exchange.W…

鸿蒙开发StableDiffusion绘画应用

Stable Diffusion AI绘画 基于鸿蒙开发的Stable Diffusion应用。 Stable Diffusion Server后端代码 Stable Diffusion 鸿蒙应用代码 AI绘画 ​ 使用Axios发送post网络请求访问AI绘画服务器 api ,支持生成图片保存到手机相册。后端服务是基于flaskStable Diffusion …

MySQL实现主从复制的步骤,包括配置读写分离的方法。—— 慧哥充电桩开源平台

下载源码 【慧哥开源充电桩平台】 https://liwenhui.blog.csdn.net/article/details/134773779?spm1001.2014.3001.5502 MySQL主从复制是一种常见的数据备份和读写分离策略。下面是实现MySQL主从复制的步骤: 配置主服务器(Master)&#xff1…

鸿蒙开发入门——ArkTS语法简介(万字简介)

ArkTS 作为鸿蒙开发的编程语言,我们先来一图看看这个语言,我们可以看到ArkTS是在TS(TypeScript)的基础上改造的,而TS又是在JS(JavaSript)上改造的,一句话总结就是ArkTS是TS的超集&a…

为 android编译 luajit库、 交叉编译

时间:20200719 本机环境:iMac2017 macOS11.4 参考: 官方的文档:Use the NDK with other build systems 写在前边:交叉编译跟普通编译类似,无非是利用特殊的编译器、链接器生成动态或静态库; make 本质上是按照 Make…

鸿蒙 next 5.0 版本页面跳转传参 接受参数 ,,接受的时候 要先定义接受参数的类型, 代码可以直接CV使用 [教程]

1, 先看效果 2, 先准备好两个页面 index 页面 传递参数 import router from ohos.routerEntry Component struct Index {Statelist: string[] [星期一, 星期二,星期三, 星期四,星期五]StateactiveIndex: number 0build() {Row() {Column({ space: 10 }) {ForEach(this.list,…

笔记 3 : 继续彭老师课本第 3 章的 arm 的汇编指令

(26) 指令 LDR : (27) STR : 可见,从语法上将, ! 提示编译器进行更复杂的编译,对应内涵更复杂的指令。 (28) LDR 与 STR 指令还可…

【银河麒麟服务器操作系统】java进程oom现象分析及处理建议

了解银河麒麟操作系统更多全新产品,请点击访问麒麟软件产品专区:https://product.kylinos.cn 现象描述 某服务器系统升级内核至4.19.90-25.22.v2101版本后仍会触发oom导致java进程被kill。 现象分析 oom现象分析 系统messages日志分析,故…

pikachu之暴力破解

1基于表单的暴力破解 随便输入然后抓包 选中添加账号密码 添加分别添加payload1,2,的字典 开始攻击 2验证码绕过on server 和基于表单的暴力破解相比,多了一个验证码功能 这个验证码是前端的验证码(和前面那个一样选中添加账号密码…

计算机网络入门 -- 常用网络协议

计算机网络入门 – 常用网络协议 1.分类 1.1 模型回顾 计算机网络细分可以划为七层模型,分别是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。而上三层可以划为应用层中。 1.2 分类 1.2.1 应用层 为用户的应用进程提供网络通信服务&#xff0…

第一百七十三节 Java IO教程 - Java缓冲区读写

Java IO教程 - Java缓冲区读写 缓冲区读取 有两种方法从缓冲区读取数据: 绝对位置相对位置 使用四个版本重载的get()方法用于从缓冲区读取数据。 get(int index)返回给定索引处的数据。 get()从缓冲区中的当前位置返回数据,并将位置增加1。 get(byte [] dest…

vmware配置centos+配置静态ip联网+更换镜像

centos7配置参考【实战】VMware17虚拟机以及Centos7详细安装教程-CSDN博客 ip配置步骤: 先更改编辑虚拟网络编辑器中的内容 就按照还原默认设置来,设定后就是以上内容,然后一定要记住子网ip和子网掩码 接下来就是NAT设置: 网关…

Spring Boot集成SFTP快速入门Demo

1.什么是SFTP? SFTP(SSH File Transfer Protocol,也称 Secret File Transfer Protocol),是一种基于SSH(安全外壳)的安全的文件传输协议。使用SFTP协议可以在文件传输过程中提供一种安全的加密算…

ABAP打印WORD的解决方案

客户要求按照固定格式输出到WORD模板中,目前OLE和DOI研究了均不太适合用于这种需求。 cl_docx_document类可以将WORD转化为XML文件,利用替换字符串方法将文档内容进行填充同 时不破坏WORD现有格式。 首先需要将WORD的单元格用各种预定义的字符进行填充…