React 教程

 学习主要来源 React 教程 | 菜鸟教程 

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

React 特点

  • 1.声明式设计 −React采用声明范式,可以轻松描述应用。

  • 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

  • 3.灵活 −React可以与已知的库或框架很好地配合。

  • 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

  • 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

  • 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

React 安装

通过 npm 使用 React

国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npmmirror.com

npm config set registry https://registry.npmmirror.com

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

npm install -g create-react-app

 

处理 tar@2.2.2 警告: 由于 tar@2.2.2 警告是由 create-react-app 的依赖引起的,直接操作可能较为复杂,因为它涉及到包的依赖链。通常,最佳做法是检查是否有 create-react-app 的更新版本,或者相关依赖库的更新版本,这些版本可能已解决了使用过时 tar 包的问题。

关于 npm fundnpm fund 命令显示的信息是关于你项目依赖的开发者寻求资金支持的信息。这提供了一个机会去支持那些对你的项目有贡献的开源软件开发者。这些信息并不直接关联到 tar@2.2.2 的警告,但它给出了哪些包及其维护者可能需要经济支持的信息。

建议

  • 如果你仍然想在本地安装 create-react-app,可以忽略这个 tar@2.2.2 的警告,因为它不太可能影响开发环境的安全性。然而,保持警惕并定期检查是否有可用的安全更新是一个好习惯。
  • 考虑使用 npx create-react-app my-app-name 命令来创建新的 React 应用,这样可以避免将 create-react-app 安装到你的本地或全局环境中,同时也能确保你使用的是最新版本。
  • 关注 create-react-app 和其他相关依赖的更新,以确保你的开发环境尽可能安全。

 npx create-react-app my-app-name


 cd my-app-name

npm start

 

启动成功

项目的目录结构如下:

my-app/README.mdnode_modules/package.json.gitignorepublic/favicon.icoindex.htmlmanifest.jsonsrc/App.cssApp.jsApp.test.jsindex.cssindex.jslogo.svg

 

manifest.json 指定了开始页面 index.html,一切的开始都从这里开始,所以这个是代码执行的源头。

尝试修改 src/App.js 文件代码:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';class App extends Component {render() {return (<div className="App"><div className="App-header"><img src={logo} className="App-logo" alt="logo" /><h2>欢迎来到菜鸟教程</h2></div><p className="App-intro">你可以在 <code>src/App.js</code> 文件中修改。</p></div>);}
}export default App;

 

src/index.js 是一个入口文件,我们可以尝试直接修改 src/index.js 文件代码: 

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Hello World!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));

 

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

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

相关文章

学习笔记-华为IPD转型2020:2,IPD的核心思想

2&#xff0c;IPD的核心思想 以客户为导向&#xff1a;应该开发什么产品&#xff1f; 应该开发哪些产品&#xff1f;华为的“基本法”规定&#xff0c;其目的是为客户服务&#xff08;Huawei&#xff0c;1998&#xff09;。然而&#xff0c;在IPD实施后&#xff0c;对这种以客…

如何在mac下使用homebrew安装 mysql?

安装 Homebrew&#xff1a; 如果尚未安装 Homebrew&#xff0c;可以通过以下命令在终端中安装&#xff1a; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"更新 Homebrew&#xff1a; 运行以下命令以确保 Homebr…

C#/.Net 多线程下载m3u8视频

C#/.Net 多线程下载m3u8视频 下载网络文件方法下载m3u8 .HttpGet() 是我自己封装的HTTP请求方法 下载网络文件方法 /// <summary> /// 下载网络文件 /// </summary> /// <param name"url">文件地址</param> /// <param name"savePa…

视频监控/云存储EasyCVR视频融合平台设备增删改操作不生效是什么原因?

国标GB28181协议EasyCVR安防平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;平台支持7*24小时实时高清视频监控&#xff0c;能同时播放多路监控视频流&#xf…

安卓kotlin面试题 81-90

81. 简述 Kotlin 中泛型型变-协变、逆变、不变 ?Kotlin 中泛型引入了 in 和 out:逆变(In) 如果你的类是将泛型对象作为函数的参数,那么可以用 in:interface Consumer { fun consume(item: T) } 可以称其为 consumer class/interface,因为其主要是消费指定泛型对象…

手机App防沉迷系统C卷(JavaPythonC++Node.jsC语言)

智能手机方便了我们生活的同时,也侵占了我们不少的时间。"手机App防沉迷系统"能够让我们每天合理的规划手机App使用时间,在正确的时间做正确的事。 它的大概原理是这样的: 1、在一天24小时内,可注册每个App的允许使用时段; 2、一个时段只能使用一个App,举例说明…

[linux] socket 非阻塞模式使用注意事项

在使用 socket 的一些 api 的时候&#xff0c;默认情况下都是阻塞模式。比如使用 tcp socket 时&#xff0c;客户端调用 connect() 创建连接&#xff0c;connect() 返回的时候要么是创建连接成功了&#xff0c;要么是出现了错误&#xff0c;反正 connect() 返回的时候结果是确定…

Hadoop面经

hadoop原理 请说下 HDFS 的组织架构描述HDFS的读写流程HDFS 在读取文件的时候&#xff0c;如果其中一个块突然损坏了怎么办HDFS 在上传文件的时候&#xff0c;如果其中一个 DataNode 突然挂掉了怎么办 NameNode 在启动的时候会做哪些操作Secondary NameNode 了解吗&#xff0c;…

get命令使用提交代码

当你想要通过Git提交代码时&#xff0c;以下是一个详细的案例&#xff0c;包括从创建更改到推送到远程仓库的整个过程&#xff1a; 首先&#xff0c;确保你已经在本地仓库目录中进行了需要的更改。 添加更改到暂存区&#xff1a; git add . 这会将所有更改添加到Git的暂存区&…

微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框

目录 1. loading 提示框 1. 1 wx.showLoading()显示loading提示框 1.2 wx.hideLoading()关闭 loading 提示框 2. showModal 模态对话框 3. showToast 消息提示框 小程序提供了一些用于界面交互的 API&#xff0c;例如&#xff1a;loading 提示框、消息提示框、模态对…

高效的ElasticSearch Java API - my-elasticsearch-starter

ES Java Api有很多种&#xff0c;本文主要是基于Spring Boot进行封装的&#xff0c;为什么选择Spring Boot&#xff0c;可以看往期文章 Elasticsearch入门必读指南&#xff1a;到底选择哪个ES版本更合适 。 Spring Boot现在也是Java生态中主流的开发框架使用最广泛&#xff0c;…

信息系统项目管理师011:数字政府(1信息化发展—1.4数字中国—1.4.2数字政府)

文章目录 1.4.2 数字政府1.数字新特征2.主要内容 1.4.2 数字政府 信息技术的革新改变了人们传统的工作、学习、生活和娱乐方式&#xff0c;同时对政府提供信息服务&#xff0c;公民参与政府民主决策的方式提出了挑战。利用信息技术改进政府工作及服务的效率&#xff0c;形成新的…

python学习1:csv模块、time模块、random、jieba、worldcloud、pycharm的虚拟环境认识、black格式化文件

标准库与第三方库 模块&#xff08;modules&#xff09;&#xff1a;是包含python函数和变量的文件&#xff0c;名称符合Python标识符要求&#xff0c;并使用.py后缀 包&#xff08;package&#xff09;&#xff1a;是包含其他模块、包的文件夹。名称符合Python标识符要求&am…

安装配置HBase

HBase集群需要整个集群所有节点安装的HBase版本保持一致&#xff0c;并且拥有相同的配置&#xff0c;具体配置步骤如下&#xff1a; 1. 解压缩HBase的压缩包 2. 配置HBase的环境变量 3. 修改HBase的配置文件&#xff0c;HBase的配置文件存放在HBase安装目录下的conf中 4. 首…

蓝桥杯每日一题 走迷宫bfs 超超详细解释!!!

昨天学习了bfs的基本概念&#xff0c;今天来做一道经典习题练练手吧&#xff01; bfs常用的两类题型 1.从A出发是否存在到达B的路径(dfs也可) 2.从A出发到B的最短路径&#xff08;数小:<20才能用dfs&#xff09; 遗留的那个问题的答案- 题目&#xff1a;走迷宫 答案&…

Java爬虫-获取数据的方式之一

目录 一、jsoup的使用 1.概述 2.主要功能 3.快速入门 4.数据准备 二、Selenium 1.概述 2.使用 三、Selenium配合jsoup获取数据 四、爬虫准则 五、Seleniumjsoupmybatis实现数据保存 1.筛选需要的数据 2.创建一个表&#xff0c;准备存储数据 手写&#xff1f;不存在…

基于STM32的电动车防盗器设计

1.项目需求 点击遥控器 A 按键&#xff0c;系统进入警戒模式&#xff0c;一旦检测到震动&#xff08;小偷偷车&#xff09;&#xff0c;则喇叭发出声响报警&#xff0c; 吓退小偷。 点击遥控器 B 按键&#xff0c;系统退出警戒模式&#xff0c;再怎么摇晃系统都不会报警&#…

正则表达式中元字符的使用

// 转义字符(\ 特定的普通字符)&#xff0c;把这些特定的普通字符转义为具有特殊含义的字符&#xff0c; // \\字符(\ \) &#xff0c;把转义字符 \ 转义为普通的字符 \&#xff0c;正则表达式元字符中若含有\&#xff0c;所以用\\表示是元字符自己的含义&#xff0c;而不是…

【DevOps实战之k8s】使用Prometheus和Grafana监控K8S集群

【DevOps实战之k8s】使用Prometheus和Grafana监控K8S集群 目录 【DevOps实战之k8s】使用Prometheus和Grafana监控K8S集群系统架构Kubernetes集群指标抓取指标可视化警告PromQL示例按命名空间统计集群中的Pod数按命名空间重启Pod未就绪的PodCPU过度使用Memory过度使用健康的集群…

Qt/C++音视频开发69-保存监控pcm音频数据到mp4文件/监控录像/录像存储和回放/264/265/aac/pcm等

一、前言 用ffmpeg做音视频保存到mp4文件&#xff0c;都会遇到一个问题&#xff0c;尤其是在视频监控行业&#xff0c;就是监控摄像头设置的音频是PCM/G711A/G711U&#xff0c;解码后对应的格式是pcm_s16be/pcm_alaw/pcm_mulaw&#xff0c;将这个原始的音频流保存到mp4文件是会…