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,一经查实,立即删除!

相关文章

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…

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…

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…

激活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…

车载音视频App框架设计

简介 统一播放器提供媒体播放一致性的交互和视觉体验,减少各个媒体应用和场景独自开发的重复工作量,实现媒体播放链路的一致性,减少碎片化的Bug。本文面向应用开发者介绍如何快速接入媒体播放器。 主要功能: 新设计的统一播放U…

新版本cesium编译1.103之后的版本

cesium1.1之后的版本文件结构域1.1之前的版本有了很大的差别,源码也全部移到了packages目录中。有很多依赖包没有写在根目录的package.json文件中。npm i 后直接编译会保持。 cesium源码git https://github.com/CesiumGS/cesium 1、添加缺少的包,缺少的…

4. 双端口ram设计

1. 设计要求 设计一个位宽8bit,地址深度为128,可以同时读写的双端口RAM 要求:模块名字为RAM_DUAL 输入端口:ADDR_W,ADDR_R CLK_R,CLK_W,RSTn ADDR_R[6:0],ADDR_W[6:0] DATA_WR…

学习测试9-接口测试 2-抓包工具Fiddler

Fiddler 抓包工具的使用 怎么找接口信息,可以通过浏览器的开发者工具 Fiddler 是一个 HTTP 协议调试代理工具 File 菜单: Capture Traffic(或 F12):是个开关,可以控制是否把 Fiddler 注册为系统代理。当把…

浅谈Open.Json.pickle.Os

一、Open函数使用 open函数是 Python 中用于打开文件的内置函数,它返回一个文件对象,该文件对象提供了对文件进行读写操作的方法。使用 open 函数时,通常需要指定至少两个参数:文件名(file)和模式&#xf…

【网络工具】Charles 介绍及环境配置

✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/iAmAo 📚专栏简介:在这个专栏中,我将会整理一些工作或学习中用到的工具介绍给大家~ 📘Charles 系列其它文章:【网络…

Git操纵本地仓库和远程仓库

git是一个代码托管的平台,我们可以对我们的代码进行分支 推送提交 打标签等等操作,而且git使用过程中也是支持一些linux语言的 比如cd呀 touch mkdir啊等等等 git的具体安装过程就不再赘述 我个人认为 好多东西就是 代码也好 文字 文档 也好&…