Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these compon…

上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Component来快速创建组件.例如下面代码所示: import React from 'react'; const Button = ({ day, increment }) => { return ( <div> <button onClick={increment}>Today i…

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the keypr…

We sometimes just want to return a couple of elements next to one another from a React functional component, without adding a wrapper component which only purpose would be to wrap elements that we want to render. In this one minute lesson we are goin…

In this lesson we'll look at React PowerPlug's <List /> component by refactoring a normal class component with state and handlers to a functional component powered by React PowerPlug. import React from "react"; import { render } from "…

A new Higher Order Component (HOC) was recently released in React v16.6.0 called React.memo. This behavior of the HOC is similar to what you’d get when using React.PureComponent or shouldComponentUpdate in a React Class Component. However, now with t…

React Creating Elements All In One https://reactjs.org/docs/react-api.html#creating-react-elements https://reactjs.org/docs/react-without-jsx.html createElement() createFactory() JSX https://reactjs.org/docs/introducing-jsx.html React API UMD + ESM r…

We can use 'displayName' on component to change its component tag in dev tool: import React from 'react'; import {FooterLink} from '../containers' export const Footer = () => ( <p> Show: {' '} <FooterLink filter="all">All</Foot…

先看两段代码: export class ywg extends PureComponent { …… render() { return ( …… ); } } export class ywg extends Component { …… render() { return ( …… ); } } PureComponent VS Component Stateless components may also be referred to as Pure Components, or eve…

We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them. Navigate to WebView component: openPage(url){ this.props.na…