React on Time Friend

Make Visual Studio Code Format Your Code with ESLint Rules

Sun, 05 Nov 2017 19:33:33 +0000

After adding ESLint to the project, everyone’s code became much cleaner. But because we weren’t familiar with ESLint rules at first, we spent a lot of time counting spaces and toggling between double and single quotes.

This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!!

Important things must be said three times!!!

Below is a method using the Visual Studio Code ESLint plugin. After configuration, your code will be automatically formatted according to ESLint rules.

Put Redux Aside, Try MobX

Sat, 04 Nov 2017 19:33:33 +0000

Mobx

Mobx is a simple, highly scalable state management tool. Like Redux, Mobx is a tool for managing state in React. However, the development experience is better than Redux.

Installation

npm install mobx --save

//For React: 
npm install mobx-react --save

A Simple Counter

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { observer } from 'mobx-react'
import { observable, computed, action } from 'MobX'

class Store {
 @observable
 count = 0;

 @action
 add() {
 this.count ++
 }
 minus() {
 this.count --
 }
}

let countStore = new Store()

@observer
class CountComponent extends Component {
 render() {
 return (
 <div>
 <h2>{ countStore.count }</h2>
 <button key="add" onClick={countStore.add}>+</button>
 <button key="minus" onClick={countStore.minus}>-</button>
 </div>
 )
 }
}

ReactDOM.render(
 <CountComponent/>,
 document.getElementById('root')
)

Using Decorators in Your React Project

Wed, 01 Nov 2017 19:33:33 +0000

Using Decorators

Currently only supports Babel/TypeScript preprocessors

Babel:

npm install babel-plugin-transform-decorators-legacy --save-dev

Add it to your .babelrc configuration file. If you don’t have a .babelrc file, create one.

{
 "presets": [
 "es2015",
 "stage-1"
 ],
 "plugins": ["transform-decorators-legacy"]
}

The plugin order is very important: transform-decorators-legacy should be the first plugin.

When using React Native, the following preset can replace transform-decorators-legacy:

{
 "presets": ["stage-2", "react-native-stage-0/decorator-support"]
}

Using Decorators in create-react-app

npm run eject

Install the related plugins:

React Series: How Parent Components Pass Props to this.props.children

Fri, 08 Sep 2017 19:33:33 +0000

Problem

When using React Router, the following pattern appears frequently:

this.props.children

But how does the parent component pass props to a component rendered this way?

Solution

We can pass props to child components like this:

{ 
 React.cloneElement(this.props.children,{A:xxx,B:xxx2,C:xxx3}) 
 
 }

React Series: Create React Native Apps with create-react-native-app

Sun, 30 Jul 2017 19:33:33 +0000

Earlier when introducing create-react-app, I briefly mentioned create-react-native-app.

This tool is actually quite fun to use. The biggest advantage is that you can debug React Native apps on your computer without installing Xcode or Android Studio.

By computer, I mean Mac, Windows, and Linux!!!!

create-react-native-app

Create React Native App Installation

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

Install the Expo app on your iPhone or Android phone. After running npm start, a QR code will appear in the console. Scan it with the Expo app, and you can start remote debugging on your phone right away. It’s very convenient, though a bit slower than desktop simulator debugging.

React Series: An Auto-Height iframe Component

Mon, 17 Jul 2017 19:33:33 +0000

When embedding iframes in a webpage, you always need to deal with the iframe height problem.

How do we do it in React?

class FullheightIframe extends Component {
 constructor() {
 super();
 this.state = {
 iFrameHeight: "0px"
 };
 }

 render() {
 return (
 <iframe
 style={ {
 width: "100%",
 height: this.state.iFrameHeight,
 overflow: "visible"
 }}
 onLoad={() => {
 const obj = ReactDOM.findDOMNode(this);
 this.setState({
 iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px"
 });
 }}
 ref="iframe"
 src={this.props.src}
 width="100%"
 height={this.state.iFrameHeight}
 scrolling="no"
 frameBorder="0"
 />
 );
 }
}

React Series: Make create-react-app Support LESS Imports

Fri, 14 Jul 2017 19:33:33 +0000

Currently, create-react-app does not support importing LESS directly. Here I’ll show you how to make it support LESS imports.

create-react-app is based on webpack, but it doesn’t expose the webpack.config files. To support LESS, you need to modify the webpack configuration. The following command exposes the configuration files:

npm run eject

After running it, you’ll see a new config folder. Inside are files like webpack.config.dev.js and webpack.config.prod.js.

Next, install less-loader

npm install less-loader less --save-dev

Then modify the webpack.config.dev.js file.

React Series - JSX

Thu, 13 Jul 2017 19:33:33 +0000

JSX is an interesting thing. It looks like a template language, but has all the capabilities of JavaScript.

In React, JSX is used to generate React elements.

After we create an APP using create-react-app:

A Piece of JSX Code

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

class App extends Component {
 render() {
 return (
 <div className="App">
 I am an APP
 </div>
 );
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

We Can Embed Expressions in JSX

 //Insert data 
 const data = {name:"Xiaoming"}
 const ele = <div>My name is: {data.name} </div>;

 //Calculate
 const ele1 = <div> {1+1} </div>;

 //Ternary expression
 const ele2 = <div> {true?"I am Xiaoming":"I am not Xiaoming"} </div>;

 //In attributes
 const ele3 = <img src={date.xxx} />;

Because JSX is compiled by Babel, it itself is an object.

React Series: Starting from a Scaffold - create-react-app

Wed, 12 Jul 2017 19:33:33 +0000

The React ecosystem is incredibly vast. If beginners want to directly experience the charm of React, here is an official scaffold. The usage is very simple.

create-react-app

Basic Usage

Install

npm install -g create-react-app

Create an app

create-react-app my-app
cd my-app/

File structure:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
 └── App.css
 └── App.js
 └── App.test.js
 └── index.css
 └── index.js
 └── logo.svg
 └── registerServiceWorker.js

Start the app: