Skip to content
Talks, tools and packages for React dApps
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.all-contributorsrc
.gitignore
readme.md

readme.md

Collaborative Etiquette Blockmatic Standard MIT Follow on Twitter Chat on Telegram

React dApp Stack

A collection of guidelines, tools, talks and packages for building ReactJS EOSIO dApps.

Blockmatic code style convention aims to maximize reusability and facilitate collaboration. We have chosen the stack carefully so that it allows us to write robust and performant ReactJS and React Native applications with more concise and readable code.

Functional JS, TypeScript, Hooks, Context, Suspense, Theme UI, Framer, Fluid Layout and Typography.

Motivation

We want to follow a common ReactJS code style convention across all projects to maximize reusability and facilitate collaboration. We have chosen the stack carefully so that it allows us to write robust and performant ReactJS and React Native applications with more concise and readable code.

See also ReactJS Hooks Motivation

TELOS DreamStack

The TELOS DreamStack Project follows this react stack. It provides set of guidelines, tools and starters to speed up dApp development following best practices for security, performance and maintainability of your application.

telosdreamstack.io

Must Know / Watch

Layout & CSS

Typography

Functional JavaScript with TypeScript

React Hooks and Context

Translations / Internationalization (i18n)

Animation

Styling

EOSIO

GraphQL

React Native & Expo

Gatsby

Tools

Debugging

Code Conventions

Components as function & methods as arrow functions

function MyContainer () { 
 const myMethod = () => { }  
    
 return <b/>;
}

Keep things that don't change outside of React components in VanillaJS

Ej. defaults, constants, browser configuration.

const userAgent = window.navigator.userAgent;
const pageTitle = randomTitle();

function MyContainer () {
 return <b/>;
}

Variable and function names in camelCase, tolerate snake_ase attributes ( eosio cpp style )

const myVar = 'this a var or function name within the JS code'
const blockmaticAccount = await rpc.get_account('blockmaticio')
console.log(blockmaticAccount.last_code_update) // eosio snake case attributes, that's fine.

useState with functional updates

const [count, setCount] = useState(0)
const inc = useCallback(() => setCount(c => c + 1), [])

useReducer

useReducer memoization works exactly as useState in this case. Since dispatch is guaranteed to have same reference across renders, useCallback is not needed, which makes code less error-prone to memoization related bugs.

const [count, inc] = useReducer(c => c + 1, 0);

avoid over optimization (useCallback and useMemo)

Apply the AHA Programming principle and wait until the abstraction/optimization is screaming at you before applying it and you'll save yourself from incurring the costs without reaping the benefit.

Specifically the cost for useCallback and useMemo are that you make the code more complex for your co-workers, you could make a mistake in the dependencies array, and you're potentially making performance worse by invoking the built-in hooks and preventing dependencies and memoized values from being garbage collected. Those are all fine costs to incur if you get the performance benefits necessary, but it's best to measure first.

Contributors

Thanks goes to these wonderful people (emoji key):

Gabo Esquivel
Gabo Esquivel

🤔
Kevin Wolf
Kevin Wolf

🤔
Laura Castillo
Laura Castillo

🤔
veyyz
veyyz

🤔
Kevin Rodríguez
Kevin Rodríguez

🤔
Guayo Mena
Guayo Mena

🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

Contributing

Read the contributing guidelines for details.

Blockmatic

Blockmatic is building a robust ecosystem of people and tools for development of decentralized applications.

blockmatic.io

Blockmatic Twitter Blockmatic Facebook Blockmatic Github

You can’t perform that action at this time.