Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router 4 Basics Going Further with Routing Passing Data to Components Via Routes

torger angeltveit
PLUS
torger angeltveit
Courses Plus Student 88 Points
Posted by torger angeltveit
torger angeltveit
Courses Plus Student 88 Points

What is best practice for react structure?

Hi, the more i read about react the more confused i get. I have followed along with many of the react courses.

However, it seems there are many ways to code with react and i don't know what i should practice.

I see react declared in many different ways:

  1. react.CreateClasss(){}
  2. const Random = () => {}
  3. class Random extends React.Component{}

And some places i see render() function to print the html, and some places i see return statements for it.

Anyone have any tips on this? Is it bad to mix these types etc?

2 Answers

miguelorange
miguelorange
1,772 Points
miguelorange
miguelorange
1,772 Points

Number 3 is es6 clas so if your using a transpiler like Babel, then I'd say you no longer need react.CreateClass(). Its best practice to use a combination of 2 and 3 depending on your needs of the component. Number 2 is a pure function and may be more performant today and is promised to be more performant in future versions of React. Use number 3 when your needs lifecycle events, or state. Throughout the React Basics track the instructor goes into detail best practice, and how to migrate from pure functions to a React component.

https://facebook.github.io/react/docs/components-and-props.html

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Hello there,

This is a pretty good question: after a couple of research on the Internet (ok, just two seconds, I already use this style guide ^^), it appears Airbnb has very good guide lines you can follow and especially when working with React and JavaScript.

Here is the link relative to the structure of class creation.

Thomas.