React component project (detailed tutorial)-JS Tutorial-php.cn

Table of Contents

Before you start:

Method

Home

Web Front-end

JS Tutorial

React component project (detailed tutorial)

亚连

Jun 01, 2018 pm 03:18 PM

react Tutorial detailed

This article shares with you the entire process of writing React component project practices through examples. Friends who are interested in this can refer to it.

When I first started writing React, I saw many ways to write components. There are a hundred ways to write a hundred tutorials. While React itself has matured, there doesn't seem to be a "right" way to use it. So I (the author) summarize here the experience of using React that our team has accumulated over the years. I hope this article is useful to you, whether you are a beginner or a veteran.

Before you start:

We use ES6 and ES7 syntax. If you are not very clear about the difference between display components and container components, it is recommended that you start by reading this article. If you have any suggestions or questions Duqing left a message in the comments about class-based components

Nowadays, React components are generally developed using class-based components. Next we will write our component in the same line:

import React, { Component } from &#39;react&#39;;
import { observer } from &#39;mobx-react&#39;;
 
import ExpandableForm from &#39;./ExpandableForm&#39;;
import &#39;./styles/ProfileContainer.css&#39;;

Copy after login

I like css in javascript very much. However, this method of writing styles is still too new. So we introduce css files in each component. Moreover, locally introduced imports and global imports will be separated by a blank line.

Initializing State

import React, { Component } from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
 
import ExpandableForm from &#39;./ExpandableForm&#39;
import &#39;./styles/ProfileContainer.css&#39;
 
export default class ProfileContainer extends Component {
 state = { expanded: false }

Copy after login

You can use the old method to initialize state in constructor. More related information can be found here. But we choose a clearer approach.

Also, we make sure to add export default in front of the class. (Translator's note: Although this may not be correct when using redux).

propTypes and defaultProps

import React, { Component } from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
import { string, object } from &#39;prop-types&#39;
 
import ExpandableForm from &#39;./ExpandableForm&#39;
import &#39;./styles/ProfileContainer.css&#39;
 
export default class ProfileContainer extends Component {
 state = { expanded: false }
  
 static propTypes = {
  model: object.isRequired,
  title: string
 }
  
 static defaultProps = {
  model: {
   id: 0
  },
  title: &#39;Your Name&#39;
 }
 
 // ...
}

Copy after login

propTypes and defaultProps are static properties. Define it as early as possible in the component class so that other developers can notice it immediately when reading the code. They can serve as documentation.

If you use React 15.3.0 or higher, you need to introduce the prop-types package instead of using React.PropTypes. More content moves here.

All your components should have prop types.

Method

import React, { Component } from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
import { string, object } from &#39;prop-types&#39;
 
import ExpandableForm from &#39;./ExpandableForm&#39;
import &#39;./styles/ProfileContainer.css&#39;
 
export default class ProfileContainer extends Component {
 state = { expanded: false }
  
 static propTypes = {
  model: object.isRequired,
  title: string
 }
  
 static defaultProps = {
  model: {
   id: 0
  },
  title: &#39;Your Name&#39;
 }
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
  
 handleNameChange = (e) => {
  this.props.model.changeName(e.target.value)
 }
  
 handleExpand = (e) => {
  e.preventDefault()
  this.setState({ expanded: !this.state.expanded })
 }
 
 // ...
 
}

Copy after login

In class components, when you pass methods to child components, you need to ensure that they are called using the correct this. This is usually done when passing it to a child component: this.handleSubmit.bind(this).

It’s much simpler to use the ES6 arrow method. It automatically maintains the correct context (this).

Pass a method to setState

In the above example, there is this line:

1	`this.setState({ expanded: !this.state.expanded });`

Copy after login

setStateIt is actually asynchronous! In order to improve performance, React will call setState that is called multiple times together. Therefore, the state may not necessarily change immediately after calling setState.

So, when calling setState, you cannot rely on the current state value. Because i doesn't know what value it is.

Solution: Pass a method to setState, and pass the state value before the call as a parameter to this method. Take a look at the example:

1	`this.setState(prevState => ({ expanded: !prevState.expanded }))`

Copy after login

Thanks to Austin Wood for the help.

Disassemble the component

import React, { Component } from 'react'
import { observer } from 'mobx-react'
 
import { string, object } from 'prop-types'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
 
export default class ProfileContainer extends Component {
 state = { expanded: false }
  
 static propTypes = {
  model: object.isRequired,
  title: string
 }
  
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }
 
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
  
 handleNameChange = (e) => {
  this.props.model.changeName(e.target.value)
 }
  
 handleExpand = (e) => {
  e.preventDefault()
  this.setState(prevState => ({ expanded: !prevState.expanded }))
 }
  
 render() {
  const {
   model,
   title
  } = this.props
  return ( 
   <expandableform onsubmit="{this.handleSubmit}" expanded="{this.state.expanded}" onexpand="{this.handleExpand}">
    <p>
     </p><h1>{title}</h1>
     <input type="text" value="{model.name}" onchange="{this.handleNameChange}" placeholder="Your Name">
    <p></p>
   </expandableform>
  )
 }
}

Copy after login

If there are multiple lines of props, each prop should occupy a separate line. Just like the above example. The best way to achieve this goal is to use a set of tools: Prettier.

Decorator

1 2	`@observer` `export` `default` `class` `ProfileContainer` `extends` `Component {`

Copy after login

If you know some libraries, such as mobx, you can use the above example to decorate class component. A decorator is a method that passes a class component as a parameter.

Decorators can write more flexible and readable components. If you don’t want to use a decorator, you can do this:

class ProfileContainer extends Component {
 // Component code
}
export default observer(ProfileContainer)

Copy after login

Closure

Try to avoid passing closures in child components, such as:

<input
 type="text"
 value={model.name}
 // onChange={(e) => { model.name = e.target.value }}
 // ^ Not this. Use the below:
 onChange={this.handleChange}
 placeholder="Your Name"/>

Copy after login

Note: If input is a React component, this will automatically trigger its redrawing, regardless of whether other props have changed.

Consistency checking is the most resource-consuming part of React. Don't add extra work here. The best way to handle the problem in the above example is to pass in a class method, which will be more readable and easier to debug. For example:

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
// Separate local imports from dependencies
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
 
// Use decorators if needed
@observer
export default class ProfileContainer extends Component {
 state = { expanded: false }
 // Initialize state here (ES7) or in a constructor method (ES6)
  
 // Declare propTypes as static properties as early as possible
 static propTypes = {
  model: object.isRequired,
  title: string
 }
 
 // Default props below propTypes
 static defaultProps = {
  model: {
   id: 0
  },
  title: 'Your Name'
 }
 
 // Use fat arrow functions for methods to preserve context (this will thus be the component instance)
 handleSubmit = (e) => {
  e.preventDefault()
  this.props.model.save()
 }
  
 handleNameChange = (e) => {
  this.props.model.name = e.target.value
 }
  
 handleExpand = (e) => {
  e.preventDefault()
  this.setState(prevState => ({ expanded: !prevState.expanded }))
 }
  
 render() {
  // Destructure props for readability
  const {
   model,
   title
  } = this.props
  return ( 
   <expandableform onsubmit="{this.handleSubmit}" expanded="{this.state.expanded}" onexpand="{this.handleExpand}">
    // Newline props if there are more than two
    <p>
     </p><h1>{title}</h1>
     <input type="text" value="{model.name}" onchange="{(e)" ==""> { model.name = e.target.value }}
      // Avoid creating new closures in the render method- use methods like below
      onChange={this.handleNameChange}
      placeholder="Your Name"/>
    <p></p>
   </expandableform>
  )
 }
}

Copy after login

Method component

This type of component has no state, no props, and no methods. They are pure components and contain the least amount of content that causes changes. Use them often.

propTypes

import React from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
import { func, bool } from &#39;prop-types&#39;
import &#39;./styles/Form.css&#39;
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool
}
// Component declaration

Copy after login

We define propTypes before the declaration of the component.

Decompose Props and defaultProps

import React from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
import { func, bool } from &#39;prop-types&#39;
import &#39;./styles/Form.css&#39;
 
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
 
function ExpandableForm(props) {
 const formStyle = props.expanded ? {height: &#39;auto&#39;} : {height: 0}
 return (
  <form style={formStyle} onSubmit={props.onSubmit}>
   {props.children}
   <button onClick={props.onExpand}>Expand</button>
  </form>
 )
}

Copy after login

Our component is a method. Its parameters are props. We can extend this component like this:

import React from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
import { func, bool } from &#39;prop-types&#39;
import &#39;./styles/Form.css&#39;
 
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
 
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? {height: &#39;auto&#39;} : {height: 0}
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}

Copy after login

Now we can also use default parameters to play the role of default props, which has good readability. If expanded is not defined, then we set it to false.

However, try to avoid using the following examples:

1	`const` `ExpandableForm = ({ onExpand, expanded, children }) => {`

Copy after login

Looks modern, but the method is unnamed.

如果你的Babel配置正确，未命名的方法并不会是什么大问题。但是，如果Babel有问题的话，那么这个组件里的任何错误都显示为发生在 <>里的，这调试起来就非常麻烦了。

匿名方法也会引起Jest其他的问题。由于会引起各种难以理解的问题，而且也没有什么实际的好处。我们推荐使用function，少使用const。

装饰方法组件

由于方法组件没法使用装饰器，只能把它作为参数传入别的方法里。

import React from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
import { func, bool } from &#39;prop-types&#39;
import &#39;./styles/Form.css&#39;
 
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
 
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? {height: &#39;auto&#39;} : {height: 0}
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}
export default observer(ExpandableForm)

Copy after login

只能这样处理：export default observer(ExpandableForm)。

这就是组件的全部代码：

import React from &#39;react&#39;
import { observer } from &#39;mobx-react&#39;
import { func, bool } from &#39;prop-types&#39;
// Separate local imports from dependencies
import &#39;./styles/Form.css&#39;
 
// Declare propTypes here, before the component (taking advantage of JS function hoisting)
// You want these to be as visible as possible
ExpandableForm.propTypes = {
 onSubmit: func.isRequired,
 expanded: bool,
 onExpand: func.isRequired
}
 
// Destructure props like so, and use default arguments as a way of setting defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
 const formStyle = expanded ? { height: &#39;auto&#39; } : { height: 0 }
 return (
  <form style={formStyle} onSubmit={onSubmit}>
   {children}
   <button onClick={onExpand}>Expand</button>
  </form>
 )
}
 
// Wrap the component instead of decorating it
export default observer(ExpandableForm)

Copy after login

条件判断

某些情况下，你会做很多的条件判断：

<p id="lb-footer">
 {props.downloadMode && currentImage && !currentImage.video && currentImage.blogText
 ? !currentImage.submitted && !currentImage.posted
 ? <p>Please contact us for content usage</p>
  : currentImage && currentImage.selected
   ? <button onClick={props.onSelectImage} className="btn btn-selected">Deselect</button>
   : currentImage && currentImage.submitted
    ? <button className="btn btn-submitted" disabled>Submitted</button>
    : currentImage && currentImage.posted
     ? <button className="btn btn-posted" disabled>Posted</button>
     : <button onClick={props.onSelectImage} className="btn btn-unselected">Select post</button>
 }
</p>

Copy after login

这么多层的条件判断可不是什么好现象。

有第三方库JSX-Control Statements可以解决这个问题。但是与其增加一个依赖，还不如这样来解决：

<p id="lb-footer">
 {
  (() => {
   if(downloadMode && !videoSrc) {
    if(isApproved && isPosted) {
     return <p>Right click image and select "Save Image As.." to download</p>
    } else {
     return <p>Please contact us for content usage</p>
    }
   }
 
   // ...
  })()
 }
</p>

Copy after login

使用大括号包起来的IIFE，然后把你的if表达式都放进去。返回你要返回的组件。

上面是我整理给大家的，希望今后会对大家有帮助。

vue 父组件调用子组件方法及事件

vue.js element-ui tree树形控件改iview的方法

javascript实现文件拖拽事件

The above is the detailed content of React component project (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

1 months ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1662

CakePHP Tutorial

1419

Laravel Tutorial

1312

PHP Tutorial

1262

C# Tutorial

1235

Related knowledge

In summer, you must try shooting a rainbow Jul 21, 2024 pm 05:16 PM

After rain in summer, you can often see a beautiful and magical special weather scene - rainbow. This is also a rare scene that can be encountered in photography, and it is very photogenic. There are several conditions for a rainbow to appear: first, there are enough water droplets in the air, and second, the sun shines at a low angle. Therefore, it is easiest to see a rainbow in the afternoon after the rain has cleared up. However, the formation of a rainbow is greatly affected by weather, light and other conditions, so it generally only lasts for a short period of time, and the best viewing and shooting time is even shorter. So when you encounter a rainbow, how can you properly record it and photograph it with quality? 1. Look for rainbows. In addition to the conditions mentioned above, rainbows usually appear in the direction of sunlight, that is, if the sun shines from west to east, rainbows are more likely to appear in the east.

How to retrieve the wrong chain of virtual currency? Tutorial on retrieving the wrong chain of virtual currency transfer Jul 16, 2024 pm 09:02 PM

The expansion of the virtual market is inseparable from the circulation of virtual currency, and naturally it is also inseparable from the issue of virtual currency transfers. A common transfer error is the address copy error, and another error is the chain selection error. The transfer of virtual currency to the wrong chain is still a thorny problem, but due to the inexperience of transfer operations, novices often transfer the wrong chain. So how to recover the wrong chain of virtual currency? The wrong link can be retrieved through a third-party platform, but it may not be successful. Next, the editor will tell you in detail to help you better take care of your virtual assets. How to retrieve the wrong chain of virtual currency? The process of retrieving virtual currency transferred to the wrong chain may be complicated and challenging, but by confirming the transfer details, contacting the exchange or wallet provider, importing the private key to a compatible wallet, and using the cross-chain bridge tool

Why do you need to know histograms to learn photography? Jul 20, 2024 pm 09:20 PM

In daily shooting, many people encounter this situation: the photos on the camera seem to be exposed normally, but after exporting the photos, they find that their true form is far from the camera's rendering, and there is obviously an exposure problem. Affected by environmental light, screen brightness and other factors, this situation is relatively normal, but it also brings us a revelation: when looking at photos and analyzing photos, you must learn to read histograms. So, what is a histogram? Simply understood, a histogram is a display form of the brightness distribution of photo pixels: horizontally, the histogram can be roughly divided into three parts, the left side is the shadow area, the middle is the midtone area, and the right side is the highlight area; On the left is the dead black area in the shadows, while on the far right is the spilled area in the highlights. The vertical axis represents the specific distribution of pixels

Vue.js vs. React: Project-Specific Considerations Apr 09, 2025 am 12:01 AM

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

What are the recommended documentation and tutorials for the Java framework? Jun 02, 2024 pm 09:30 PM

Having the right documentation and tutorials at your fingertips is crucial to using Java frameworks effectively. Recommended resources include: SpringFramework: Official Documentation and Tutorials SpringBoot: Official Guide Hibernate: Official Documentation, Tutorials and Practical Cases ServletAPI: Official Documentation, Tutorials and Practical Cases JUnit: Official Documentation and Tutorials Mockito: Official Documentation and Tutorials

React vs. Vue: Which Framework Does Netflix Use? Apr 14, 2025 am 12:19 AM

Netflixusesacustomframeworkcalled"Gibbon"builtonReact,notReactorVuedirectly.1)TeamExperience:Choosebasedonfamiliarity.2)ProjectComplexity:Vueforsimplerprojects,Reactforcomplexones.3)CustomizationNeeds:Reactoffersmoreflexibility.4)Ecosystema

Advanced Bootstrap Tutorial: Mastering Customization & Components Apr 04, 2025 am 12:04 AM

How to master Bootstrap customization and component usage includes: 1. Use CSS variables and Sass preprocessor for style customization; 2. Deeply understand and modify component structure and behavior. Through these methods, a unique user interface can be created to improve the responsiveness and user experience of the website.

See all articles