Giter Club home page Giter Club logo

rncorefoundation's Introduction

React Native App Core Foundation Template

Bootstrap your React Navive App on the right foot with a set of widely accepted best practices in this opinionated template for React Native CLI.

Getting Started

Prerequisites

Requirement Dependencies Platform Notes
React Native Environment Setup Node.js Node Runtime
Watchman Dev hot reload file watcher
npx bootstrap npm wrapper		 All Follow React Native environment setup guide to install dependencies.
Xcode Xcode CLI Tools OSX Must use a Mac to build for iOS. Includes iOS simulator to run your apps.
android studio All Includes Android simulator to run your apps.

Setup a New App Project

Note: Same steps as react-native cli. Shown here for convenience.

Recommendation: Use npx instead of npm to execute react-native cli.

git clone https://github.com/davidmiura/RNCoreFoundation.git

npx react-native init my_cool_app --npm --template file:///<full_path_to_RNCoreFoundation_clone>

React-native builds my_cool_app using npm and the template. It will run npm install for the provided package.json to install npm packages.

See: Example Log

Run App for iOS

Note: Same steps as react-native cli. Shown here for convenience.

cd my_cool_app
npx react-native run-ios

You should see overall build progress in the console. React-native will perform pod install for the ios\podfile. The build process will launch a React Native Metro Server which serves your JS app to the device. The build will also install and launch your app in the iOS simulator.

See: Example Log

Alternate build using specific simulated device

List iOS simulator devices

xcrun simctl list devices

Build and deploy to specific device

npx react-native run-ios --simulator="iPhone 11 Pro Max"

Alternate manual NPM steps

npm install

cd ios
pod install
cd ..

npm run ios

Run App for Android

Note: Same steps as react-native cli. Shown here for convenience.

Requires Android Studio

cd my_cool_app
npx react-native run-android

Best Practices

Code Quality

Best Practice Method Configuration Command Notes
Type Safety TypeScript tsconfig.json
Linting ESLint .eslintrc.js npm run lint
npm run lint-fix
Unit Testing Jest package.json npm run test
Code Formatting Prettier .prittierrc.js npm run lint-fix
Code Promotion Quality Husky package.json git commit
git push		 Git Hooks

UX

Best Practice Method Notes
UX Component Lib React Native Paper Material Design UX Style
Navigation React Navigation v5

Security

Best Practice Method Notes
Authentication TBD 3rd Party Provider
Authorization TBD/RBAC Make a lib/service suggestion!
API Access Control JWT Bearer Token RFC 7523

Data Flow

Best Practice Method Notes
App State Management Redux Toolkit Wrapper for Redux
API Graphql
API REST

Code Layout

.
├── android
│   ├── app
│   └── gradle
├── ios
│   ├── Pods
│   ├── <APP_NAME>
│   ├── <APP_NAME>-tvOS
│   ├── <APP_NAME>-tvOSTests
│   ├── <APP_NAME>.xcodeproj
│   ├── <APP_NAME>.xcworkspace
│   └── <APP_NAME>Tests
└── src
    ├── __tests__
    ├── assets
    ├── components
    ├── config
    ├── features
    ├── library
    ├── navigators
    ├── screens
    ├── scripts
    ├── store
    ├── styles
    └── utils

Layout Map

Note: Each \src\element has it's own package.json to simplify imports without using relataive paths.

Element Path Notes
Tools Config root Build system, code quality, docs.
Android Target \android Requires Android Studio
iOS Target \ios Open <APP_NAME>.xcworkspace file in xCode
Unit Tests \src\__tests__ Integration Jest tests. Component unit tests are co-located within component.
Static Assets \src\assets Binary assets, ie images
React Components \src\components React components local to app. ie Hooks, Components, Contexts, etc.
App Config \src\config App local configs
Features \src\features Deprecated
Library \src\library Deprecated
Navigation UX \src\navigators React Navigation navigators
Screen UX \src\screens React Navigation screens
NPM Scripts \src\scripts NPM package.json scripts
Redux Store \src\store Redux store and store slices
Style UX \src\style Themes, palettes, typography, element ux specs, accessablity, etc.
Utils \src\utils Minimize or deprecate

Developer Experience

Metro JS Server and Hot Reloading

Metro Dev Server Config

rncorefoundation's People

Stargazers

avatar David Miura avatar

Watchers

David Miura avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.