All Files and Folder in React Native

Root Directory

1. node_modules/: This directory contains all the npm packages installed for the project. You typically don’t need to touch this folder directly.
2. android/: This directory contains the Android-specific code and configurations. It’s an Android project on its own, generated by React Native CLI.
3. ios/: This directory contains the iOS-specific code and configurations. Like the Android directory, it’s an Xcode project generated by React Native CLI.
4. App.js: This is the main JavaScript entry point component of your application. It typically contains the root component of your app.
5. index.js: This is the entry point used by React Native to bootstrap the application. It registers the root component defined in App.js with the application.
6. package.json: This file contains metadata about the project, including the list of dependencies and scripts to run various tasks.
7. .gitignore: This file specifies which files and directories should be ignored by Git version control.
8. babel.config.js: This configuration file for Babel, the JavaScript compiler, allows you to use the latest JavaScript features.
9. metro.config.js: This file is for configuring Metro, the JavaScript bundler used by React Native.
10. .eslintrc.js (or similar): This configuration file for ESLint defines the linting rules for your JavaScript code.
11. README.md: This is a markdown file that provides an overview of the project, how to set it up, and how to contribute.

Metro

A React Native app is a compiled app that is running some JavaScript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting you know the packager is running.

The packager does a few things:

Combines all your JavaScript code into a single file and translates any JavaScript code that your device won’t understand (like JSX or some of the newer JS syntax).

Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.

Key Functions of Metro

1. Bundling JavaScript Code:
   • Metro takes all the JavaScript and React components you write and packages them into a single JavaScript bundle that can be executed by the React Native runtime on a mobile device.
2. Transforming Code:
   • It uses Babel to transform modern JavaScript (ES6/ES7) and JSX into code that can run in JavaScript environments supported by React Native. This ensures compatibility with a wide range of devices and platforms.
3. Handling Dependencies:
   • Metro constructs a dependency graph starting from the entry point (usually index.js) and includes all the dependencies required by your application. It ensures that all modules are included in the final bundle.
4. Hot Module Replacement (HMR):
   • Metro supports HMR, which allows developers to see changes in their code immediately without a full reload of the application. This significantly speeds up the development process.
5. Minification:
   • For production builds, Metro minifies the JavaScript code to reduce the size of the bundle, which helps improve the app’s load time and performance.
6. Source Maps:
   • Metro generates source maps that map the minified code back to the original source code. This is crucial for debugging, as it allows developers to see the original code in their debugging tools.
7. Serving Assets:
   • Metro can bundle and serve assets such as images, fonts, and other static resources required by the application.

How Metro Works

1. Starting Metro:
   • When you run a command like npx react-native start, Metro starts a local server that serves the bundled JavaScript code and assets to the React Native app.
2. Watching for Changes:
   • Metro watches for changes in the JavaScript files. When a file is modified, Metro incrementally rebuilds only the affected parts of the bundle, making the update process faster.
3. Bundling Process:
   • Entry Point: Metro starts from the entry file (typically index.js) and traverses all the import and require statements to build a dependency graph.
   • Transformation: Each JavaScript file is transformed using Babel and other plugins configured in the project.
   • Concatenation: The transformed files are concatenated into a single or multiple bundles, depending on the configuration.
4. Serving the Bundle:
   • Metro serves the bundled JavaScript over HTTP to the React Native runtime. The app fetches this bundle at startup and executes it.
5. Handling Updates:
   • Live Reload: The app reloads completely when files change.
   • Hot Module Replacement: Only the changed modules are updated in the running application without a full reload, preserving the application state.

Babel

Babel is a widely used JavaScript compiler that allows developers to write code using the latest JavaScript features and syntaxes, then transforms this code into a version that is compatible with older JavaScript environments. This ensures that modern JavaScript code can run on a variety of browsers and environments that may not yet support the latest language features.

Key Features of Babel

1. JavaScript Transpilation:
   • Babel converts modern JavaScript (ES6/ES7/ESNext) into ES5 or other versions that can run in older browsers and environments.
2. Plugin System:
   • Babel has a flexible plugin system that allows developers to extend its functionality. Plugins can transform specific JavaScript syntax, handle different file types (like TypeScript or JSX), and more.
3. Preset Configurations:
   • Presets are collections of plugins bundled together to simplify the configuration process. Common presets include @babel/preset-env, @babel/preset-react, and @babel/preset-typescript.
4. Polyfilling:
   • Babel can be configured to include polyfills for newer JavaScript features that are not natively supported in older environments, ensuring full compatibility.
5. Code Transformations:
   • Beyond simple transpilation, Babel can perform various code transformations, including optimizing and minifying code, removing dead code, and more.

How Babel Works

1. Parsing:
   • Babel parses the modern JavaScript code into an Abstract Syntax Tree (AST), which is a structured representation of the code.
2. Transforming:
   • Using plugins and presets, Babel traverses and transforms the AST, converting modern syntax into older equivalents.
3. Generating:
   • Babel generates the transformed code from the modified AST. This output code is typically in a format compatible with older JavaScript environments.

Common Babel Use Cases

1. Modern JavaScript Compatibility:
   • Ensuring that code written using ES6+ features (like arrow functions, classes, template literals) can run in environments that only support ES5.
2. React Development:
   • Transforming JSX syntax used in React applications into standard JavaScript. For example, Babel converts <Component /> syntax into React.createElement(Component) calls.
3. TypeScript Support:
   • Babel can transpile TypeScript code to JavaScript, allowing for type checking and other TypeScript features while still producing runnable JavaScript.
4. Optimizations and Minification:
   • Babel can remove unused code, inline constants, and perform other optimizations to make the final JavaScript bundle smaller and more efficient.