CODEWITHSUNDEEP
reactjsreact-nativemobile-development
Iuri Siva
Iuri Siva

Reputation: 29

What is the purpose of each file in the React Native file architecture?

I started to use React Native recently and, following the oficial docs, I initialized a project using npx react-native init ProjectName.

I'm not sure if the tools versions matters (probably yes), but i'm using npm version 6.13.7, react-native-cli version 2.0.1 and react-native 0.62.2. With that config, the file architecture i that get is the following:

react native file architeture

I seached about it, but i not found an answer. So, can someone please explain to me what is the purpose of each file in this file architecture and which of these files can i remove?

Thank you in advance :D

Upvotes: 1

Views: 815

Answers (1)

Waheed Akhtar
Waheed Akhtar

Reputation: 3187

Package.json

This file holds all of the dependencies of modules that your app is using and needed to install for running your app.

yarn.lock files yarn and package-lock.json

These two files hold the version of your dependencies yarn.lock package-lock.json is automatically generated for any operations where npm or yarn modifies either the node_modules tree or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

app.json

This file holds your application name etc.

babel.config.js

This file holds configs related to babel, Babels is a transpiler that transpile ES6 to ES5.

index.js

This is the entry point of your application form where your react-native code start executing.

EsLint and Prettier

These file related to maintaining the code indentation, Unused imports, extra, spacing, these files holds configs related to these things(EsLint and prettier are used to avoid above-mentioned things).

.watchMan

watchman watches the code changes when the packager is running, so this file have configs about this.

.Flow

Flow is been used for type checking so it holds the configs related to this.

node_modules

This folder holds all of the modules that your app is been using also lited down in your package.json.

And then there is Android(which holds native android code), IOS(which holds native ios code), and other JS files which holds code react-native js code.

Upvotes: 1

Related Questions