Как запустить чужой файл через react native

Клонирование и использование репозитория GitHub в Visual Studio Code

Сведения о клонировании общедоступного репозитория из GitHub на локальный компьютер с помощью Visual Studio Code.

Клонировать репозиторий

Действие клонирования репозитория GitHub означает перенос облачного исходного кода в локальную среду разработки.

• Панель действий
• Строка состояния
• Палитра команд
• Встроенный терминал

Это действие недоступно из этой функции. Выберите другую вкладку.

Это действие недоступно из этой функции. Выберите другую вкладку.

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. В командной строке палитры введите gitcl , выберите команду Git: Клонировать , а затем выберите «Клонировать» из GitHub и нажмите клавишу ВВОД.
3. Если появится запрос на ввод URL-адреса репозитория, выберите параметр клонирования из GitHub и нажмите клавишу ВВОД.
4. Если вам будет предложено войти в GitHub, завершите процесс входа.
5. Введите azure-samples/js-e2e-express-server в поле URL-адрес репозитория.
6. Выберите (или создайте) локальный каталог, в который нужно клонировать проект, а затем выберите » Выбрать в качестве назначения репозитория».
7. Когда появится уведомление с вопросом, нужно ли открыть клонированный репозиторий, выберите вариант Открыть.

git clone https://github.com/YOUR-NAME-OR-ORGANIZATION/YOUR-REPO-NAME 

cd YOUR-REPO-NAME 

code . 

Инициализация нового репозитория

Если у вас еще нет репозитория GitHub, но вы хотите запустить проект локально, инициализируйте папку с помощью Git.

• Панель действий
• Строка состояния
• Палитра команд
• Встроенный терминал

1. Выберите элемент управления версиями на панели действий или используйте сочетание клавиш CTRL + SHIFT + G.
2. Выберите репозиторий Initialize.

Это действие недоступно из этой функции. Выберите другую вкладку.

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. Отфильтруйте с Git помощью , а затем выберите Initialize repository .
3. Выберите папку, чтобы выбрать в качестве корневого каталога репозитория.

git init 

Создание ветви для изменений

• Панель действий
• Строка состояния
• Палитра команд
• Встроенный терминал

1. Выберите элемент управления версиями на панели действий.
2. Выберите многоточие (. ) рядом с элементом управления версиями.
3. Выберите «Ветвь ->Создать ветвь«.

1. Выберите имя ветви в строке состояния. Откроется палитра команд. Строка состояния находится в нижней части Visual Studio Code.
2. Выберите в палитре команд элемент Создание ветви.
3. Введите имя для новой ветви.
4. Введите имя для новой ветви. Экран «Отображение имени ветви в строке состояния».

1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
2. Найдите элемент git branch и выберите Git: Create Branch .
3. Введите новое имя ветви, например test .
4. Экран «Отображение имени ветви в строке состояния».

1. Откройте интегрированный терминал из терминала —> новый терминал.
2. Создайте новую ветвь с помощью MY-BRANCH следующей команды Git:

   git checkout -b MY-BRANCH 

   Фиксация изменений локально

   После внесения изменений в ветвь зафиксируйте изменения.

   

   • Панель действий
   • Строка состояния
   • Палитра команд
   • Встроенный терминал
   1. Выберите элемент управления версиями на панели действий.
   2. Введите сообщение о фиксации, а затем нажмите кнопку «Зафиксировать«.

   Это действие недоступно из этой функции. Выберите другую вкладку.

   1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
   2. В палитре команд фильтруйте с Git помощью выбора Commit .
   3. Введите сообщение фиксации, а затем нажмите клавишу ВВОД .

   git commit -m "YOUR COMMIT MESSAGE" 

   Отправка локальной ветви в GitHub

   

   • Панель действий
   • Строка состояния
   • Палитра команд
   • Встроенный терминал
   1. Щелкните значок «Система управления версиями» на панели действий.
   2. Выберите «Опубликовать ветвь«. Если репозиторий не существует на GitHub, он создает репозиторий для вас.
   1. В строке состояния Visual Studio Code выберите значок отправки справа от имени ветви.
   2. Выберите имя удаленного расположения во всплывающем окне. Если вы имеете только одно удаленное расположение, вам не будет предложено выбрать имя такого расположения.
   1. Откройте палитру команд с сочетанием клавиш CTRL SHIFT + + P.
   2. В палитре команд фильтруйте с Git помощью выбора Push .
   3. Если у вас несколько вышестоящий удаленных, выберите удаленный, а затем нажмите клавишу ВВОД .
   1. Откройте интегрированный терминал из терминала —> новый терминал.
   2. Создайте новую ветвь с помощью MY-BRANCH следующей команды Git:

      git push

      Просмотр выходных данных Git

      Вы можете просмотреть команды Git, выполняемые при использовании расширения системы управления версиями. Это помогает отладить при сбое команды.

      

      1. Щелкните значок «Система управления версиями» на панели действий.
      2. Щелкните многоточие (. ) и выберите элемент Показать выходные данные Git.

      Инструменты Visual Studio Code для работы с Git и GitHub

      При работе в Visual Studio Code с репозиторием необходимо использовать отдельные средства.

      Icon	Информация	Доступ из
      Команды Git в палитре команд	F1
      	Расширение системы управления версиями	Панель действий
      	Расширение запросов на вытягивание и сообщений о проблемах на GitHub	Панель действий
      Расширение репозиториев GitHub	Вы можете быстро и без труда открыть репозиторий GitHub. Для этого можно выполнить поиск репозиториев GitHub и выбрать команду «Открыть репозиторий» в палитре команд, нажать клавишу F1 или выбрать команду Open GitHub Repository. (Открыть репозиторий GitHub) из удаленного индикатора (зеленая кнопка слева в нижнем углу строки состояния).

      Следующие шаги

      • Узнайте о развертывании веб-приложения
      • Работа с GitHub в Visual Studio Code
      • Использование Visual Studio Code с другими поставщиками систем управления версиями

      Отладка¶

      React Native предоставляет меню разработчика внутри приложения, которое предлагает несколько вариантов отладки. Меню разработчика можно открыть, встряхнув устройство или с помощью сочетаний клавиш:

      • iOS Simulator: Cmd + D (или Device → Shake)
      • Android emulators: Cmd + M (macOS) или Ctrl + M (Windows и Linux)

      В качестве альтернативы для устройств и эмуляторов Android вы можете выполнить команду adb shell input keyevent 82 в терминале.

      

      Меню Dev Menu отключено в релизных (производственных) сборках.

      LogBox¶

      Ошибки и предупреждения в сборках разработки отображаются в LogBox внутри вашего приложения.

      LogBox отключен в релизных (производственных) сборках.

      Ошибки и предупреждения консоли¶

      Ошибки и предупреждения консоли отображаются в виде экранных уведомлений с красным или желтым значком и количеством ошибок или предупреждений в консоли соответственно. Чтобы просмотреть ошибку или предупреждение консоли, коснитесь уведомления, чтобы просмотреть информацию о журнале на полном экране и просмотреть все журналы в консоли постранично.

      Эти уведомления можно скрыть с помощью LogBox.ignoreAllLogs() . Это полезно, например, при демонстрации продукта. Кроме того, уведомления могут быть скрыты для каждого журнала с помощью LogBox.ignoreLogs() . Это полезно, когда есть шумное предупреждение, которое невозможно исправить, например, в зависимости от стороннего производителя.

      Игнорировать журналы в крайнем случае и создать задачу для исправления всех игнорируемых журналов.

      1 2 3 4 5 6 7

      import  LogBox > from 'react-native'; // Ignore log notification by message: LogBox.ignoreLogs(['Warning: . ']); // Ignore all log notifications: LogBox.ignoreAllLogs(); 

      Необработанные ошибки¶

      Не обработанные ошибки JavaScript, такие как undefined не является функцией , автоматически откроют на весь экран LogBox с источником ошибки. Эти ошибки можно удалить и минимизировать, чтобы вы могли видеть состояние вашего приложения при возникновении этих ошибок, но их всегда следует устранять.

      Ошибки синтаксиса¶

      При возникновении синтаксической ошибки автоматически открывается полноэкранный LogBox ошибки с трассировкой стека и местоположением синтаксической ошибки. Эта ошибка не может быть устранена, поскольку она представляет собой некорректное выполнение JavaScript, которое необходимо исправить, прежде чем продолжать работу с приложением. Чтобы устранить эти ошибки, исправьте синтаксическую ошибку и либо сохраните ее для автоматического устранения (при включенном Fast Refresh), либо Cmd / Ctrl + R для перезагрузки (при отключенном Fast Refresh).

      Инструменты разработчика Chrome¶

      Чтобы отладить код JavaScript в Chrome, выберите «Open Debugger» в меню Dev. Это откроет новую вкладку по адресу http://localhost:8081/debugger-ui.

      Отсюда выберите More Tools → Developer Tools в меню Chrome, чтобы открыть Chrome DevTools. Также вы можете воспользоваться сочетанием клавиш Option + Cmd + I (macOS) / Ctrl + Shift + I (Windows и Linux).

      • Если вы новичок в Chrome DevTools, рекомендуем изучить вкладки Console и Sources в документации.
      • Возможно, вам захочется включить Pause on Caught Exceptions для улучшения отладки.

      Расширение React Developer Tools Chrome не работает с React Native, но вы можете использовать его автономную версию вместо этого. Прочитайте этот раздел, чтобы узнать, как это сделать.

      На Android, если время между отладчиком и устройством изменилось, такие вещи, как анимация и поведение событий, могут работать неправильно. Это можно исправить, выполнив adb shell «date ‘date +%m%d%H%M%Y.%S%3N'» . При использовании физического устройства требуется Root-доступ.

      Отладка на физическом устройстве¶

      Если вы используете Expo CLI, это уже настроено для вас.

      На устройствах iOS откройте файл RCTWebSocketExecutor.mm и измените «localhost» на IP-адрес вашего компьютера, затем выберите «Debug JS Remotely» в меню Dev.

      Android iOS

      На устройствах Android 5.0+, подключенных через USB, вы можете использовать инструмент командной строки adb для настройки перенаправления портов с устройства на компьютер:

      adb reverse tcp:8081 tcp:8081 

      В качестве альтернативы выберите «Settings» в меню Dev, затем обновите настройку «Debug server host for device», чтобы она соответствовала IP-адресу вашего компьютера.

      На устройствах iOS откройте файл RCTWebSocketExecutor.mm и измените «localhost» на IP-адрес вашего компьютера, затем выберите «Debug JS Remotely» в меню Dev.

      Если у вас возникли проблемы, возможно, одно из ваших расширений Chrome взаимодействует с отладчиком неожиданным образом. Попробуйте отключить все расширения и снова включить их по одному, пока не найдете проблемное расширение.

      Дополнительно: Отладка с помощью пользовательского отладчика JavaScript

      Чтобы использовать пользовательский отладчик JavaScript вместо Chrome Developer Tools, установите переменную окружения REACT_DEBUGGER в команду, которая запустит ваш пользовательский отладчик. Затем вы можете выбрать «Открыть отладчик» в меню Dev, чтобы начать отладку.

      Отладчик получит список всех корней проекта, разделенных пробелом. Например, если вы установите REACT_DEBUGGER=»node /path/to/launchDebugger.js —port 2345 —type ReactNative» , то команда node /path/to/launchDebugger.js —port 2345 —type ReactNative /path/to/reactNative/app будет использована для запуска вашего отладчика.

      Пользовательские команды отладчика, выполняемые таким образом, должны быть кратковременными процессами, и они не должны производить более 200 килобайт вывода.

      Инструменты разработчика Safari¶

      Вы можете использовать Safari для отладки iOS-версии вашего приложения без необходимости включать «Debug JS Remotely».

      • На физическом устройстве перейдите в: Настройки → Safari → Дополнительно → Убедитесь, что «Веб-инспектор» включен (Этот шаг не требуется на симуляторе).
      • На вашем Mac включите меню Develop в Safari: Настройки. (или Preferences. ) → Дополнительно → Выберите «Show Develop menu in menu bar» .
      • Выберите JSContext вашего приложения: Develop → Simulator (или другое устройство) → JSContext .
      • Должен открыться веб-инспектор Safari с консолью и отладчиком.

      Хотя карты источников могут быть не включены по умолчанию, вы можете следовать этому руководству или видео, чтобы включить их и установить точки останова в нужных местах исходного кода.

      Однако при каждой перезагрузке приложения (с помощью живой перезагрузки или вручную) создается новый JSContext. Выбор «Автоматически показывать веб-инспекторы для JSContexts» избавляет вас от необходимости выбирать последний JSContext вручную.

      Монитор производительности¶

      Вы можете включить наложение производительности, чтобы помочь вам отладить проблемы производительности, выбрав «Perf Monitor» в меню Dev.

      Комментарии

      (C) 2021-2023, Справочник React Native разработчика

      Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. —>

      Как клонировать create-react-app и запустить на локалке?

      На сайте с документацией я не нашел инфу про клонирование.

      Или я плохо искал?

      • Вопрос задан более трёх лет назад
      • 3908 просмотров

      Комментировать
      Решения вопроса 1
      inflexible @inflexible

      ну. npm init выполнять не нужно было) в клонированном проекте уже должен быть package.json в котором есть список зависимостей! выполняете npm install, чтобы установить все зависимости которые есть в проекте! дальше выполняете npm start или npm build (смотря что вам нужно)! но прежде чем запускать — зайдите в package.json и убедитесь что эти команды присутствуют в свойстве «scripts», возможно командой npm init вы обнулили файл)

      p.s. По клонированию ничего особо искать не нужно! Его можно сделать командой «git clone gitproject» или просто скачать архив и распаковать, это вообще не играет роли! Просто его origin будет ссылаться на этот «родительский» репозиторий! Но нужно понимать что папки node_modules не будет, поэтому после клонирования обьязательно нужно выполнить npm install!

      Как запустить чужой проект?

      Добрый день . хотел скачать и запустить чужой проект, чтобы рассмотреть его функции. но столкнулся с рядом проблем . что он не изволяет запускаться , и просто не знаю что делать, помогите пожалуйста
      ___
      КЛац

      1) в рабочую папку скопировал tutorialProject
      2) открыл VS code
      3) зашел в рабочую папку и нажал открыть в cmd папку tutorialProject
      4) далее я ввожу react-native run-android
      и получаю фиаско

      d:\JS\tutorialProject>react-native init tutorialProject
      internal/modules/cjs/loader.js:657
      throw err;
      ^

      Error: Cannot find module ‘graceful-fs’
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
      at Function.Module._load (internal/modules/cjs/loader.js:580:25)
      at Module.require (internal/modules/cjs/loader.js:711:19)
      at require (internal/modules/cjs/helpers.js:14:16)
      at Object. (d:\JS\tutorialProject\node_modules\react-native\local-cli\cli.js:12:1)
      at Module._compile (internal/modules/cjs/loader.js:805:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
      at Module.load (internal/modules/cjs/loader.js:672:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
      at Function.Module._load (internal/modules/cjs/loader.js:604:3)

      начал гуглить и нашел что надо сделать какието зависимости . посредством «react-native init MyProject»
      5) react-native init tutorialProject
      и получаю туже самую строчку .
      пытаюсь через npm сервер запустить и тут прикол .
      6) npm intall

      d:\JS\tutorialProject>npm install
      npm WARN deprecated core-js@1.2.7: core-js@ npm WARN deprecated connect@2.30.2: connect 2.x series is deprecated
      npm ERR! path d:\JS\tutorialProject\node_modules\.bin\react-native
      npm ERR! code EEXIST
      npm ERR! Refusing to delete d:\JS\tutorialProject\node_modules\.bin\react-native: is outside d:\JS\tutorialProject\node_modules\react-native and not a link
      npm ERR! File exists: d:\JS\tutorialProject\node_modules\.bin\react-native
      npm ERR! Move it away, and try again.

      npm ERR! A complete log of this run can be found in:
      npm ERR! C:\Users\Nick\AppData\Roaming\npm-cache\_logs\2019-04-16T18_15_13_614Z-debug.log

      и вот я совсем хз . как запустить чужой проект ?
      помогите плз

      • Вопрос задан более трёх лет назад
      • 861 просмотр
      Похожие публикации:

      1. Как вывести unsigned long long в си
      2. Как изменить размер кнопки в тильде
      3. Как подключить сберпэй на андроиде ксиоми
      4. Как разместить форму по центру html