Igor Ming de Mesquita IgorMing

Project guide

The following suggestions are personal. That's how I like to go while I'm starting a React/React Native project.

Step by step

JS or TS?

Decide whether you want to use plain Javascript or Typescript

Criação de um produto

Descritivos

O que é o produto?
Qual problema ele resolve?
Modelo de negócio
Públicos alvo
Criação de personas (desejável)

How to configure Prettier + ESLint in VSCode

Motivation

Prettier is quite useful for format your code automatically, making you concern only with coding (which is what really matters)

ESLint has some personal rules, that makes your code have a particular pattern, where you can configure everything that you and the whole team will whose in project by default

Sometimes, you use prettier, and it has a personal pattern to deal with the styleguide. And those rules and patterns could conflict with project's ESLint rules. Looking at this problem, you can follow below some steps to configure a kind of integration between both tools.

	import { applyMiddleware, compose, createStore } from 'redux';
	import thunkMiddleware from 'redux-thunk';
	import rootReducer from './reducers';
	import reactotron from '../reactotron.config';

	export default createStore(
	rootReducer,
	compose(applyMiddleware(thunkMiddleware), reactotron.createEnhancer())
	);

	const { getDefaultConfig } = require('metro-config');

	module.exports = (async () => {
	const {
	resolver: { sourceExts, assetExts }
	} = await getDefaultConfig();
	return {
	transformer: {
	getTransformOptions: async () => ({
	transform: {

	function customWords(text, customStyles, ...wordsToWrap) {
	// Pattern to be considered to split every word
	const regexp = /([\A-zÀ-ÿ]+\|([!.,:?]))/gi;

	// Separate the phrase with all the words and characters "!.,:?"
	const splittedText = text.match(regexp);

	// Convert everything for lower case, to compare it correctly
	// and breaking words to wrap even if it contains some compound word
	const splittedWordsToWrap = wordsToWrap.reduce((acc, curr) => {

	function wordWrapper(text, wrapperFunc, ...wordsToWrap) {
	// Separate the phrase with all the words and characters "!.,:?"
	const splittedText = text.match(/([\A-zÀ-ÿ]+\|([!.,:?]))/gi);

	// Convert everything for lower case, to compare it correctly
	const lowerWords = wordsToWrap.map(each => each.toLowerCase());

	// Wrap every word doing what the function suggests to do
	const wrappedSplittedText = splittedText.reduce((acc, curr) => {
	acc.push(lowerWords.includes(curr.toLowerCase()) ? wrapperFunc(curr) : curr);

	# top-most EditorConfig file
	root = true

	# Unix-style newlines with a newline ending every file
	[*]
	end_of_line = lf
	insert_final_newline = true

	# Indentation override for all JS under lib directory
	[**.{js,json}]

	function normalize(array, key) {
	return array.reduce((acc, curr) => {
	acc.all[curr[key]] = curr;
	acc.ids.push(curr[key]);

	return { ...acc };
	}, { all: {}, ids: [] });
	}

	import React from 'react';
	import { StyleSheet, Text, View } from 'react-native';
	import { BarCodeScanner } from 'expo';

	export default class App extends React.Component {
	render() {
	return (
	<BarCodeScanner
	onBarCodeRead={(scan) => alert(scan.data)}
	style={[StyleSheet.absoluteFill, styles.container]}