Application code parsing of es6 in react and es6react code parsing

Application code parsing of es6 in react and es6react code parsing

Whether React or React-native, facebook officially recommends ES6 syntax. If ES6 is not used in projects, some problems may occur during the conversion, if there is no time for the system to learn ES6, it is enough to pay attention to some common writing methods, which will bring great convenience to our development, you will experience the extremely concise ES6 syntax. The Application of es6 in react is described as follows:

import React,{Component} from 'react';class RepeatArrayextends Component{ constructor() {  super(); } render(){  const names = ['Alice', 'Emily', 'Kate'];  return (   <div>   {    names.map((name) =>{return <div>Hello, {name}!</div>;} )   }   </div>);}}export default RepeatArray;

II. Implementation of ol and li

import React,{Component} from 'react';class RepeatLiextends Component{ render(){  return (   <ol>   {    this.props.children.map((child)=>{return <li>{child}</li>})   }   </ol>);}}class RepeatArray extends Component{constructor() {super();}render(){return (<div><RepeatLi><span>hello</span>    <span>world</span></RepeatLi>   </div>);}}export default RepeatArray;

3. obtain data from the server

import React,{Component} from 'react';class UserGistextends Component{ constructor(){  super();  this.state={   username:'',   lastGistUrl:''  } } componentWillMount(){  $.get(this.props.source, function(result){   var lastGist = result[0];   //if (this.isMounted()) {    this.setState({     username: lastGist.owner.login,     lastGistUrl: lastGist.html_url    });   //}  }.bind(this)); } render(){  return(   <div>    {this.state.username} ..    <a href={this.state.lastGistUrl} >here</a></div>  ); }}class RepeatArrayextends Component{ constructor() {  super(); } render(){  return (   <div>   <UserGist source="https://api.github.com/users/octocat/gists" />   </div>);}}export default RepeatArray;

Iv. initialize STATE

class Videoextends React.Component{  constructor(props){    super(props);    this.state = {      loopsRemaining: this.props.maxLoops,    };  }}

5. deconstruct and extension operators

It is more convenient to pass a batch of attributes to the child component. In the following example, all attributes other than className are passed to the div tag.

class AutoloadingPostsGridextends React.Component{  render() {    var {      className,      ...others, // contains all properties of this.props except for className    } = this.props;    return (      <div className={className}>        <PostsGrid {...others} />        <button onClick={this.handleLoadMoreClick}>Load more</button></div>    );  }}

The most common problem with react development is that the parent component has many attributes to pass to the child component, which is troublesome.

Class MyComponentextends React. component {// assume that MyComponent already has the name and age attributes render () {return (<SubComponent name = {this. props. name} age = {this. props. age}/> )}}

Using extension operators can make it easy

Class MyComponentextends React. Component {// assume that MyComponent already has the name and age attributes render () {return (<SubComponent {... this. props}/> )}}

The above method is to pass all attributes of the parent component. What if I do not need to pass some of these attributes? It is also very simple

Class MyComponentextends React. component {// assume that MyComponent has many attributes, and the name attribute does not need to be passed to the sub-Component var {name ,... myProps} = this. props; render () {return (<SubComponent {... myprops}/> )}}

The most common scenario of the above method is that the class attribute of the parent component needs to be extracted separately as the class of an element, and other attributes need to be passed to the child component.

6. Create Components

Import React, {Component} from "react"; class MyComponentextends Component {// internal Component code}

VII. State/Props/PropTypes

Es6 allows props and propTypes to be initialized outside the class as static attributes

class MyComponentextends React.Component{}MyComponent.defaultProps={ name:"SunnyChuan", age:22};MyComponent.propTypes={ name:React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired};

Es7 supports Using Variable expressions directly in the class

class MyComponentextends React.Component{ static defaultProps={  name:"SunnyChuan",  age:22 } static propTypes={  name:React.PropTypes.string.isRequired,  age:React.PropTypes.number.isRequired }}

State is different from the first two. It is not static.

class MyComponentextends React.Component{ static defaultProps={  name:"SunnyChuan",  age:22 } state={   isMarried:false } static propTypes={  name:React.PropTypes.string.isRequired,  age:React.PropTypes.number.isRequired }}

7. extended attributes are very useful when you build generic containers.

function App1(){ return <GreetingfirstName="Ben"lastName="Hector"/>;}function App2() {const props = {firstName: 'Ben', lastName: 'Hector'}; return <Greeting {...props} />;}

8. Use the computing attribute of es6 instead

This. setState ({[name]: value}) // replace var partialState ={}; partialState [name] = value; this. setState (partialState );

Summary

The above section describes the application code parsing of es6 in react. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!