Skip to content

TobitReactJsxStyleGuide.md

Latest commit

 

History

History
352 lines (289 loc) · 7.33 KB

TobitReactJsxStyleGuide.md

File metadata and controls

352 lines (289 loc) · 7.33 KB

Tobit.Software React/JSX Style Guide

There are some basic rules you have to consider. We think this is a very handsome way to work with React and chayns®.

  • Only one React component per file.
    • But multiple Stateless or Pure components are allowed in one file.
  • Use JSX syntax when writing React component.

Content

  1. Project structure
  2. Naming
  3. PropType
  4. Component
  5. Properties
  6. Methods
  7. Spacing
  8. Alignment
  9. Quotes
  10. Parentheses
  11. Tag
  12. Refs
  13. chayns®
  14. Source

Project structure

  • This is a possible structure for a project with React and Redux.
..
src
|-actions
  |-todo.js
|-components
  |-header
    |-headline
      |-Headline.jsx
      |-headline.scss
    |-intro
      |-Intro.jsx
      |-intro.scss
  |-todos
      |-Todos.jsx
      |-todos.scss
      |-todo
         |-Todo.jsx
         |-TodoContainer.js
         |-todo.scss
  |-add-todo
    |-AddTodo.jsx
    |-AddTodoContainer.js
    |-AddTodo.scss
  App.jsx
  App.scss
|-reducers
  |-todo.js
|-index.jsx
|-index.html
...

Naming

  • Filename: Use PascalCase for filenames ChaynsUser.jsx
  • ReferenceNaming: PascalCase for React components, camelCase for their instances.
import  ChaynsUser from './ChaynsUser';

const chaynsUser = <ChaynsUser />;
  • ComponentNaming: Use the filename as the component name. You can use a index.jsx if the directory name has the same name as the component. Better rename the directory.
import  ChaynsUser from './ChaynsUser';
  • Properties Avoid using DOM component prop names for different purposes e.g. don't use "style" or "className" as prop names.
import SchoolClass from './SchoolClass';

<SchoolClass schoolClassName ="Science-Laboratory" />

PropTypes

  • PropTypes will help you to keep your code clean and structured.
  • Always define defaultProps for all non-required props.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';

const propTypes ={
    userId: PropTypes.number.isRequired,
    firstName: PropTypes.string.isRequired,
    nameAffix: PropTypes.string
};

const defaultProps= {
    nameAffix: 'Hello'
};

class User extends PureComponent{

    render(){
        return(
            <div id={this.props.userId}>
                {this.props.nameAffix + this.props.firstName}
            </div>
        )
    }
}

User.propTypes = propTypes;
User.defaultProps = defaultProps;

export default User
  • This can be used with the plugin transform-class-properties
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';

export default class User extends PureComponent{

static propTypes ={
    userId: PropTypes.number.isRequired,
    firstName: PropTypes.string.isRequired,
    greeting: PropTypes.string,
    onChange: PropTypes.func.isRequired
};

static defaultProps= {
    greeting: 'Hello, '
};

    render(){
        return(
            <div id={this.props.userId}>
                {this.props.nameAffix + this.props.firstName}
            </div>
        )
    }
}

Component

  • Declare your React component with extends PureComponent.
  • We use PureComponent instead of Component because it handles the shouldComponentUpdate method for us.
  • If we want to define our own shouldComponentUpdate logic we have to use Component instead of PureComponent.
  • Keep your render function short and clean.
  • You can use stateless components to minimize your render function. Especially if you can use the stateless components multiple times.
export default class Tapp extends PureComponent {
    render(){
        return(
            <div className="tapp">
                <div className="tapp__intro">
                    <h1>My Tapp</h1>
                    This is a new Tapp
                </div>
                <Accordion />
            </div>
        )
    }
}
  • Stateless components
const company = ({name})=> (
    <Manager>
        {getWage(name)}
    </Manager>
);

Component structure

extends PureComponent

  1. optional static methods
  2. constructor
  3. getChildContext
  4. componentDidMount
  5. shouldComponentUpdate (only in Component)
  6. componentDidUpdate
  7. eventHandlers like onClickUACGroup()
  8. getter for render like getUACGroup()
  9. optional render methods like renderUACGroup()
  10. render

Properties

  • Always use camelCase for your prop names.
<User
    userName = "Max Mustermann"
    userId={123456789}
/>
  • Leave out the values when the prop is expelicity true.
<User hidden />
  • Always include an alt prop on <img> tags.
  • Don't use words like "image", "photo" or "picture" in <img> alt props.
  • Don't use accessKey.
  • Use unique IDs as key.

Methods

  • Use arrow functions if possible and useful.
  • Bind event handlers for the render methods in the constructor.
export default class extends React.Component {
    constructor(props) {
        super(props);

        this.onClickStar = this.onClickStar.bind(this);
    }

    onClickStar() {
        // do something
    }

    render() {
        return (<Star onClick={this.onClickStar} />)
    }
}
  • Don't use underscore prefix. JacaScript has no private method, so it makes less sense.

Spacing

  • Use a single space for self-closing tags.
 <Order />
  • Don't use spaces in your curly braces.
<Order element={currentOrder} />

Alignment

  • Use this alignmentstyles for your components.
<User
    userName = "Max Mustermann"
    userId={123456789}
/>
// only one property
<Order id="1234567891011" />
//children
<User
    userName = "Max Mustermann"
    userId={123456789}
>
    <Orders />
</User>

Quotes

  • Use single quotes (') for JavaScript and double quotes (") for JSX.
<User
   userName = "Max Mustermann"
   userId={123456789}
   style = {{ margin: '10px' }}
/>

Parentheses

  • Wrap JSX in parentheses when they span more then one line.
render(){
    return (
        <div>
            <User
                userName = "Max Mustermann"
                userId={123456789}
                style = {{ margin: '10px' }}
            />
        </div>
    )
}
render(){
    return ( <Order>{ItemName}</Order> )
}

Tags

  • Use self-close tags when the tag has no child.
  • If the component has multi-line properties, set the closing tag in a new line.
<div className="tapp" />
<div 
    className = "tapp"
    style = {{ overflow : 'hidden' }} 
/>

Refs

  • Use ref callbacks.
<User ref={(ref) => {this.userRef = ref}} />

chayns® with React

  • By using chayns® you have to be sure chayns® is ready. Therefor put the ReactDOM.render() in your chayns.ready.
chayns.ready.then(function resolved() {

    ReactDOM.render(
            <div className="tapp">
                <Intro />
            </div>,
            document.querySelector('#app')
    );
    
}).catch(function rejected() {
    console.log('no chayns environment found');
}).then(function always() {
    console.log('Will always be executed');
});

Source