| 1 | ## @ionic/react (beta)
|
| 2 |
|
| 3 | These are React specific building blocks on top of [@ionic/core](https://www.npmjs.com/package/@ionic/core) components/services.
|
| 4 |
|
| 5 | To get started, install the Ionic CLI by running `npm i -g ionic`. Then, start a new Ionic React Project by running `ionic start myapp --type=react`.
|
| 6 |
|
| 7 | # Current Status of Components
|
| 8 |
|
| 9 | Below is a list of components yet to be implemented:
|
| 10 |
|
| 11 | | Component |
|
| 12 | | ------------------ |
|
| 13 | | `IonVirtualScroll` |
|
| 14 |
|
| 15 | ## Publishing a Native Application
|
| 16 |
|
| 17 | You can now make use of all of the ionic components in your React application.
|
| 18 | If you want to publish your app to the App Store or Google Play you will need to use the ionic cli to execute Capacitor commands to do so.
|
| 19 |
|
| 20 | More information on this can be found here. https://ionicframework.com/docs/cli
|
| 21 | If you want to learn more about Capacitor our dedicated site can be found here. https://capacitor.ionicframework.com/
|
| 22 |
|
| 23 | The commands that you will need to execute are below in your project's root.
|
| 24 |
|
| 25 | ```sh
|
| 26 | ionic init "My React App" --type=react
|
| 27 | ionic integrations enable capacitor
|
| 28 | ```
|
| 29 |
|
| 30 | Open the './capacitor.config.json' file in your projects root.
|
| 31 | Change `"webDir": "www"` to be `"webDir": "build"` (dependent on your config but Ionic React defaults with this as the build directory)
|
| 32 |
|
| 33 | Then run the following command to get started with either `ios` or `android` platforms.
|
| 34 | ```
|
| 35 | ionic capacitor add <android|ios>
|
| 36 | ```
|
| 37 |
|
| 38 | After build you build your app you will need to copy your capacitor resources into the build dir so execute the following command.
|
| 39 | ```
|
| 40 | ionic capacitor copy
|
| 41 | ```
|
| 42 |
|
| 43 | To open your application to build/emulate in Android Studio or Xcode run the `open` command.
|
| 44 | ```
|
| 45 | ionic capacitor open <android|ios>
|
| 46 | ```
|
| 47 |
|
| 48 |
|
| 49 | ## Related
|
| 50 |
|
| 51 | * [Ionic Documentation](https://ionicframework.com/docs/)
|
| 52 | * [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/)
|
| 53 | * [Ionic Forum](https://forum.ionicframework.com/)
|
| 54 | * [Ionicons](http://ionicons.com/)
|
| 55 | * [Capacitor](https://capacitor.ionicframework.com/)
|
| 56 |
|
| 57 |
|
| 58 | ## License
|
| 59 |
|
| 60 | * [MIT](https://raw.githubusercontent.com/ionic-team/ionic/master/LICENSE)
|