In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated. import React from "react"; im…

In this lesson, we'll use next to create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you would expect in the client. We'll use the routing capa…

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we'll get back…

Got the idea form this lesson. Not sure whether it is the ncessary, no othere better way to handle it. Have a TodoList component, every time types in NewTodo input fields, will trigger the re-rendering for all components. import React, { useState, us…

本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发(人少 + 应用要求低),不过确实也有很多的性能瓶颈:今天笔者还特地邮件问了 Expo Support 有关添加微信.百度地图等成为官方预置库的计划,得到的回复是可能两三个月内会先将微信集成进来,很期待未来 Expo 在国内的发展. 利用 Create React Native App 快速创建 R…

Facebook 本身有提供 Test Utilities,但由于不够好用,所以目前主流开发社群比较倾向使用 Airbnb 团队开发的 enzyme,其可以与市面上常见的测试工具(Mocha.Karma.Jest 等)搭配使用.其中 Jest 是 Facebook 所开发的单元测试工具,其主要基于 Jasmine 所建立的测试框架.Jest 除了支援 JSDOM 外,也可以自动模拟 (mock) 透过 require() 进来的模组,让开发者可以更专注在目前被测试的模组中. Component…

component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 遇到自己定义的component Welcom,React会将它的属性(name)作为对象传递给组建Welcom,即{…

react slot component with args how to pass args to react props child component https://codesandbox.io/s/react-slot-component-with-args-n11d1 OK https://codesandbox.io/s/react-slot-component-with-args-idhib function component, pass slot child componen…

react hooks & component will unmount & useEffect & clear up useEffect & return === unmounted import React, { // Component, useState, // useRef, useEffect, } from 'react'; import { getTrackPicsIdImg } from '@/services'; import "./index…

The useRef is a hook for creating values that persist across renders. In this lesson we'll learn how to use the useRef hook to measure the width of an element as it changes. import React, { useState, useEffect, useRef } from "react"; import Reac…