Игра с React Native - # 3
Привет, ребята, здесь мы собираемся начать работу с новым проектом React Native. Но нам нужно создать для этого среду. Для этого см. Мой предыдущий пост.
Чтобы преобразовать ваши потрясающие идеи в приложения, мы должны знать базовые вещи, например, какие файлы присутствуют и что они делают в пустом проекте React Native. Мы увидим эти подробности в этом посте.
Для начала создадим пустой проект с помощью «response-native init». Попробуйте выполнить следующую команду в терминале или командной строке.
react-native init YourAwesomeProject
Примечание. Замените ‹YourAwesomeProject› на название своего проекта.
Эта команда создаст несколько файлов и установит все необходимые пакеты для обычного базового приложения React Native. Вот некоторые из основных необходимых пакетов: react, react-native, babel » и так далее.
Вы найдете папку с названием YourAwesomeProject, в которой вы выполнили команду. Откройте его в любой из ваших любимых IDE (Webstorm, VSCode или Sublime Text).
Вы увидите много файлов и папок в этом каталоге, как показано ниже. Теперь давайте обсудим использование и назначение всех созданных файлов и каталогов.
android /
Этот каталог содержит собственное приложение Android, подобное тому, которое разработано в Android Studio. Здесь вы можете изменить имя пакета приложения, сгенерировать релизные сборки, изменить конфигурации Gradle, зависимости и так далее.
ios /
Этот каталог содержит собственное приложение iOS, подобное тому, которое разработано в Xcode. Здесь вы можете изменить идентификатор пакета, версию приложения, добавить и использовать cocoapods, переключаться между отладочной и выпускной сборками и т. Д.
node_modules /
Этот каталог содержит все пакеты узлов и их зависимости, необходимые для базового приложения React Native. Мы можем добавить в него дополнительные пакеты, используя команду «npm install».
index.js
В этом файле мы указываем компонент, который необходимо смонтировать после запуска приложения. Эту операцию можно выполнить с помощью следующего кода, который можно найти здесь.
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Приложение - это компонент, который экспортируется из файла «App.js», а appName - это строка, обозначающая имя приложения, упомянутого в файле app.json. «AppRegistry.registerComponent ()» регистрирует компонент «Приложение» в соответствующих каталогах в зависимости от платформы.
App.js
Здесь мы определяем компонент приложения, который импортируется в index.js. Компонент приложения может быть функциональным или классовым компонентом, использующим методы жизненного цикла, такие как render (), componentDidMount () и так далее.
app.json
Этот файл содержит имя, отображаемое имя и отображаемое имя приложений Android и iOS.
package.json
Этот файл содержит все метаданные, относящиеся к проекту, такие как имя проекта, автор, URL-адрес проекта и т. Д., А также пакеты узлов, которые установлены в проекте. Это также намного больше похоже на то, что упомянуто здесь.
.babelrc
Это файл конфигурации для пакета Babel. Babel - это набор инструментов, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в текущих и старых браузерах или средах.
.buckconfig
Это файл конфигурации для пакета Buck. Buck - это система сборки, разработанная и используемая Facebook. Он поощряет создание небольших многократно используемых модулей, состоящих из кода и ресурсов, и поддерживает множество языков на многих платформах.
.flowconfig
Это файл конфигурации для пакета Flow. Flow - это средство проверки статического типа для вашего кода JavaScript. Это позволяет вам писать код быстрее, проверяя синтаксис и некоторую логику кода.
.gitattributes
Файл .gitattributes - это простой текстовый файл, который задает атрибуты для имен путей. Каждая строка в этом файле имеет форму: шаблон attr1 attr2…. Зайдите здесь, чтобы узнать больше.
.gitingnore
Этот файл содержит все имена и типы файлов и каталогов, которые не должны быть включены в репозиторий git проекта. Зайдите здесь, чтобы узнать больше.
.watchmanconfig
Здесь существует конфигурация пакета сторожа. Watchman следит за файлами проекта на предмет любых изменений и выполняет определенные команды или функции, которые вы указали в файле «.watchmanconfig».
Вот и все, теперь вы должны иметь довольно хорошее представление о том, что делает каждый файл в базовом проекте React Native. В следующем посте мы увидим, как создать ваше первое приложение и запустить его в режиме отладки и выпуска.
Пост «Запуск вашего первого приложения ReactNative» готовится и скоро будет подан горячим в моем следующем посте.
Скажите Привет, это бесплатно. @Matheswaaran_S или https://matheswaaran.com
