React Directory Structure
React App directory structure turned into React Native Starter Kit. API Client, Helpers and Context Setup.
Overview
The react-directory-structure is a React Native and React boilerplate that provides a structured directory setup for starting new projects. It includes reusable components, context setup, API services, navigation, error handling, and more. This boilerplate can be used as a starting point for both React Native and React Web projects.
Features
- Context API: Allows for state management and sharing data between components.
- Components / Screens: Included reusable components and screens for building user interfaces.
- Hooks: Provides custom hooks for common functionalities and state management.
- API Services Setup with apisauce: Sets up API services using the apisauce library for making HTTP requests.
- Config: Configuration setup for the project, including environment variables.
- Library Helpful functions: Includes a library of helpful utility functions for various tasks.
- Navigation: Sets up navigation for the application using a navigation library.
- Assets and Themes: Handles assets such as images and themes for consistent styling.
- Global error handling with notification: Provides a global error handler and notification system for displaying error messages.
Summary
The react-directory-structure is a useful boilerplate for setting up new React Native and React Web projects. It provides a well-organized directory structure, reusable components, state management with the Context API, API integration, navigation setup, and error handling. By following the provided installation guide, developers can quickly start new projects and build upon this solid foundation.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- React Native
React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.
- Expo
An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.
- Formik
Formik is a popular form library for React that helps with form state management, validation, and submission handling. It provides a declarative approach to building forms with support for complex validation scenarios and easy integration with validation libraries like Yup.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.