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

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://xiahunao.cn/news/3248902.html

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

相关文章

访问控制系列

目录 一、基本概念 1.客体与主体 2.引用监控器与引用验证机制 3.安全策略与安全模型 4.安全内核 5.可信计算基 二、访问矩阵 三、访问控制策略 1.主体属性 2.客体属性 3.授权者组成 4.访问控制粒度 5.主体、客体状态 6.历史记录和上下文环境 7.数据内容 8.决策…

【QGroundControl二次开发】二.使用QT编译QGC(Windows)

【QGroundControl二次开发】一.开发环境准备(Windows) 二. 使用QT编译QGC(Windows) 2.1 打开QT Creator,选择打开项目,打开之前下载的QGC项目源码。 编译器选择Desktop Qt 6.6.3 MSVC2019 64bit。 点击运…

第四章:服务-让客户端发现pod并与之通信

本章内容包括: 创建服务资源,利用单个地址访问一组pod发现集群中的服务将服务公开给外部客户端从集群内部连接外部服务控制pod与服务关联排除服务故障 上一章学习了如何通过ReplicaSet以及类似的资源部署运行pod的事。尽管特定的pod可以独立的应对外部刺…

C++之类与对象(1)

目录 前言 1.类的定义 1.1类定义的格式 1.2访问限定符 1.3类域 1.3.1类定义一个作用域 1.3.2类成员在类的作用域中 1.3.3在类体外定义成员 2.实例化 2.1实例化概念 2.2对象大小 3.this指针 4.选择题补充练习 结束语 前言 Hello,友友们,好久…

使用Python Turtle绘制圣诞树和装饰

简介(❤ ω ❤) 在这篇文章中,我们将探索如何使用Python的Turtle模块来绘制一个充满节日气氛的圣诞树,以及一些可爱的装饰品。Turtle是一个受Logo语言启发的图形库,非常适合初学者学习编程和创建图形。 码农不是吗喽(大学生版&…

SpringBoot以及swagger的基本使用

1、SpringBoot是什么? 一种快速开发、启动Spring的框架、脚手架 遵循“约定优于配置”的思想,使得能够快速创建和配置Spring应用 2、SpringBoot的核心特性 自动配置,一些依赖、默认配置都预设好了,减少了配置量起步依赖&#x…

实现给Nginx的指定站点开启目录浏览功能

一、问题描述 需要实现在浏览器上可以浏览Nginx部署网站内容并下载一些常用的软件安装包、文件资料等内容;并且针对一些文件夹或内容需要进行认证后才能查看;有一些格式类型的文件也不能够访问查看。 二、问题分析 1、实现浏览器上可以浏览下载文件内容; 2、针对一些文件…

Android Studio 不再支持windows 7

Android Studio 一打开就报错: 无法找到入口 无法定位程序输入点 CreateAppContainerProfle 于动态链接库USERENV.dII 上。 截图如下: 经调查,是因为系统版本不兼容。 我目前的电脑环境:windows 7,但是现在的Android Studio要…

四六级词汇小程序的设计

管理员账户功能包括:系统首页,个人中心,用户管理,英语词汇管理,易错词管理,学习笔记管理,签到打卡管理,论坛管理 微信端账号功能包括:系统首页,英语词汇&…

【C++】认识C++(一)

前言 📚作者简介:爱编程的小马,是一名大厂后端c程序员。 📚本文收录于c系列,本专栏主要是分享我所了解的c知识,带领大家慢慢从了解c到认识c,持续更新! 📚本文主要内容&a…

纵向倾斜角、横向倾斜角、全方面监测:输电线路杆塔倾斜在线监测装置

纵向倾斜角、横向倾斜角、全方面监测:输电线路杆塔倾斜在线监测装置 随着我国电网建设的不断加速和电力设施分布范围的扩大,杆塔作为电网的重要组成部分,其安全稳定运行对于保障电力供应具有至关重要的意义。然而,由于地质条件复…

transformer论文讲解

1.标题 作者 Transformer 开创了继 MLP 、CNN和 RN 之后的第四大类模型。200页综述(来自评论区: https://arxiv.org/pdf/2108.07258.pdf )建议将Transformer作为基础模型。 标题:XXX is all you need. 头条标题。 Attention i…

达梦数据库的系统视图v$sqltext

达梦数据库的系统视图v$sqltext 在达梦数据库(DM Database)中,V$SQLTEXT 是一个系统视图,用于显示当前正在执行或最近执行的SQL语句的文本信息。这个视图对于监控和分析数据库中的SQL活动非常有用,尤其是在需要调试性…

C语言 | Leetcode C语言题解之第235题二叉搜索树的最近公共祖先

题目&#xff1a; 题解&#xff1a; struct TreeNode* lowestCommonAncestor(struct TreeNode* root, struct TreeNode* p, struct TreeNode* q) {struct TreeNode* ancestor root;while (true) {if (p->val < ancestor->val && q->val < ancestor-&g…

结构体和联合体的区别

1. 结构体(Struct) 在 C 语言中&#xff0c;结构体是一种自定义的复合数据类型&#xff0c;允许将不同数据类型的变量组合成一个单一的实体。结构体可以包含多个成员&#xff0c;每个成员可以是不同的数据类型&#xff0c;如整数、浮点数、字符、数组等。 结构体的定义通常在函…

【接口自动化_12课_基于Flask搭建MockServer】

知识非核心点,面试题较少。框架搭建的过程中的细节才是面试要点 第三方接口,不方便进行测试, 自己要一个接口去进行模拟。去作为我们项目访问模拟接口。自己写一个接口,需要怎样写 一、flask:轻量级的web应用的框架 安装命令 pip install flask 1、flask-web应用 1)…

Blackbox AI:你的智能编程伙伴

目录 Blackbox AI 产品介绍 Blackbox AI 产品使用教程 Blackbox AI体验 AI问答 代码验证 实时搜索 探索&代理 拓展集成 总结 Blackbox AI 产品介绍 Blackbox是专门为程序员量身定制的语言大模型&#xff0c;它针对20多种编程语言进行了特别训练和深度优化&#xff0c;在AI代…

Qt第十二章 样式表

样式表 文章目录 样式表1.样式表盒子模型 2.选择器选择器类型伪状态选择器Pseudo-State 3.控件示例4继承自QWidget的类&#xff0c;设置qss样式表没有效果&#xff0c;需要重写paintEvent 1.样式表 盒子模型 2.选择器 样式表语法&#xff0c;选择器{属性1:值;属性2:值;}如果只…

七款热门企业数据加密软件推荐|2024年加密软件最新整理出炉!

古言到&#xff1a;“知己知彼&#xff0c;百战不殆。” 当今时代&#xff0c;数据为王&#xff01; 企业数据的保护已成为竞争中的关键一环。 数据加密软件作为守护企业数字资产的利剑&#xff0c;其重要性日益凸显。 2024年&#xff0c;市场上涌现出一批功能强大、特色鲜…

Vue入门之v-on、v-model、v-if

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…