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
}

El curso lo puedo llevar al 100% sin un ordenador mac?

Yo lo hice con PC y Windows perfectamente
La Mac te va a servir el día que necesites publicar tu App en el Apple AppStore

Y por lo que leo casi todos los días, todas esas soluciones alternativas (usar Expo, alquilar Mac virtuales en cloud, etc.) no sirven

Quiero comenzar YA el curso!!! estoy muy ansiosos, tiene una muy buena pinta

muchas gracias FH, tengo muchas ganas de iniciar el curso, con muchas espectativas.... vamos a Darle

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