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://www.mzph.cn/web/46382.shtml

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

相关文章

UFS协议

1. 名词解释 UFS: universal flash storage SCSI:小型计算机系统接口 SPC:SCSI Primary Commands SBC: SCSI Block Commands Application Client:作为主机中SCSI命令和任务管理功能请求源的实体。 Device Server:设备…

高级java每日一道面试题-2024年7月17日(java内存模型-后期完善)

面试官: 你对java内存模型了解多少? 我回答: Java内存模型(JMM,Java Memory Model)是Java虚拟机(JVM)规范的一部分,它定义了线程之间的内存可见性和并发执行时的原子性、有序性和可见性等特性。理解JMM对…

Windows下使用Cygwin创建rsync服务端

1 下载Cygwin 访问官网Cygwin,点击setup-X86_64.exe即可开始下载 2 安装 前面全部默认。路径可以自己选择,站点选阿里云的,等待安装即可 3 配置 使用打开Cygwin安装后创建的快捷方式窗口,输入下面的指令将windows用户导入到cyg…

C语言中常见库函数(1)——字符函数和字符串函数

文章目录 前言1.字符分类函数2.字符转换函数3.strlen的使用和模拟实现4.strcpy的使用和模拟实现5.strcat的使用和模拟实现6.strncmp的使用和模拟实现7.strncpy函数的使用8.strncat函数的使用9.strncmp函数的使用10.strstr的使用和模拟实现11.strtok函数的使用12.strerror函数的…

物联网平台有哪些?

随着科技的不断进步,物联网(IoT)已经成为我们生活中不可或缺的一部分。物联网平台作为连接设备、数据和应用的桥梁,扮演着至关重要的角色。本文将介绍一些主流的物联网平台,并特别关注ThingsKit物联网平台。 物联网平…

UE4-系统默认天空球的使用

当我们在调整平行光的时候,会发现场景中的光照改变了,但是太阳的位置并没有改变,此时就需要用到系统默认的天空球中的: 但是只有在选中是由平行光的改变而改变的情况下才会发生改变,如果没有选择或者选择其他的光源&am…

基恩士扫码头程序开发日记

需要获取基恩士扫码枪的扫描数据,并实现与access数据库中的数据进行比对。 一. 引用 下到了的SDK,还选择了Anycpu. 引用中添加了这个dll文件 Communication.dll Keyence.AutoID.SDK.dll VncClientControlCommon.dll using Keyence.AutoID.SDK; 二.遇到…

github.com/antchfx/jsonquery基本使用

要在 GitHub 上使用 antchfx/jsonquery 库来查找 JSON 文档中的元素,首先需要了解这个库的基本用法。jsonquery 是一个用于查询 JSON 数据的 Go 语言库,允许使用 XPath 表达式来查找和选择 JSON 数据中的元素。 以下是一些基本步骤和示例,演…

couldn‘t read native报错!Typora中使用Pandoc导出Word失败的解决方法

couldn‘t read native报错!Typora中使用Pandoc导出Word失败的解决方法 一、问题描述 在Typora中使用Pandoc将markdown文件导出为word文件时,发生如下图所示错误: 在网上找了资料以后,发现是因为md文件里面有表格,如果把表格删掉…

学生管理系统(C语言)(Easy-x)

课 程 报 告 课 程 名 称: 程序设计实践 专 业 班 级 : XXXXX XXXXX 学 生 姓 名 : XXX 学 号 : 231040700302 任 课 教 师 &a…

网页制作技术:概念、现状与展望?

网页制作技术:概念、现状与展望? 李升伟 网页制作技术是指用于创建和维护网站的一系列技术和方法。 概念: 它涉及多个方面,包括使用 HTML(超文本标记语言)来构建网页的结构和内容,使用 CSS&…

Rust Result 与可恢复的错误

Result 与可恢复的错误 大部分错误并没有严重到需要程序完全停止执行。有时,一个函数会因为一个容易理解并做出反应的原因失败。例如,如果因为打开一个并不存在的文件而失败,此时我们可能想要创建这个文件,而不是终止进程。 回忆…

RT-DETR+Flask实现目标检测推理案例

今天,带大家利用RT-DETR(我们可以换成任意一个模型)Flask来实现一个目标检测平台小案例,其实现效果如下: 目标检测案例 这个案例很简单,就是让我们上传一张图像,随后选择一下置信度,…

GPT LangChain experimental agent - allow dangerous code

题意:GPT LangChain 实验性代理 - 允许危险代码 问题背景: Im creating a chatbot in VS Code where it will receive csv file through a prompt on Streamlit interface. However from the moment that file is loaded, it is showing a message with…

第12章 结构化命令《Linux命令行与Shell脚本编程大全笔记》

12.1 if-then命令 不同于其他语言,if后面不是一个等式,而是命令,如果命令运行成功返回状态码0则运行then语句部分把分号(;)放到命令尾部,可以将then语句写在同一行 12.4 test命令 格式:if te…

激活pytorch遇到报错usage: conda-script.py [-h] [--no-plugins] [-V] COMMAND ...

问题 今天初次尝试在pycharm上创建与激活虚拟环境,创建结束后,使用命令conda activate pytorch激活虚拟环境时出现以下报错: usage: conda-script.py [-h] [–no-plugins] [-V] COMMAND … conda-script.py: error: argument COMMAND: inval…

Selenium原理深度解析

在自动化测试领域,Selenium无疑是最受欢迎和广泛使用的工具之一。它支持多种浏览器和操作系统,为开发人员和测试人员提供了强大的自动化测试解决方案。本文将深入探讨Selenium的工作原理,包括其架构、核心组件、执行流程以及它在自动化测试中…

独立开发者系列(26)——域名与解析

域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的互联网上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)。 由于IP地址不方便…

postMessageXss续2

原文地址如下:https://research.securitum.com/art-of-bug-bounty-a-way-from-js-file-analysis-to-xss/ 在19年我写了一篇文章,是基于postMessageXss漏洞的入门教学:https://www.cnblogs.com/piaomiaohongchen/p/14727871.html 这几天浏览mXss技术的时候&#xff…

模型蒸馏、量化、裁剪的概念和区别

模型压缩概述 1.1 模型压缩的重要性 随着深度学习技术的快速发展,神经网络模型在各种任务中取得了显著的成功。然而,这些模型通常具有大量的参数和复杂的结构,导致模型体积庞大、计算资源消耗高和推理时间长。这些问题限制了深度学习模型在…