docs(react): show complete code context in the "Your First App" tutorial #4201
Conversation
|
@joesphchang is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
I noticed that some method names from the Angular version and Vue version do not match even though they have the same code. For example, addNewToGallery from Angular and usePhotoGallery from Vue. Let's also sync those to match Angular as close as possible.
The same goes for the <title>. Let's match it to Angular.
Lastly, some of the content also doesn't match each other. A good example, Angular Build Your First App mentions:
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both ion-title elements to:
While React states:
`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
| <DocsCard header="Action Sheet" href="api/action-sheet" icon="/icons/component-action-sheet-icon.png"> | ||
| <p>Action Sheets display a set of options with the ability to confirm or cancel an action.</p> | ||
| </DocsCard> | ||
|
|
There was a problem hiding this comment.
Revert this change since it's not related to the issue.
| ``` | ||
|
|
||
| We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports at the top of the page to include the Camera icon as well as some of the Ionic components we'll use shortly: | ||
| We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon. |
There was a problem hiding this comment.
The components for React are in Pascal case.
| We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon. | |
| We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon. |
There was a problem hiding this comment.
There's a code block that has the following comment: <!-- some filler -->. This needs to be replaced to be the entire code. Review this PR for how it should be.
Resolves: #4164
Changes:
Update code blocks in first 5 pages of ReactPhoto App tutorial to show additional context for each step with comments to indicate new lines.