Cara membuka VSCode melalui terminal, Membuat custom script di package.json, Struktur Project RN

Summary

In this video, the creator takes viewers through a comprehensive guide to understanding the structure of a React Native project. Starting with how to open and set up Visual Studio Code, the tutorial covers project organization, the role of essential files like package.json, and the importance of dependencies and devDependencies. It also explains the usage of scripts, testing, and error checking tools such as Prettier and ESLint. Additionally, the video highlights the configuration of iOS and Android specific folders, and the importance of the gitignore file in managing project files, helping viewers gain a deeper understanding of React Native project structure and setup.

Takeaways

• 😀 Visual Studio Code can be opened in two ways: directly from the application or via Terminal using the 'code .' command.
• 😀 To use the 'code .' command in Terminal, you need to install the 'code' command in your shell through Visual Studio Code settings.
• 😀 The package.json file records essential details about the project, such as dependencies, scripts, and project configurations.
• 😀 React Native's scripts like 'react-native run-android' and 'react-native run-ios' are defined in the package.json file for managing platform-specific builds.
• 😀 Custom scripts can be added to package.json for tasks like running an Android emulator, making it more convenient for developers.
• 😀 Dependencies listed in 'dependencies' are essential for the project's functionality, while 'devDependencies' are only needed during development.
• 😀 The 'index.js' file is the first entry point in a React Native project, where the app is registered and the main screen is displayed.
• 😀 The app's first screen, such as the welcome screen, is usually rendered from the App component, defined in a separate file like 'App.js'.
• 😀 Prettier is used for auto-formatting code to maintain a consistent code style, while ESLint helps identify and display errors related to coding standards.
• 😀 The 'node_modules' folder stores all installed packages and dependencies, which can be quite large in React Native projects, so it’s often minimized in the file explorer.
• 😀 The 'gitignore' file ensures that certain files or folders (like the 'build' folder) are excluded from being committed to version control systems like Git.

Q & A

What are the two ways to open a React Native project in Visual Studio Code?

The two ways to open a React Native project in Visual Studio Code are: 1) Open Visual Studio Code and manually load the project via the 'Open' file option. 2) Use the terminal by navigating to the project directory and running the command 'code .' to automatically open Visual Studio Code with the project.

What setup is required to use the 'code .' command in the terminal?

To use the 'code .' command in the terminal, you need to set it up in Visual Studio Code by running the command 'Shell Command: Install code command in PATH'. This enables the terminal to open Visual Studio Code directly with the current project directory.

What is the significance of the 'package.json' file in a React Native project?

The 'package.json' file in a React Native project holds important information about the project, including its name, version, and dependencies. It also stores scripts that can be run in the terminal, such as 'react-native run-android' for running the app on an Android device.

How can you add custom scripts to the 'package.json' file?

You can add custom scripts to the 'package.json' file by editing the 'scripts' section. For example, you can create a custom script for running an Android emulator by specifying the necessary commands to launch it within that section.

What is the difference between 'dependencies' and 'devDependencies' in the 'package.json' file?

'Dependencies' are packages that are required for the application to run in production, and removing them can break the application. 'DevDependencies' are packages that are used only during development (e.g., testing, building), and removing them won't affect the production environment.

What is the role of the 'index.js' file in a React Native project?

The 'index.js' file is the entry point of a React Native application. It imports necessary components and registers the main application component so that the app can be displayed when the project is run.

What does the 'App.js' file do in a React Native project?

The 'App.js' file contains the main component of the application. It is typically the first screen that the user sees when the app is launched, and its content can be customized to display the desired interface.

How can Prettier and ESLint help in a React Native project?

Prettier helps to format the code by ensuring consistent structure and style, while ESLint checks for errors or deviations from best practices in JavaScript. Both tools improve the readability and maintainability of the codebase.

What is the purpose of the '.gitignore' file in a React Native project?

The '.gitignore' file is used to exclude certain files or folders from being tracked by Git. For example, it can be used to ignore the 'build' directory, which contains generated files that should not be committed to the repository.

What is the significance of the 'node_modules' folder in a React Native project?

The 'node_modules' folder contains all the installed dependencies and packages required by the project. These are typically managed by npm or yarn and are essential for running the application and its various functionalities.