A simple To-Pack List App for HackFridays: Mobile React 101 package.
-
Please make sure to carefully follow all the instructions on React Native's official documentation depending on your development operating system:
-
Clone 2pack-list:
https://github.com/Cloudoki/2pack-list.git -
Install project dependencies:
npm install
After following the React Native's tutorial and installing all the project dependencies, you should be able to run and test your mobile application.
The React Native Packager is similar to Webpack, providing a CommonJS-like module system, JavaScript compilation (ES6, Flow, JSX), bundling, and asset loading.
react-native start
-
In Android Studio, open the project located in the
androidfolder. -
Go to Tools -> Android -> AVD Manager
-
Create a Virtual Device (See the example below)
-
Run your Virtual Device
-
Finally run the app with
react-native run-android
The process for running your app in iOS is more straightforward. Just run react-native run-ios command and you should see your app running in the iOS Simulator shortly. You can also run it directly from within Xcode by opening the project located in ios/ToPack.xcodeproj.
Note: If you want to test your app on an actual device, follow the instructions Running on Device.
.
├── .babelrc # Configures Babel
├── .editorconfig # Configures editor rules
├── .eslintrc # Configures ESLint
├── .flowconfig # Configures Flow
├── .gitignore # Tells git which files to ignore
├── .gitattributes # Gives attributes to pathnames
├── index.android.js # Entry point for your Android app into the React Native code
├── index.ios.js # Entry point for your IOS app into the React Native code
├── package.json # Package configuration. The list of 3rd party libraries and utilities
├── README.md # This file.
├── android # Directory with all your Android native code
├── ios # Directory with all your IOS native code
├── src # Source code
│ ├── components # React components
│ ├── constants # Application constants including constants for Redux
│ ├── containers # High order component logic wrappers
│ ├── images # App images
│ ├── reducers # Redux reducers. Your state is altered here based on actions
│ ├── index.js # Combines all reducers into one
│ ├── store # Redux store configuration
│ ├── ToPack.js # Entry point for your app
##Technologies
| Tech | Description | Learn More |
|---|---|---|
| React | Fast, composable client-side components. | Pluralsight Course |
| React Native | A framework for building native apps with React. | Egghead Course |
| Redux | Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging. Lean alternative to Facebook's Flux. | Pluralsight Course, Egghead Course |
| RN Router Flux | React Native Router based on new React Native Navigation API | Using react-native-router-flux |
| Babel | Compiles ES6 to ES5. Enjoy the new version of JavaScript today. | ES6 REPL, ES6 vs ES5, ES6 Katas, Pluralsight course |
| ESLint | Lint JS. Reports syntax and style issues. Using eslint-plugin-react for additional React specific linting rules. |
##Suggestions
- Native Base: Essential cross-platform UI components for React Native.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent