Så här undviker du fem enkla misstag när du börjar med React

1. Använd verktyget create-react-app

Ibland kan det vara skönt att skriva all kod från scratch men det innebär ofta att man lägger tid på sådant som ofta inte skapar något värde. För att slippa lägga tid på att fundera kring hur ett nytt projekt skall vara strukturerat kan det vara värt att använda sig utav verktyg som create-react-app som följer en mall som är välbeprövad.

Så om du testar React för första gången, gör dig själv en tjänst och använd create-react-app för att komma igång!

2. Använd <Fragment> istället för extra <div> taggar

Ett tips är att använda sig utav <Fragment> eller den förkortade varianten <>.

Javascriptimport React from "react";

// BAD
const RenderButtons = props => {
	return (<div>
		<button class="btn btn-primary">1st Button</button>
		<button class="btn btn-primary">2nd Button</button>
	</div>);
}

// GOOD
const RenderButtons = props => {
	return (<>
		<button class="btn btn-primary">1st Button</button>
		<button class="btn btn-primary">2nd Button</button>
	</>);
}

3. Använd className istället för class

Javascript<!-- BAD -->
<button class="btn btn-primary">Add To Cart</button>

<!-- GOOD -->
<button className="btn btn-primary">Add To Cart</button>

4. Ange key={...} när du använder array.map(...) för att loopa genom en lista

Javascript// BAD
const RenderProductList = props => {
  return props.products.map(product => <div>{product.name}</div>)
}

// GOOD
const RenderProductList = props => {
  return props.products.map(product => <div key={product.id}>{product.name}</div>)
}

5. Undvik Redux i ett tidigt skede

I många projekt så gör man misstaget att man lägger till komplexitet i ett tidigt skede. Vi förespråkar att man håller tillbaka på saker och ting som gör att projekt växer i komplexitet.

Det är väldigt sällan man behöver Redux nuförtiden och det kan vara bra att utvärdera behovet innan man lyfter in ett bibliotek som kräver boilerplate i form av actions, reducers och andra beståndsdelar som medför att projekt växer snabbt i komplexitet.

Dessa är några av våra tips till dig som precis börjat med React. Tycker du att det finns fler saker som vi bör ha med i listan. Tveka inte att höra av dig till oss på Instagram eller LinkedIn.