React.js
文章平均质量分 94
React.js系列
Vam的金豆之路
开源 JavaScript 库 Strve.js 作者
展开
-
正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp
前言今天,篇幅可能比较短,主要介绍最近这段时间开发的一款脚手架——FastReactApp。这是一款基于Parcel2 开发的React.js项目脚手架。虽然比不上正在前端界火爆的Vite以及占据稳定地位的CreateReactApp,但是基本的项目开发还是可以的。下面我将介绍FastReactApp几点特征:对JS、CSS、HTML、文件资产等的现成支持—不需要插件。使用dynamic import()语法,它分割输出包,以便您只在初始加载时加载所需的内容。当您在开发过程中进行更改时,它会自动原创 2021-04-24 22:38:29 · 383 阅读 · 0 评论 -
你是否有一个梦想?用JavaScript[vue.js、react.js......]开发一款自定义配置视频播放器
前言沉寂了一周了,打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器,为什么会有如此想法?是因为之前看一些学习视频网站时,看到它们做的视频播放器非常Nice!于是,就打算抽空开发一款属于自己的视频播放器。话不多说,一起来实战吧!项目展示(这只是一张图片哦~)这张图就是我们的成品,还等什么?赶紧来实战吧!实战我会把完整源码放在github上,欢迎来star,地址在文末。首先,我们会使用最原生的JavaScript来实现,老大哥肯定要打头阵啊!一、JavaScripti原创 2020-12-21 01:18:35 · 465 阅读 · 0 评论 -
React.js中JSX的原理与关键实现
在开始开发之前,我们需要创建一个空项目文件夹。安装初始化npm init -y2.安装webpack相关依赖npm install webpack webpack-cli -D安装babel-loader相关依赖npm install babel-loader @babel/core @babel/preset-env -D安装jsx支持依赖npm install @babel/plugin-transform-react-jsx -D配置在根目录下创建main原创 2020-11-30 00:29:07 · 506 阅读 · 0 评论 -
自己实现一个自定义React项目脚手架「ReactCli」
前言首先为什么想到自己实现一个React脚手架呢?是因为之前刚接触create-react-app时,觉得不太灵活。虽然文件目录很清晰,但是还是觉得不如VueCLI的可以自定义配置更加灵活。当然React官方提供了可以暴露配置的命令npm run eject,说再多不如自己实现一个。脚手架一览...原创 2020-09-13 15:47:48 · 1815 阅读 · 0 评论 -
React项目中 使用 CSS Module
yarn add react-app-rewired@2.0.2-next.0 --save-dev //这个版本比较稳定/* package.json */"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom",}安装css-modules包,可根据自己喜欢的预处理语言进行安原创 2020-06-29 13:54:20 · 1184 阅读 · 0 评论 -
react native 0.6x 在创建项目时,CocoaPods 的依赖安装步骤卡解决方案
前言你需要做两件事gem换源pod repo 换源实战如果你已经成功安装了CocoaPods。那么这里你需要卸载它。gem换源1、 卸载CocoaPods查看gem安装的东西gem list下面一般就是gem安装的一些依赖。*** LOCAL GEMS ***activesupport (4.2.11.1)atomos (0.1.3)bigdecimal (1.2.8)CFPropertyList (3.0.1, 2.2.8)claide (1.0.3)cocoapo原创 2020-06-24 10:16:30 · 1571 阅读 · 2 评论 -
使用React.js写一个类似单选框与复选框的功能
单选框<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src.原创 2020-06-19 16:45:49 · 960 阅读 · 0 评论 -
React关于constructor与super(props)之间的相爱相杀
我们先把菜鸟教程的一段代码拿过来分析一下。下面这段代码是用了将生命周期方法添加到类中实现时钟效果。// 将生命周期方法添加到类中class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()};//初始化 }//开始 co...原创 2019-08-06 11:00:06 · 20391 阅读 · 2 评论 -
关于react的props你需要知道的一个简单方法
注意一点:函数名必须大写function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {props.date.toLocaleTimeString()}.</h2>//这里的toLocaleTimeStriing可以...原创 2018-12-22 14:36:38 · 775 阅读 · 7 评论 -
React基础中的单一标签包裹的问题
1.先上一段代码:html部分:<div id="example"></divjs部分: function HelloMessage(props1) { return (<h1>Hello {props1.name}!</h1>);}const element = <HelloMessage name="maomin"/&原创 2018-12-22 14:28:13 · 2403 阅读 · 33 评论