Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kylpo/react-playbook

Styles, Conventions, Rules, Tips, and Tools!
https://github.com/kylpo/react-playbook

Last synced: 3 months ago
JSON representation

Styles, Conventions, Rules, Tips, and Tools!

Host: GitHub
URL: https://github.com/kylpo/react-playbook
Owner: kylpo
Created: 2016-05-03T05:04:49.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2023-10-05T17:04:57.000Z (over 1 year ago)
Last Synced: 2024-08-01T15:16:34.081Z (6 months ago)
Size: 4.4 MB
Stars: 250
Watchers: 20
Forks: 11
Open Issues: 1
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

awesome - kylpo/react-playbook - Styles, Conventions, Rules, Tips, and Tools! (Misc)

README

        # React Playbook

Styles, Conventions, Rules, Tips, and Tools!

## Table of contents

- Component Architecture

  - [Intro - The "Component" Problem](https://github.com/kylpo/react-playbook/blob/master/component-architecture/1_The-Component-Problem.md)

  - [A Single Component](https://github.com/kylpo/react-playbook/blob/master/component-architecture/2_A-Component.md)

  - [Multiple Components](https://github.com/kylpo/react-playbook/blob/master/component-architecture/3_Multiple-Components.md)

  - [Component Dependencies](https://github.com/kylpo/react-playbook/blob/master/component-architecture/4_Component-Dependencies.md)

  - [Example App Structure](https://github.com/kylpo/react-playbook/blob/master/component-architecture/5_Example-App-Structure.md)

  - [Future Tooling](https://github.com/kylpo/react-playbook/blob/master/component-architecture/6_Future-Tooling.md)

  - [Appendix](https://github.com/kylpo/react-playbook/blob/master/component-architecture/Appendix.md)

- Deep Dives

  - [All about `shouldComponentUpdate()`](https://github.com/kylpo/react-playbook/blob/master/deep-dives/shouldComponentUpdate.md) - [[post](https://medium.com/@kylpo/all-about-reacts-shouldcomponentupdate-cc3b1e497e97)]

  - [All about `cloneElement()`](https://github.com/kylpo/react-playbook/blob/master/deep-dives/cloneElement.md) - [[post](https://medium.com/@kylpo/all-about-reacts-cloneelement-964853391337)]

  - [All about `ref`s](https://github.com/kylpo/react-playbook/blob/master/deep-dives/refs.md) - [[post](https://medium.com/@kylpo/all-about-refs-e8d2546d052c)]

  - [What is a `HOC`?](https://github.com/kylpo/react-playbook/blob/master/deep-dives/HOC.md) - [[post](https://medium.com/@kylpo/what-is-a-hoc-bf91060be8b2)]

  - [You Can Spread Props In `JSX`, But Should You?](https://github.com/kylpo/react-playbook/blob/master/deep-dives/JSX-Spread.md) - [[post](https://medium.com/@kylpo/you-can-spread-props-in-jsx-but-should-you-6cc3e766e281)]

- Patterns and Conventions

  - [``](https://github.com/kylpo/react-playbook/blob/master/patterns/Immutable-Component.md) - [[post](https://medium.com/@kylpo/a-standard-and-naming-convention-for-immutable-components-7a933f5f5118)]

  - [``](https://github.com/kylpo/react-playbook/blob/master/patterns/Injector-Component.md) - [[post](https://medium.com/@kylpo/a-naming-convention-for-injector-components-c421a07debe5)]

  - [`<_Null_ />`](https://github.com/kylpo/react-playbook/blob/master/patterns/Null-Component.md) - [[post](https://medium.com/@kylpo/a-naming-convention-for-null-components-fb0ab91b7cd2)]

  - [Spacing Components](https://github.com/kylpo/react-playbook/blob/master/patterns/Spacing-Components.md) - [[post](https://medium.com/@kylpo/spacing-components-612ec4cf97ee)]

  - [The Case for `` (and ``)](https://github.com/kylpo/react-playbook/blob/master/patterns/Row-Col.md) - [[post](https://medium.com/@kylpo/the-case-for-row-and-col-6c7466d900d8)]

- Best Practices

  - [React](https://github.com/kylpo/react-playbook/blob/master/best-practices/react.md)

  - [Reusable Components](https://github.com/kylpo/react-playbook/blob/master/best-practices/reusable-components.md)

  - [Redux](https://github.com/kylpo/react-playbook/blob/master/best-practices/redux.md) - [[post](https://medium.com/@kylpo/redux-best-practices-eef55a20cc72)]

- Notes (aka Shallow Dives)

  - [Flow-Type](https://github.com/kylpo/react-playbook/blob/master/notes/flow-type.md)

  - [How React Works](https://github.com/kylpo/react-playbook/blob/master/notes/how-react-works.md)

  - [Immutable](https://github.com/kylpo/react-playbook/blob/master/notes/immutable.md)

  - [License](https://github.com/kylpo/react-playbook/blob/master/notes/license.md)

  - [MobX](https://github.com/kylpo/react-playbook/blob/master/notes/mobx.md)

  - [License](https://github.com/kylpo/react-playbook/blob/master/notes/license.md)

  - [Performance](https://github.com/kylpo/react-playbook/blob/master/notes/performance.md)

  - [Preact](https://github.com/kylpo/react-playbook/blob/master/notes/preact.md)

  - [React Native](https://github.com/kylpo/react-playbook/blob/master/notes/react-native.md)

  - [Security](https://github.com/kylpo/react-playbook/blob/master/notes/security.md)

  - [Terms](https://github.com/kylpo/react-playbook/blob/master/notes/terms.md)

- Style

  - [Coding Style](https://github.com/kylpo/react-playbook/blob/master/style/Code-Style.md)

  - [Decisions](https://github.com/kylpo/react-playbook/blob/master/style/Decisions.md)

- Useful Libs

  - [MobX](https://github.com/kylpo/react-playbook/blob/master/libs/mobx.md)

  - [React](https://github.com/kylpo/react-playbook/blob/master/libs/react.md)

- Trivia

  - [React](https://github.com/kylpo/react-playbook/blob/master/trivia/react.md)

## Why?

I believe the __Rails__ part of Ruby on Rails was what made it so popular and developer-friendly.

Conventions, patterns, rules, styles, etc reduce the mental load while you are developing. Instead of spending your decision-making energy on how best to perform a routine task, you can essentially go into auto-pilot mode, saving that energy for solving more interesting problems.

React Playbook is a collection of documents that attempts to give React its rails.

## Like this playbook? Maybe you'll like the other ones, too!

- [Web Playbook](https://github.com/kylpo/web-playbook)

- [Dev Playbook](https://github.com/kylpo/dev-playbook)

---

Feel free to follow **@kylpo** on [Twitter](https://twitter.com/kylpo) and [Medium](https://medium.com/@kylpo)