React项目搭建及基本介绍

article/2025/7/29 5:07:57

React的项目搭建

项目搭建比较简单,先安装react脚手架,然后创建项目就完事了

第一步安装node(基本环境)
第二步安装webpack(基本环境)

直接敲命令运行即可

 npm install -g webpack 
第三步配置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
第四步 安装create-react-app
cnpm install -g create-react-app
第五步 创建项目
create-react-app my-project//创建项目
第六步 本地服务启动(需要切换到项目目录)
npm run start

上面都是死的,不常用的,不用记,网上查就好了

React框架介绍

个人理解:

react框架跟传统的html+css+js那种还是有很大的区别,传统的比较好理解,传统的无非就是请求数据,然后将数据填充到页面上,或者是删除/修改数据,然后将对应的动作传到对应的接口,执行相应的动作,理解起来特简单,但是缺点就是比较繁琐,工作量相对来说也比较大。
react使用起来前期比较麻烦,但是当你把组件写好以后,对于后期的工作会比较简单,但是这个框架入门稍微有点难,需要花时间去理解。

简单介绍一下react
第一点:react是数据驱动,
  1. 就是说当有数据变化的时候,页面会被从新渲染,这个数据变化值得是父组件(可以理解成上一页)传给子组件(可以理解成下一页)的值发生了变化,这里的值都放在props里面,或者是本页面的值放生了变化,这里的值都放在state里面,主要是这两个。
第二点:react是分层的,主要分为三层,跟java有点想,mvc结构,
  1. 第一个就是视图层view,这里的视图层就是html的代码,中间参杂了一些动态的数据。
  2. 第二个是model数据层,就是state或者props数据,state和props是怎么来的?主要就是后台请求来的一些数据,以及页面自定义的一些数据,比如display:true,当执行某个动作后,display设置为false
  3. 第三个就是controller层,这一层类似于js中的function方法,比如按钮点击动作,会调用某个方法,然后执行某个动作。
    上图:在这里插入图片描述
    上面这个图差不多可以理解吧,点击button调用handle放大,然后把n的值该变成200,然后sset到state中,然后值变了,页面就会被从新渲染
react做了什么?

除了基本的语法,react框架监听数据的更新,当数据更新后,帮助我们去渲染视图!

这篇文章还有很多知识点没有介绍,只是让大家对react有一个基本的认识。


http://chatgpt.dhexx.cn/article/jrWeRUTA.shtml

相关文章

从0到0.1:最简单的React项目搭建

本文原创地址:http://blog.csdn.net/zhou_xiao_cheng/article/details/54677689,未经博主允许不得转载。 自从React火遍大江南北后,相信很多人都在加入到React队伍的路上,但是如何从零开始搭建一个React项目呢?本文将为大家介绍如何快速简单地搭建一个新的React项目。 在…

React + Ts项目搭建

一、安装reactts npx create-react-app my-app --template typescript二、安装eslint代码检测 一个好的项目必须有一个规范,所以得安装eslint代码检测 yarn add eslint npx eslint --initeslint初始化后会出现三个项目,根据项目而定 1、使用什么样的…

搭建react项目 搭建ts react项目 使用vite搭建react项目

创建react 项目 注意: 网上有一些生成react 的方法,但是也有一些是过时的。 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架 这个脚手架和 vue 的 vue-cli是一样的,都可以全局安装,命令: npm…

搭建React项目,超简单教程

步骤 前言一、安装create-react-app二、使用步骤1.创建项目2.运行项目3.文件目录 总结 前言 最近公司闲的无聊,刚好之前学的React,至今还未搭建过一个React项目,借这空闲时间来练练手,从0开始搭建React项目,以此来记录…

React项目框架搭建

一、.前置环境安装 确认已安装安装Node.js “在项目开发中需要使用NPM包管理工具,而NPM运行在node.js上面, 所以需要先安装node.js。通过npm可以很方便的安装、共享、分发代码,管理项目依赖关系;通过运行“npm install 包名”几乎…

react项目的搭建与启动

react项目的搭建与启动 准备工作(环境的搭建)react项目创建与启动常用插件安装Sass/Scss安装 准备工作(环境的搭建) (已经准备好的这一步可以跳过) 1.安装Node.js(安装一直选择下一步就行&…

react项目搭建(基础学习笔记)

react项目搭建(基础学习) 安装 局部安装 1、npm init -y或yarn init -y初始化项目 2、全局安装creact-react-app。使用npm install -D create-react-app或yarn add -D create-react-app。使用npx create-react-app --version查看安装的版本号。 3、…

React项目搭建的基本流程

一,版本号 React不同版本之间语法差别还是挺大的,这里放上我项目中的版本号仅供参考 二,项目目录搭建 通过脚手架创建项目: npx-create-react-app 项目名称 1.基本的目录结构 先进行项目初始化,删除项目原始的样式…

react项目搭建--相对较全面

前言:简单记录一下第一次搭建react项目框架,之前只是在已搭建好的框架内去开发实现项目,没有自己动手搭建过,亲自动手实际操作,还遇到挺多问题的。参考了不少文献,帮助我解决并完成整个项目搭建的文献&…

从零开始搭建react项目(一)

自学react有一段时间了,官网文档基础的看了一遍,然后便把之前公司做的一个vue项目用react搭建了下,顺便整理下一些知识点。 项目大概效果: 一、利用create-react-app搭建项目 1、全局安装create-react-app,执行&…

React项目搭建

一、创建项目 1、cmd切换到目标文件夹 2、初始化项目 npx create-react-app init-mobile 3、切换到对应目录根据提示启动项目 二、配置项目文件目录 调整项目中src目录结构如下: 三、引入组件库antd-mobile 1、安装 npm install --save antd-mobilenext 2、在…

思科路由器开启DNS解析

一、DNS服务端、DNS中继 R2(config)# interface FastEthernet0/0 R2(config-if)# ip address 192.168.1.254 255.255.255.0 R2(config)# interface FastEthernet0/1 R2(config-if)# ip address 22.1.1.2 255.255.255.0 R2(config)# router ospf 1 R2(config-router)# net…

IIS DNS服务器搭建

1——IIS(因特网信息服务),IIS意味着你能发布网页,在没有配置服务器之前就用IP访问。步骤步骤 开始---》控制面板---》添加或删除程序---》双击应用程序服务器---》选择IIS、控制台 我这里,顺便双击了网络服务---》添加…

Wireshark实验 - DNS

Wireshark实验 - DNS 官方英文文档:Wireshark_Intro_v6.01.pdf Wireshark 实验: DNS v6.01 《计算机网络:自顶向下方法(第6版)》补充材料,J.F. Kurose and K.W. Ross “不闻不若闻之,闻之不若见之&#…

内网DNS重要使用作用

DNS服务简介: DNS(Domain Name System–域名系统),是因特网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。是一个应用层的协议DNS使用TCP和UDP端口53。 DNS是一个分布式数据库,命名系统采用层次的逻辑结构…

DNS和SMTP

目录 SMTP 因特网中的电子邮件 ​一个简单的例子 什么是SMTP SMTP的缺点 用SMTP传输一个邮件的过程 SMTP是如何将一个报文从发送邮件服务器传送到接收邮件服务器的。 SMTP与HTTP的区别 共同点 不同点 邮件报文格式 邮件访问协议 POP3 IMAP 基于Web的电子邮件 D…

什么是DNS?为什么选择UDP?详细的DNS解析过程?

DNS DNS1、DNS是什么?2、因特网的域名结构3、缓存(Cache)4、 DNS请求实例 DNS 1、DNS是什么? DNS ( Domain Name Systme)简单理解就是解析器、域名服务器的组合,比如大家访问知乎,会输入http://www.zhihu.com&#x…

怎么选最快dns服务器,dns设置(dns设置哪个最好最快)

dns设置(dns设置哪个最好最快)我们知道影响上网速度的因素有很多,硬件、软件等都是高速上网的基础,每个人都希望自家的网速越来快,在相同的硬件、带宽固定的情况下,如何来择优选择上网参数中的DNS服务器呢? DNS服务是网…

如何查找最近最快的dns服务器,如何可以选择适合自己的最快的DNS服务器?

应邀回答本行业问题。 使用三大运营商的宽带网络,默认的DNS就是最快的DNS。访问DNS的快慢,和DNS服务器的响应速度,以及往返时延有关。 我们访问一个DNS的时延,是DNS服务器的响应时延,加上终端到服务器的往返时延&#…

DNS 域名解析

介绍域名 网域名称(英语:Domain Name,简称:Domain),简称域名、网域。 域名是互联网上某一台计算机或计算机组的名称。 域名可以说是一个 IP 地址的代称,目的是为了便于记忆。例如&#xff0c…