zl程序教程

React.js 小书

  • 不用React Vue,只用原生JS,如何开发单页面应用?

    不用React Vue,只用原生JS,如何开发单页面应用?

    背景之前我发布了文章《我们用48h,合作创造了一款Web游戏:Dice Crush,参加国际赛事》,介绍了我们一起做的游戏。本文分享一项技术方案,正是我开发上述游戏时用到的:不用React Vue,只用原生JS,如何开发单页面应用?什么是单页面应用单页面应用(Single-Page Application)是个相对古老的传统的多页面应用(Multi-Page Application)的名词。以前我

    日期 2023-06-12 10:48:40     
  • 【taro react】对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此警告。

    【taro react】对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig“ 或 “jsconfig“ 中设置 “experimentalDecorators“ 选项以删除此警告。

    1. 报错对修饰器的实验支持功能在将来的版本中可能更改。在 "tsconfig" 或 "jsconfig" 中设置 "experimentalDecorators" 选项以删除此警告。复制2. 报错截图3. 解决办法打开设置 搜索【experimentalDecorators】 勾选【禁用experimentalDecorators】

    日期 2023-06-12 10:48:40     
  • 项目实战:在线报价采购系统(React +SpreadJS+Echarts)

    项目实战:在线报价采购系统(React +SpreadJS+Echarts)

    小伙伴们对采购系统肯定不陌生,小到出差路费、部门物资采购;大到生产计划、原料成本预估都会涉及到该系统。管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助。但是对于大多数制造业企业而言,具有企业级整体视角的管理人才仍然难得,系统化的思考方式、解决复杂业务管理问题的方法论也并不是一朝一夕就能量产的。人才技术不够,软件硬件来凑。今天我们就来为大家讲讲如何使用纯前端

    日期 2023-06-12 10:48:40     
  • React学习笔记(二)—— JSX、组件与生命周期

    React学习笔记(二)—— JSX、组件与生命周期

    一、JSX1.1、什么是JSX?JSX = JavaScript XML,这是React官方发明的一种JS语法(糖)概念:JSX是 JavaScript XML(HTML)的缩写,表示在 JS 代码中书写 HTML 结构设想如下变量声明:const element = <h1>Hello, world!</h1>;复制这个有趣的标签语法既不是字符串也不是 HTML。它被称为

    日期 2023-06-12 10:48:40     
  • React.js基础知识 函数组件和类组件(二)

    React.js基础知识 函数组件和类组件(二)

    生命周期 1. 生命周期函数 【调取组件】 constructor 初始化属性状态 componentWillMount 第一次渲染之前 render 渲染 componentDidMount 第一次渲染之后 【组件重新渲染:内部状态改变、传递给组件的属性改变】 状态改变: shouldComponentUp

    日期 2023-06-12 10:48:40     
  • react源码分析:babel如何解析jsx

    react源码分析:babel如何解析jsx

    同作为MVVM框架,React相比于Vue来讲,上手更需要JavaScript功底深厚一些,本系列将阅读React相关源码,从jsx -> VDom -> RDOM等一些列的过程,将会在本系列中一一讲解工欲善其事,必先利其器经过多年的发展,React已经更新了大版本16、17、18,本系列主要讲的是 version:17.0.2,在讲这个版本之前,我们先看一看在babel的编译下,每个

    日期 2023-06-12 10:48:40     
  • 配置无须导入react就可以使用jsx

    配置无须导入react就可以使用jsx

    要求react版本>17ts版本>4.1配置babel.config.js1module.exports = { 2 presets: [ 3 [ 4 "@babel/preset-react", 5 { 6 runtime: "automatic", 7 }, 8 ], 9 ], 10

    日期 2023-06-12 10:48:40     
  • Angular与React、Vue.js的对比

    Angular与React、Vue.js的对比

    在当前的主流 Web 前端框架中,Angular、React、Vue.js 是备受瞩目的3个框架,它们都是组件化开发框架。 从市场占有率来看 Angular 与 React 的历史更长,而 Vue.js 是后起之秀,所以 Angular 与 React 都比 Vue.js 的市场占有率更高。 但需要注意的是,Vue.js 的用户增长速度很快,有迎头赶上之势。 从支持度来看 Angular

    日期 2023-06-12 10:48:40     
  • 一年之后,React.js 许可协议再起争端

    一年之后,React.js 许可协议再起争端

    在 2016 年 7 月,Facebook 公司的 React.js 开源许可协议曾引起激烈争论。一年过后,该协议再次成为开源社区的头条新闻。 React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库,起源于 Facebook 的内部项目,用来架设 Instagram 的网站。 2013 年 5 月,Facebook 将 React.js 开源。 201

    日期 2023-06-12 10:48:40     
  • 收集的React.JS资料

    收集的React.JS资料

    主页 http://facebook.github.io/react/ https://github.com/facebook/react   中文站 http://www.reactjs.cn/ https://github.com/reactjs-cn/react-docs http://react-china.org/ http://nav.react-china

    日期 2023-06-12 10:48:40     
  • react入门-jsx

    react入门-jsx

    相信前端的小伙伴们对react都不陌生了,今天介绍一下它的核心语言jsx(JavaScript XML) 直接以注释的方式向大家直观的介绍吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx-arr</title&g

    日期 2023-06-12 10:48:40     
  • [React] Advanced Epic RxJS pattern with testing

    [React] Advanced Epic RxJS pattern with testing

    Epic: import { ofType } from 'redux-observable' import { of, concat, merge, fromEvent, race, forkJoin } from 'rxjs' const buildAPI = (apiBase, perPage, searchContent) => `${apiBase}?beer_name=

    日期 2023-06-12 10:48:40     
  • [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose

    [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose

    This lesson takes the concept of render props and migrates it over to streaming props by keeping the same example and simple refactoring the Togglecomponent which handles the render prop.  

    日期 2023-06-12 10:48:40     
  • [Reactive Programming] RxJS dynamic behavior

    [Reactive Programming] RxJS dynamic behavior

    This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm for programming. See how reactive programming helps you understand the dynamic behavior of a value ev

    日期 2023-06-12 10:48:40     
  • [React] React Fundamentals: JSX Deep Dive

    [React] React Fundamentals: JSX Deep Dive

    "JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."   Input: React.createClass({ render

    日期 2023-06-12 10:48:40     
  • [React + webpack] hjs-webpack

    [React + webpack] hjs-webpack

    You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features.    webpack.confi

    日期 2023-06-12 10:48:40     
  • Reactjs-JQuery-Vuejs-Extjs-Angularjs对比

    Reactjs-JQuery-Vuejs-Extjs-Angularjs对比

    前端越来越混乱了,当然也可以美其名曰:繁荣。 当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? 那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所适从 = =! 本篇拿一注册功能作为样本,使用各种框架去实现功能,从而对比各种方式的优劣。 JQuery div div input type="text" id="nameIpt"/ /div

    日期 2023-06-12 10:48:40     
  • [Recompose] Stream Props to React Children with RxJS

    [Recompose] Stream Props to React Children with RxJS

    You can decouple the parent stream Component from the mapped React Component by using props.children instead. This process involves mapping the stream to React’s cloneElement with

    日期 2023-06-12 10:48:40     
  • [Recompose] Stream a React Component from an Ajax Request with RxJS

    [Recompose] Stream a React Component from an Ajax Request with RxJS

    Loading data using RxJS is simple using Observable.ajax. This lesson shows you how to take the ajax response and pass it along the stream to use as props in a React Component.   import Rea

    日期 2023-06-12 10:48:40     
  • [RxJS] Reactive Programming - Clear data while loading with RxJS startWith()

    [RxJS] Reactive Programming - Clear data while loading with RxJS startWith()

    In currently implemention, there is one problem, when the page load and click refresh button, the user list is not immediatly clean up,it is cleared after the new data come in.   So two things w

    日期 2023-06-12 10:48:40     
  • [RxJS] Reactive Programming - Why choose RxJS?

    [RxJS] Reactive Programming - Why choose RxJS?

    RxJS is super when dealing with the dynamic value.    Let's see an example which not using RxJS: var a = 4; var b = a * 10; console.log(b); // 40 a = 5; console.log(b); // 40 So you cha

    日期 2023-06-12 10:48:40     
  • [React Testing] JSX error diffs -- expect-jsx library

    [React Testing] JSX error diffs -- expect-jsx library

    When writing React component tests, it can be hard to decipher the error diffs of broken tests, since they are just the final objects that React uses under the hood. There are some nice libraries tha

    日期 2023-06-12 10:48:40     
  • [Reactive Programming] RxJS dynamic behavior

    [Reactive Programming] RxJS dynamic behavior

    This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm for programming. See how reactive programming helps you understand the dynamic behavior of a value ev

    日期 2023-06-12 10:48:40     
  • [React + webpack] hjs-webpack

    [React + webpack] hjs-webpack

    You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features.    webpack.confi

    日期 2023-06-12 10:48:40     
  • [React] Linting React JSX with ESLint (in ES6)

    [React] Linting React JSX with ESLint (in ES6)

    ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the eslint -

    日期 2023-06-12 10:48:40     
  • [React] React Fundamentals: Precompile JSX

    [React] React Fundamentals: Precompile JSX

    The JSX Transformer library is not recommended for production use. Instead, you'll probably want to precompile your JSX into JavaScript.   Install: npm install react-tools -g  

    日期 2023-06-12 10:48:40     
  • [React] React Fundamentals: JSX Deep Dive

    [React] React Fundamentals: JSX Deep Dive

    "JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."   Input: React.createClass({ render

    日期 2023-06-12 10:48:40     
  • [译]利用flux来构建reactjs项目

    [译]利用flux来构建reactjs项目

    原文地址 首先我不想浪费大家的时间在flux的细节上,关于它的详情,可以点击Facebook flux site,我想告诉大家的是,利用flux与react的结合可以更好的处理业务交互以及视图同步. 一切源于状态 在同一个页面上,状态可以理解为它上面的一个checkbox,随着checkbox显中或者不显中,状态都会不一样,不用去关心状态改变时要做什么,而是去关心状态改变跟UI交互的方式.

    日期 2023-06-12 10:48:40     
  • React.js 应用  UI 框架

    React.js 应用 UI 框架

    http://www.iteye.com/news/32408

    日期 2023-06-12 10:48:40     
  • vscode中reactjs插件的安装

    vscode中reactjs插件的安装

    ES7+ React/Redux/React-Native snippets

    日期 2023-06-12 10:48:40     
  • Reactjs hook详解:useEffect()第二个参数的传值有以下4种情况,决定页面render的时机

    Reactjs hook详解:useEffect()第二个参数的传值有以下4种情况,决定页面render的时机

    Reactjs hook详解:useEffect()第二个参数的传值有以下4种情况,决定页面render的时机 1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行us

    日期 2023-06-12 10:48:40