Reactjs学习笔记
- 本篇是关于React的简介
ReactJS是Facebook推出的一款前端框架,2013年开源,提供了一种函数式编程思想,拥有比较健全的文档和完善的社区,在React16的版本中对算法进行了革新,称之为React Fiber。
- 开发环境搭建
需要nodeJS解析器,以及npm(node的包管理工具) - 如何引用React
1. 使用.js来引入(js文件引入容易遗忘,不推荐)
2. 借助脚手架工具( 方便维护,推荐)
react当前最新版本是18,16和17版本基本推荐Create-react-app框架来搭建项目,在最新的18版本中,则推荐了NextJS, Remix, Gatsby,Expo(原生应用)这几个框架来搭建项目
我们可以来看一下用不同框架搭建的项目的工程目录
1. 这是用Create-react-app搭建的

其中 node_modules 是当前项目用到的所有依赖模块包
public文件夹中是一些静态文件( image / font / ico,html)
src 文件夹中是我们的源代码文件(程序入口文件index.js ,js和css )
package.json 文件对当前脚手架安装的项目有介绍,比如项目名称,项目依赖
yarn.lock 文件对项目依赖的安装包做了限制( 轻易不要动)
gitignore是当你用Git版本控制工具时,上传代码需要忽略的一些文件
2. 这是用NextJS搭建的
Reactjs学习笔记的更多相关文章
- ReactJS学习笔记(三)
需要注意的问题: 1.组件名称开头字母一定要大写.(PS:原因是 React 的 JSX 里约定分别使用首字母大.小写来区分本地组件的类和 HTML 标签.) 2.this.props.childre ...
- ReactJS学习笔记(二)
1.Ajax: componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI. /*demo1*/ var Demo1Box=Rea ...
- ReactJS学习笔记(一)
1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script> &l ...
- reactjs 学习笔记
1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start
- 【原】redux异步操作学习笔记
摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- React入门基础(学习笔记)
这篇博客是我通过阅读React官方文档的教程总结的学习笔记,翻译可能存在误差,如有疑问请参见http://reactjs.cn/react/docs/tutorial.html . 一.所需文件 在编 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
随机推荐
- RDIFramework.NET开发框架WinForm版新增编码管理
1.概述 编码管理是企业管理和信息化建设过程中一个至关重要的环节.各信息化系统是通过编码来标识业务对象的,统一的编码方案可以作为各系统的通话语言,也可以为信息化系统的集成提供便利.建设数据编码的基本原 ...
- OpenAI的离线音频转文本模型 Whisper 的.NET封装项目
whisper介绍 Open AI在2022年9月21日开源了号称其英文语音辨识能力已达到人类水准的Whisper神经网络,且它亦支持其它98种语言的自动语音辨识. Whisper系统所提供的自动语音 ...
- Marior去除边距和迭代内容矫正用于自然文档矫正
一.简要介绍 本文简要介绍了论文" Marior: Margin Removal and Iterative Content Rectification for Document Dewar ...
- [Pytorch框架] 1.3、张量
文章目录 PyTorch是什么? Tensors(张量) NumPy 转换 CUDA 张量 PyTorch是什么? 基于Python的科学计算包,服务于以下两种场景: 作为NumPy的替代品,可以使用 ...
- Python-faker的简单使用
前言: faker是一个开源的python库,安装完成后只需要调用Faker库,就可以帮助我们创建需要的数据. 一.安装 1.执行如下命令安装 pip3 install faker 2.进入File ...
- 一文讲透 RocketMQ 消费者是如何负载均衡的
RocketMQ 支持两种消息模式:集群消费( Clustering )和广播消费( Broadcasting ). 集群消费:同一 Topic 下的一条消息只会被同一消费组中的一个消费者消费.也就是 ...
- 16.ReentrantLock全解读
大家好,我是王有志,欢迎和我聊技术,聊漂泊在外的生活.快来加入我们的Java提桶跑路群:共同富裕的Java人. 经历了AQS的前世和今生后,我们已经知道AQS是Java中提供同步状态原子管理,线程阻塞 ...
- MySQL 中读写分离数据延迟
MySQL 中读写分离可能遇到的问题 前言 读写分离的架构 基于客户端实现读写分离 基于中间代理实现读写分离 MySQL 中如何保证主从数据一致 循环复制问题 主从同步延迟 主从同步延迟的原因 主从延 ...
- 聊一聊 dotnet-trace 调查 lock锁竞争
一:背景 1. 讲故事 最近在分析一个 linux 上的 dump,最后的诱因是大量的lock锁诱发的高频上下文切换,虽然问题告一段落,但我还想知道一点信息,所谓的高频到底有多高频?锁竞争到底是一个怎 ...
- Grafana系列-统一展示-6-Zabbix仪表板
系列文章 Grafana 系列文章 Notes: 关于 Grafana系列-统一展示-6-Zabbix 数据源, 其实已经在之前的文章: 使用 Grafana 统一监控展示 - 对接 Zabbix 里 ...