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. 整体架构图 ...
随机推荐
- Azure DevOps(一)基于 Net6.0 的 WPF 程序如何进行持续集成、持续编译
一,引言 我们是否正在为如何快速的编译.部署客户端应用程序而烦恼?这也是博主最近遇到的问题.目前博主所在公司主要做项目级的定制化开发,多以 C/S 架构的 WPF 程序为主,每次到了协助开发团队给实施 ...
- fzy&czn生日赛t1 CZN
fzy&czn生日赛t1 CZN 膜拜hybb首杀 目录 fzy&czn生日赛t1 CZN 题目背景 题目描述 分析 my code wnag's code 题目 题目背景 有一天,c ...
- API网关:开源Apinto网关-上游服务篇(二)
功能介绍 服务发现是一种分布式系统中的关键技术,它能够帮助应用程序动态地发现和访问依赖的服务实例,解决了服务实例分布在不同节点上的问题.通过服务发现,应用程序可以快速找到需要调用的服务实例的位置和元数 ...
- HTML中script 标签中的那些属性
在HTML中, <script> 标签用于嵌入或引用JavaScript代码. 在 <script> 标签中,有两个属性可以用来控制脚本的加载和执行方式: async 和 de ...
- 深入理解python虚拟机:黑科技的幕后英雄——描述器
深入理解python虚拟机:黑科技的幕后英雄--描述器 在本篇文章当中主要给大家介绍一个我们在使用类的时候经常使用但是却很少在意的黑科技--描述器,在本篇文章当中主要分析描述器的原理,以及介绍使用描述 ...
- 2023-03-10:YUV420P像素数据编码为JPEG图片,请用go语言实现。
2023-03-10:YUV420P像素数据编码为JPEG图片,请用go语言实现. 答案2023-03-10: 方法一.使用 github.com/moonfdd/ffmpeg-go 库,基于雷霄骅的 ...
- 2021-07-19:给定一个正数N,比如N = 13,在纸上把所有数都列出来如下: 1 2 3 4 5 6 7 8 9 10 11 12 13,可以数出1这个字符出现了6次,给定一个正数N,如果把1
2021-07-19:给定一个正数N,比如N = 13,在纸上把所有数都列出来如下: 1 2 3 4 5 6 7 8 9 10 11 12 13,可以数出1这个字符出现了6次,给定一个正数N,如果把1 ...
- 这10个Lambda表达式必须掌握,简化你的代码,提高生产力
Lambda 表达式(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lambda abstraction),是一个匿名 ...
- adb server version (31) doesn't match this client (41); killing...
使用用 adb devices 提示如下错误 C:\Users\Lenovo>adb devices adb server version (31) doesn't match this cli ...
- NIST SP 800-37 Risk Management Framework for Information Systems and Organizations A System Life Cycle Approach for Security and Privacy
NIST SP 800-37 Risk Management Framework for Information Systems and Organizations A System Life Cyc ...