Scribd
Upload
30 views2 pages

React Js Coding Tips

This document provides examples of good and bad coding practices when writing JavaScript code. Specifically, it recommends: 1) Using object destructuring and const declarations instead of let when extracting variables from objects. 2) Adding quotation marks around string values and attributes in JSX elements. 3) Refactoring conditional rendering to make the code more readable by extracting components.

Uploaded by

Sarmad Farhan Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views2 pages

React Js Coding Tips

This document provides examples of good and bad coding practices when writing JavaScript code. Specifically, it recommends: 1) Using object destructuring and const declarations instead of let when extracting variables from objects. 2) Adding quotation marks around string values and attributes in JSX elements. 3) Refactoring conditional rendering to make the code more readable by extracting components.

Uploaded by

Sarmad Farhan Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Don’t do this

let { imgSrc,
title,
artist,
clas,
thumbnail,
breakpoint } = this.props;

do this

const {
imgSrc,
title,
artist,
clas,
thumbnail,
breakpoint
} = this.props

Don’t do this

<GalleryImage
imgSrc="./src/img/vangogh2.jpg"
title="Starry Night"
artist="Van Gogh"
clas="landscape"
thumbnail="./src/img/thumb/vangogh2.gif"
breakpoint={320} />

Do this

<GalleryImage
imgSrc='./src/img/vangogh2.jpg'
title='Starry Night'
artist='Van Gogh'
clas='landscape'
thumbnail='./src/img/thumb/vangogh2.gif'
breakpoint={320}
/>

Don’t do this

class SearchResult extends Component {


render () {
let { results } = this.props;
let outputJSX;
if (results.length > 0) {
outputJSX = (
<Fragment>
{results.map(index => <Result key={index} {... results[index] />)}
</Fragment>
);
} else {
outputJSX = No results;
}
return <section className="search-results">{outputJSX}</section>;
}
}

Do this

class SearchResult extends Component {


render () {
const { results } = this.props

const Results = () => <Fragment>


{results.map(index => <Result key={index} {...results[index]} />)}
</Fragment>

const NoResults = () => No results

return <section className="search-results">


{
results.length
? Results()
: NoResults()
}
</section>
}
}

You might also like