My ReactNative Journey - 2 - Understanding the folder contents

Understanding the folder structure and the files in it.

React native is a platform on which we can make both Android and IOS apps with a single code structure How does it do it? We will try and make sense of what is happening behind the scenes. To start with, react native CLI creates the following files/directories in the project folder, when it creates a project:

  • _tests_ - Testing Support
Jest is a JavaScript test runner, that is, a JavaScript library for creating, running, and structuring tests. Jest ships as an NPM package, you can install it in any JavaScript project. Jest is one of the most popular test runner these days, and the default choice for React projectsThis folder contains project test files. There are three ways of setting up the testing folders.
  1. src/file.test.js mentioned first in the Getting Started docs, and is great for keeping tests (especially unit) easy to find next to source files
  2. src/__tests__/file.test.js lets you have multiple __tests__ directories so tests are still near original files without cluttering the same directories
  3. __tests__/file.test.js more like older test frameworks that put all the tests in a separate directory; while Jest does support it, it's not as easy to keep tests organized and discoverable


  • .vscode - created by vscode for its own purposes
  • android - created for running code on android. 
  • ios - created for running code on iOS
  • node_modules - created for keeping node libraries.
  • .buckconfig - The root of your project must contain a configuration file named .buckconfig. Before executing, Buck reads this file to incorporate any customizations it specifies. More information here  I am not sure at this time if or how buck is being used in this project. Will come back to this later maybe.
  • .flowconfig - Flow is a framework that, like TypeScript, promotes static typing in JavaScript. And like TypeScript it ships with React Native without any issues. It lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early. More on this here
If you use Git, the following two folders will have information for Git, on how to handle the different files and which ones to ignore.
  • .gitattributes
  • .gitignore
      Code Formatting, Styling and Syntax Checking
  • .eslintrc.js - ESLint helps us write a better code by checking if our code is well written, well-formatted, and respects some rules defined as the best practices for maintainable and consistent code.It is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:
    • ESLint uses Espree for JavaScript parsing.
    • ESLint uses an AST to evaluate patterns in code.
    • ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.
  • .prettierc.js - Prettier is a code style formatter, different from ESLint, Prettier only formats the code style, and does not look for syntax problems. 
Rules like max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style are some popular formatting rules in Prettier, and rules like no-unused-vars, no-extra-bind,
no=implicit-globals, prefer-promise-reject-errors are common rules in ESLint.

Reference Sites and More information here: https://eslint.org/docs/user-guide/getting-started and here:  https://blog.devgenius.io/eslint-prettier-typescript-and-react-in-2022-e5021ebca2b1
  • .watchmanconfig - Watchman is a file watching service. It Watches files and records, or triggers actions, when they change. When watching a root, if a valid JSON file  named .watchmanconfig is present in the root directory, watchman will load it and use it as a source of configuration information specific to that root.
I do not know at this point if this is all that is required for the watching to be done, or whether watchman comes pre-installed with Node.js, or it requires some more installations and structure to work. The file was empty when react native created it for the project.
  • babel.config.js -  Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
    • Transform syntax
    • Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
    • Source code transformations (codemods)
    • And more! (check out these videos for inspiration)
More details here : https://babeljs.io/docs/en/
  • index.js - This is the starting point for React Native applications, and it is always required. It can be a small file that require s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
More details can be found in the React Native Documentation here:  https://reactnative.dev/docs/integration-with-existing-apps
  • metro.config.js - Every time you run a react native project, many javascript files are compiled into a single JS file. This compilation is done by a bundler called Metro. The metro.config.js file provides Metro with all the information it needs to do its job.
Source: https://rishabh0297.medium.com/role-of-metro-bundler-in-react-native-24d178c7117e
  • package.json - automatically maintains all module dependencies along with version numbers. This is useful if you happen to lose some of your dependencies.
  • yarn.lock - Autogenerated file, used by Yarn
So, there you are, an extremely brief glimpse on the files and folders that form the eco-system of a React Native Project. Good Luck from here.

Comments

Post a Comment

Popular posts from this blog

Reading a pre-populated sqlite database using react native with expo..

Image
I recently needed to read an existing sqlite database, and return its contents to the react native front-end on an android emulator.  I  read several related posts on the subject but they all give examples of console logging, never returning.  I faced quite some difficulties, and hence decided to create this post as a blog. Hope it helps someone who comes here looking for a solution. Usually, there are two main issues that you would face. One, you would notice that simply opening a database and fetching won't work. You need to copy the local database to an internal document store and then use that database. Second, you would notice that there is no way of 'returning' the value of  a variable in the traditional sense of the term. You must handle it within the async function itself. So follow me for the solution.  Step 1. Create the root folder. From the terminal in the root folder, create the react native app with expo using : expo init newApp Choose the blank te...
Read more

React Hooks - useState Vs useRef (An explanation)

Image
I have tried to provide a brief  flowchart representation of how useState, useEffect and useRef work. The source for this explanation is from  WebDev Simplified's you tube channel . Suppose you wanted to show a name field and a count field to count how many times you updated the name field.  The diagram below shows the code (not focussing too much on the syntax and stuff), how one would normally do it, and the challenges/details of how react will work in each case. In general, on the left part of the diagram, I have provided the code, the middle part displays the contents of the form as things happen, and have included some explanation on how it all works on the right part.  Hoping the picture is self-explanatory.  The biggest usecase for useRef is to refer to the elements inside of the HTML. Each element inside the focument has a 'ref' attribute which can be set to anything. Most common use is to set focus to a certain element in the DOM. In the pictorial below...
Read more