Instalaciones recomendadas para el curso de React Native

ReactNative-instalaciones.md

Instalaciones - Curso de React Native

Esta es la lista de instalaciones recomendadas para el curso de React Native, si encuentran enlaces adicionales o cambios en esta hoja, pueden hacerlos.

Instalaciones Necesarias

• Visual Studio Code

• Postman

• Mongo Compass

• Git

git config --global user.name "Tu nombre"
git config --global user.email "Tu correo"

• Node

• Docker Desktop

• Android Studio

• XCode - SOLO en MAC OSX

Extensiones de VSCode

• Activitus Bar

• Error Lens

• ES7 React/Redux

• Simple React Snippets

• Auto Close Tag

• Paste JSON as Code

• TypeScript importer

Temas que estoy usando en VSCode:

• Aura Dark

• Monokai Night

• Tokyo Night

• Iconos

Mis wallpapers

• Wallpapers Developer

Comunidad de Discord

Adicional (Opcional)

Muchos me preguntan sobre mis ajustes de VSCode, aquí se los dejo como los estoy usando en este curso:

{
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "terminal.integrated.fontFamily": "MesloLGM NF",
    "explorer.compactFolders": false,
    "workbench.iconTheme": "material-icon-theme",
    // "material-icon-theme.activeIconPack": "qwik",
    "workbench.startupEditor": "none",
    "workbench.colorCustomizations": {
        "statusBar.background": "#121016",
        "statusBar.debuggingBackground": "#121016",
        "statusBar.debuggingForeground": "#525156",
        "debugToolBar.background": "#121016",
    },
    "[dart]": {
        "editor.formatOnSave": false,
        "editor.formatOnType": false,
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },
    "explorer.confirmDelete": false,
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "explorer.confirmDragAndDrop": false,
    "extensions.autoUpdate": false,
    "git.enableSmartCommit": true,
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "workbench.layoutControl.enabled": false,
    "window.commandCenter": false,
    "security.workspace.trust.untrustedFiles": "open",
    "git.openRepositoryInParentFolders": "never",
    "git.confirmSync": false,
    "codesnap.backgroundColor": "rgba(0, 0, 0, 0.0)",
    "editor.minimap.enabled": false,
    "workbench.activityBar.visible": false,
    "window.titleBarStyle": "custom",
    "codesnap.boxShadow": "rgba(0, 0, 0, 0.55) 0px 0px 20px",
    "terminal.integrated.env.osx": {
      "FIG_NEW_SESSION": "1"
    },
    "audioCues.diffLineDeleted": "off",
    "editor.accessibilitySupport": "off",
    "workbench.colorTheme": "Tokyo Night",
    "liveServer.settings.donotVerifyTags": true,
    "git.autofetch": true,
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.cursorWidth": 2,
    "reactSnippets.settings.importReactOnTop": false,
    "window.zoomLevel": 4,
    "codesnap.shutterAction": "copy",
    "codesnap.showWindowControls": false,
    "dart.flutterSdkPath": "/Users/strider/Development/flutter",
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
    "typescript.format.semicolons": "insert",
    "typescript.preferences.quoteStyle": "single",
    "javascript.format.semicolons": "insert",
    "javascript.preferences.quoteStyle": "single",
    "javascript.preferences.jsxAttributeCompletionStyle": "none",
    "javascript.preferences.useAliasesForRenames": false,
    "typescript.preferences.jsxAttributeCompletionStyle": "none",
    "typescript.preferences.useAliasesForRenames": false,
    "github.copilot.enable": {
      "*": false,
      "plaintext": false,
      "markdown": true,
      "scminput": false
    },
    "dart.showInspectorNotificationsForWidgetErrors": false,
    "editor.guides.bracketPairs": "active",
    "editor.guides.bracketPairsHorizontal": true,
    "files.associations": {
      "*.css": "tailwindcss"
    },
    "editor.defaultColorDecorators": true
}

Excelente guía para el curso vamos por más

👍 el kit para empezar las andadas ... buenisimo

Todo listo! Muchas gracias por la practicidad de las instalaciones recomendadas

Muchas gracias por esta guía, listo para empezar el curso Fernando.

Comenzando!!!... allá vamos!!!!

muy emocionado de poder expandir mis conocimientos al lado de este excelente profesor.. Sin duda los cursos de fernando me generan grandes expectativas

Comenzando!!!... allá vamos!!!!

Si bien Bracket Pair Colorizer 2 está deprecado, pueden usar Bracket Pair Colorization Toggler. Aquí les dejo mi configuración para el settings.json:

    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#a4d7ea",
        "editorBracketHighlight.foreground2": "#c462ad",
        "editorBracketHighlight.foreground3": "#F7C244",
        "editorBracketHighlight.foreground4": "#F07850",
        "editorBracketHighlight.foreground5": "#9CDD29",
        "editorBracketHighlight.foreground6": "#C497D4",
    },

Genial @tabraue, esto puede ser de gran utilidad 👍

Lo unico es que debe cambiar el
"window.zoomLevel": 4,
a
"window.zoomLevel": 1,

por que asumo que fernando lo tine en 4 por el tema de los videos

Gracias @Klerith , @tabraue y @FidelLascano.

Iniciando hoy al fin 🥹

Comenzando con toda! 🙌

🤩

Para los que vayan empezando el curso... la extensión "ES7+ React/Redux/React-Native snippets" ya incluye un snippet para componentes RN... el problema es que ahora empiezan con ts (antes empezaban con rn)... ejemplo: tsrnf o tsrnfs

empezando el curso , gracias por todo

Empezando el curso, espero cumpla mis expectativas, gracias