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
}

Una pequeña pregunta, me podria recomendar alguna extension de Color Picker, para poder acceder a los codigos de colores rapido ?

Para resaltar visualmente en el codigo los colores de las strings que contienen valores hexadecimales de colores
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

editor visual de colores, selector de paletas, etc. con color picker etc.
https://marketplace.visualstudio.com/items?itemName=RoyAction.color-manager

Can you feel? Can you way

Gracias, ya listo para aprender. Saludos

los cursos estan grandiosos, muchas gracias crack

Muchas gracias, comenzado el curso.

Geniaal, ya empezando el curso, vamos a ver que tal

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

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