DEV Community

Cover image for React Style Guide Collection
Kumar Nitesh
Kumar Nitesh

Posted on

React Style Guide Collection

I am in process of creating style guide for my react projects, and started looking online for already popular ones to get inspiration. Here are collection of all that I think are really good and will be helpful for developers like me looking for React style guide.

Please comment If I am missing any or if you had a preferred one that I should look into.


KHAN : React Style Guid

image


PAGARME: React Code Style Guide

image


AIRBNB: React/JSX Style Guide

image


CSS-TRICKS: React Code Style Guide

image


AIRBNB: Issue discussion around ES6/2015

Really a good read.
image


Google: JavaScript Guide

A general JS style guide.

image


ReactJs.org: File Structure

image


Also, if interested, here you can read about my preferred folder structure.


Lessonly Engineering: React Styleguide

image


ps: I will soon write a blog post detailing my style guide.

Thanks
Kumar Nitesh
Twitter

Top comments (5)

Collapse
 
spotnick profile image
spotnick

Hey @knitesh I just looked at the style guides you picket because I´m pretty much in the same situation. For pure JS I was also using the style guide from AIRBNB. But I was also looking for guides which are more dedicated to React.

The first one "Khan" and most of the the others as well, they are pretty old fashioned. They use a lot of class components, which I don´t do anymore. I´m only using (stateful / stateless) function components. So this one is nothing for me. I don´t think that we should put energy in class components. They are more bloaded and you can achieve pretty much the same with hooks and function components.

I wasnt able to find a dedicated function component style guide. As well as something on "how small" a component should be. But anyway, they are good to get a first glance of how to structure your project and you get a basic idea of how to arrange your code in the project. So for that its good.

Collapse
 
amn3s1a2018 profile image
Amn3s1a2018

The Airbnb one, it is ... and standardjs.com/ although I'm mostly a tab person :)
@spotnick this one maybe little old fashioned too, but in a shiny old timer way, not thé rusty kind. Just skip the class component parts.
Anyway, don't hesitate much just pick one and go with it. It's good to have ground rules, but not always important what are they. Think the pointless space/tab wars... Sooo many smart (are they?) people wasted

Collapse
 
spotnick profile image
spotnick

True :) thanks for that! :)

Collapse
 
knitesh profile image
Kumar Nitesh

True, my objective is pick the idea and create a functional based style-guide, as, I also don't use class component and online you can find only class component guide.

So keep an eye for one of my new post :)

Collapse
 
spotnick profile image
spotnick

Alrgith I do that :)