Skip to content

Instantly share code, notes, and snippets.

@savio777

savio777/jsx.md

Last active May 31, 2023 00:13
Show Gist options
  • Save savio777/ff4a300e039b3ca5dd4f8ca3bdb94a95 to your computer and use it in GitHub Desktop.
Save savio777/ff4a300e039b3ca5dd4f8ca3bdb94a95 to your computer and use it in GitHub Desktop.
Download ZIP
react web, next.js e mobile
Raw
jsx.md

react web, next.js e mobile

  • dicas clean code

https://github.com/felipe-augusto/clean-code-javascript

  • criar react app web
npx create-react-app my-app --template typescript
  • criar app react native cli
npx react-native init AwesomeProject --template react-native-template-typescript
  • criar app react-native cli (atual)
npx react-native@latest init AwesomeProject
  • caso tenha problema ao instalar app com nova versão RN:
rm -rf ~/.npm/_npx

ou no Windows apagar%LocalAppData%/npm-cache/_npx

  • criar app react native com versão específica
npx react-native init AwesomeProject --version X.XX.X
  • criar app react-native com expo-cli (Bare)
npx expo init my-app
  • criar app rn com expo de outra maneira com opção template typescript (Managed)
npx create-expo-app my-app --template
  • resetar cache ao iniciar o react-native cli
watchman watch-del-all
rm -rf $TMPDIR/react-native-packager-cache-*
rm -rf $TMPDIR/metro-bundler-cache-*
rm -rf android/.cxx android/build android/app/build android/app/.cxx
rm -rf node_modules yarn.lock
yarn cache clean
yarn
yarn start --reset-cache
  • resetar cache ao iniciar expo
rm -rf node_modules # With Yarn workspaces, you may need to
                    # delete node_modules in each workspace
yarn cache clean
yarn
watchman watch-del-all
rm -fr $TMPDIR/haste-map-*
rm -rf $TMPDIR/metro-cache
npx expo start --clear
  • instalar pacotes (ios)
pod install
  • atualizar pacotes (ios)
pod repo update
pod update
  • instalar e atualizar pacotes (ios)
pod install --repo-update
  • rodar app em modo produção
yarn android --variant=release
  • celular android não está conseguindo acessar api local
adb reverse tcp:3000 tcp:3000
  • criar apk
./gradlew assembleRelease
  • criar aab
./gradlew bundleRelease
  • criara chave/senha para publicar app
keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
  • resolução erro ERR_OSSL_EVP_UNSUPPORTED (ssl erro ao iniciar servidor do react native)
export NODE_OPTIONS=--openssl-legacy-provider
  • scripts
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android": "react-native run-android",
    "android:release": "cd android/ && ./gradlew clean && ./gradlew cleanBuildCache && ./gradlew assembleRelease && echo android/app/build/outputs/apk/",
    "android:abb": "cd android/ && ./gradlew clean && ./gradlew cleanBuildCache && ./gradlew bundleRelease && echo android/app/build/outputs/bundle/release/",
    "ios": "react-native run-ios"
  },
  • criação alias ligar emulador no .bashrc (@android_8 = nome do seu emulador criado no avd do android studio)
alias android8='emulator -no-audio -no-boot-anim @android_8'

Hooks mais usados:

  • useState
  • useEffect
  • useCallback

Testar Deep link

  • android
adb shell am start -W -a android.intent.action.VIEW -d "<url>://<url>/<screen>/<param>" <package_app>
  • ios
xcrun simctl openurl booted <url>:://<screen>/<param>

Expo CLI:

  • ex. instalação componentes expo
npx expo install expo-camera @expo/vector-icons expo-font @expo-google-fonts/roboto
  • mandar code push (passar versão atual do app)
expo publish --release-channel v.1.0.9
  • gerar aab ou apk para produção
expo build:android --release-channel v.1.1.0
  • gerar apk (geralmente debug)
expo build:android --release-channel staging
  • limpar cache
expo r -c
expo start -c

CodePush (AppCenter) CLI:

  • recuperar chaves do app
appcenter codepush deployment list -a <ownerName>/<appName> -k
  • enviar atualização
appcenter codepush release-react -a <ownerName>/<appName>
  • enviar atualização para canal específico
appcenter codepush release-react -a <ownerName>/<appName> -d <channel>

NextJS:

  • Criar app next com ts:
npx create-next-app@latest --ts <name_app>

Padrões de Projeto:

  • maneira de pegar porcentagem de uma view em relação a tela total:

pegar tamanho total da tela e dividir pelo tamanho da view

ex: width menor (View) / width maior (tela total)

  • unidade rem css:

Untitled

Configs e exemplos:

  • error image module in react app with typescript

create file declaration.d.ts and:

declare module "*.png";
// and others types images and files
  • exemplo declaração documentação dos props
import React from 'react'

interface FooProps {
  /** Testing 123 */
  foo: string
}

function Foo({foo}: FooProps) {
  return <>{foo}</>
}

<Foo foo="bar" />

Untitled

  • outras maneiras de documentação do typescript

https://tsdoc.org/

  • sombra no texto styleSheet e styled-compoents:
	text-shadow-color: rgba(0, 0, 0, 0.7);
  text-shadow-offset: {width: -1px, height: 1px};
  text-shadow-radius: 10px;
	textShadowColor: 'rgba(0, 0, 0, 0.75)',
  textShadowOffset: {width: -1, height: 1},
  textShadowRadius: 10
  • sombra View styleSheet e styled-compoents:
shadowColor: '#171717',
shadowOffset: {width: -2, height: 4},
shadowOpacity: 0.2,
shadowRadius: 3,
shadow-color: #171717;
shadow-opacity: 0.2;
shadow-radius: 3;
shadow-offset: {width: -2, height: 4};
  • exemplo imagem background e acessar props pelo styled-components

styles.ts

export const ImageBackground= styled.ImageBackground.attrs(props => ({
  imageStyle: { borderRadius: 22 },
}))`
  width: 100%;
  height: 100%;
  resize-mode: cover;
`

index.tsx

              <ImageBackground source={{ uri: photoExample }}>
                <Icon
                  name="fullscreen"
                  size={60}
                  color="#c4c4c4"
                  style={{
                    position: 'absolute',
                    alignSelf: 'flex-end',
                    bottom: 5,
                    right: 10,
                  }}
                />
              </ImageBackgroundItem>
  • Scrollview não está funcionando flex: 1
 <ScrollView contentContainerStyle={{flexGrow: 1}}
  • Fixar tema android somente para tema Light
    • android/app/src/main/res/values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

  • config imports

    • tsconfig.json
    {
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@assets/*": ["./src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@routes/*": ["./src/routes/*"],
      "@screens/*": ["./src/screens/*"],
      "@storage/*": ["./src/storage/*"],
      "@theme": ["src/theme"],
      "@theme/*": ["src/theme/*"],
      "@utils/*": ["./src/utils/*"]
    }
  },
  "types": ["jest", "styled-components-react-native"]
}
    • babel.config.js
    module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          root: ["./src"],
          alias: {
            "@assets": "./src/assets",
            "@components": "./src/components",
            "@routes": "./src/routes",
            "@screens": "./src/screens",
            "@storage": "./src/storage",
            "@theme": "./src/theme",
            "@utils": "./src/utils",
          },
        },
      ],
    ],
  };
};

  • ex. config Tema styled-components e Google fonts (Expo):

    • src/@types/styled.d.ts
    import "styled-components";
import theme from "@theme";

declare module "styled-components" {
  type ThemeType = typeof theme;

  export interface DefaultTheme extends ThemeType {}
}
    • App.tsx
    import { StatusBar } from "expo-status-bar";
import { ActivityIndicator, StyleSheet, View } from "react-native";
import { ThemeProvider } from "styled-components";
import {
  useFonts,
  Roboto_400Regular,
  Roboto_700Bold,
} from "@expo-google-fonts/roboto";

import theme from "@theme";
import Groups from "@screens/Groups";

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default function App() {
  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_700Bold,
  });

  return (
    <ThemeProvider theme={theme}>
      <View style={styles.container}>
        {!fontsLoaded ? <ActivityIndicator /> : <Groups />}

        <StatusBar style="light" backgroundColor={theme.colors.gray[600]} />
      </View>
    </ThemeProvider>
  );
}
    • src/theme/index.ts
export default {
  colors: {
    white: "#FFFFFF",

    green: {
      main: "#00B37E",
      dark: "#00875F",
    },

    red: {
      main: "#F75A68",
      dar: "#AA2834",
    },

    gray: {
      700: "#121214",
      600: "#202024",
      500: "#29292E",
      400: "#323238",
      300: "#7C7C8A",
      200: "#C4C4CC",
      100: "#E1E1E6",
    },
  },
  font: {
    regular: "Roboto_400Regular",
    bold: "Roboto_700Bold",
  },
  fontSize: {
    SM: 14,
    MD: 16,
    LG: 18,
    XL: 24,
  },
};

javascript e typescript tips

  • clean code

https://github.com/felipe-augusto/clean-code-javascript

  • adicionar typescript a um projeto
yarn add -D typescript ts-node @types/node ts-node-dev
npx tsc --init
  • remover caracteres e e deixar somente números na string
string.replace(/\D/g,'');
  • remover erro typescript
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment