DEN BÄSTA REAKTIONSTILLÄGGET FÖR VS -KOD

Den bästa reaktionstillägget för VS -kod

När du arbetar med React finns det massor av kod som upprepas om och om igen ... och om och om igen. Så småningom börjar du tänka, det måste finnas ett bättre sätt. Oroa dig inte, det finns!

Innehållsförteckning

Tillägget ES7 React/Redux/GraphQL/React-Native Snippets
JavaScript -import
JavaScript Iteration
JavaScript -funktioner
Reagera livscykelmetoder
Reagera komponenter
Andra utdrag
Slutsats

I den här artikeln kommer vi att titta på ES7 React/Redux/GraphQL/React -** Native snippets ** extension. Ja, det är en munnfull att stava allt, men det ger en fantastisk uppsättning utdrag som är ovärderliga när du skriver React -kod.

Tillägget ES7 React/Redux/GraphQL/React-Native Snippets

Denna utdragstillägg (jag skriver inte ut hela namnet igen) är otroligt populärt med över 2 miljoner nedladdningar. För att säkerhetskopiera detta använder alla stora utvecklare som jag har hört talar om React på en podcast, YouTube -video etc. detta tillägg och älskar det.

Jag har alltid sagt att utvecklare är avsiktligt lata. Med andra ord hittar vi sätt att ständigt förbättra hastigheten med vilken vi rättar kod genom att skriva mindre av det själva. Dessa utdrag gör att skriva reagerar mycket mycket snabbare!

JavaScript -import

Även om denna artikel är inriktad på utdrag för React, består React -koden främst av modernt JavaScript. Av denna anledning innehåller detta tillägg flera användbara JavaScript -utdrag.

I modernt JavaScript bryts koden upp till olika moduler och återanvänds sedan i andra områden med hjälp av importsyntaxen. Här är ett par importfragment att överväga.

Importera en standardexport.

//imp import moduleName from 'module'

Importera en namngiven export.

//imd import { destructuredModule } from 'module'

För att bli lite mer specifik för React, här är ett par React -import.

Importera React

//imr import React from 'react'

Importera React och komponent.

//imrc import React, { Component } from 'react'

JavaScript Iteration

Iterering genom en lista med objekt är inte svårt men det blir repetitivt (ingen ordlek avsedd).

För varje iteration

//fre arrayName.forEach(element => { }

Av iteration

//fof for(let itemName of objectName { }

För i Iteration

//fin for(let itemName in objectName { }

JavaScript -funktioner

Funktioner är uppenbarligen något som vi skriver varje dag. Här är några olika sätt att generera dem.

Anonym funktion

//anfn (params) => { }

Namngiven funktion

//nfn const functionName = (params) => { }

Reagera livscykelmetoder

Nu kan vi dyka in i mer React -specifika saker. Låt oss börja med livscykelmetoder.

ComponentDidMount

//cdm componentDidMount = () => { }

ComponentDidUpdate

//cdup componentDidUpdate = (prevProps, prevState) => { }

ComponentWillUnmount

//cwun componentWillUnmount = () => { }

Reagera komponenter

Med de utdrag som vi har nämnt hittills har du möjlighet att stoppa ut det mesta av en React -komponent genom att kombinera dem, men det blir bättre! Här är några utdrag som genererar en hel komponent åt dig!

Komponent i reaktionsklass

//rcc import React, { Component } from 'react' export default class FileName extends Component { render() { return $2 } }

Reagera klasskomponent med proptyper

//rcep import React, { Component } from 'react' import PropTypes from 'prop-types' export class FileName extends Component { static propTypes = {} render() { return $2 } } export default //rcep import React, { Component } from 'react' import PropTypes from 'prop-types' export class FileName extends Component { static propTypes = {} render() { return $2 } } export default $1

Reager funktionskomponent

//rfc import React from 'react' export default function //rfc import React from 'react' export default function $1() { return $0 } () { return $0 }

Andra utdrag

Vi har täckt ett gäng utdrag i den här artikeln, men det finns flera fler. Här är ett par kategorier som kan vara värda en djupare titt!

React Native
Rekvisitetstyper
på nytt
Tester
Skriver till konsolen

Slutsats

Skriv aldrig kod som du inte behöver. Min enda varning till det påståendet kommer om du lär dig. Om du är ny på ett språk eller ramverk, undvik utdrag medan du lär dig. Skriv allt för upplevelsen! Efter det, SNIPPETS BORT!

#reactjs #javascript #webbutveckling

Den bästa reaktionstillägget för VS -kod