best_practices.md

react.js Best Practices

Our Best Practices for Writing React Components

import { string, object } from 'prop-types'

this.setState(prevState => ({ expanded: !prevState.expanded }))

state = { count: this.props.initialCount };

const { model, title } = this.props

const ExpandableForm = ({height, width, color}) => …

<div>
    {
        (() => {
            if (something){
                anything();
            }
            else if (other_thing) {
                somthing_else();
            }
            else {
                go_f_yourself();
            }
        })()
    }
</div>

<div>
{ condition && <p>Condition true!</p> }
</div>


The 100% correct way to structure a React app (or why there’s no such thing)

Since Node will look for an index.js file when resolving an import path, a path to ../Link is really a path to ../Link/index.js which is a file that points to the actual component file.
If typing fewer characters in your imports is important, then maybe an extra file for every directory sounds like good value. I think it’s a bad deal and I will repeat one more time that it’s seriously OK to have a different opinion on the matter.

import React from 'react';
import {
  Button,
  Footer,
  Header,
  Page,
} from 'Components';

const config = {
  // other stuff
  resolve: {
    alias: {
      'Components': path.resolve(__dirname, '../src/app/components/'),
    },
  },
};

Components/index.js:

export (default as Button) from ‘./Button/Button’
export (default as Footer) from ‘./Footer/Footer’