ENDOC-504 Start updating the React MFE tutorial. #514
Conversation
| We'll use [Create React App](https://create-react-app.dev/) to generate a simple app in seconds. | ||
| 1. Create 'my-widget' directory structure with the following: | ||
| ## Create a React App | ||
| [Create React App](https://create-react-app.dev/) allows you to generate a simple app in seconds. |
There was a problem hiding this comment.
Not sure, but should there be a 'the' at the beginning of sentence?
There was a problem hiding this comment.
not in this case: https://create-react-app.dev
| ``` bash | ||
| npx create-react-app my-widget --use-npm | ||
| ``` | ||
|
|
||
| This is the expected output: | ||
| This tutorial updates the following files: |
There was a problem hiding this comment.
Is 'update' accurate, since you are building this now? Maybe build?
There was a problem hiding this comment.
so, it's a fine distinction, but the tutorial doesn't build anything; instead it requires the files built by Create React App to be updated
|
|
||
| 1. Add a new file `src/WidgetElement.js` with the following custom element to wrap the entire React app | ||
| The steps below wrap the app component with an HTML custom element. The `connectedCallback` method renders the React app when the custom element is added to the DOM. |
There was a problem hiding this comment.
should DOM be explained or is it known enough
There was a problem hiding this comment.
@Lyd1aCla1r3 @jyunmitch I think it's well enough known. If someone knows React enough to care about these details, they absolutely know what the DOM is.
|
|
||
| ``` html | ||
| <my-widget /> | ||
| ``` | ||
|
|
||
| 3. Your browser window should automatically redisplay the React App. | ||
| 3. Observe your browser automatically redisplay the React app |
There was a problem hiding this comment.
redisplay >> display
very minor but it's the first time 'your' browser is displaying the thing...
There was a problem hiding this comment.
nope - it was already displayed once before, and this action refreshes it
2nd time - line 38. use of "your" is consistent here
|
|
||
| 2. Click `Create folder` and name it 'my-widget'. This needs to match the .env.production path from above. | ||
| 2. Click `Create folder` and name it "my-widget" to match the `.env.production` path above |
There was a problem hiding this comment.
why is this in quotes? confused
There was a problem hiding this comment.
it's a field entry, not the field itself, so no backticks; quotes are used above to supply field values
|
|
||
| 3. Click `Save` | ||
|
|
||
| 4. Click `my-widget` | ||
|
|
||
| 5. Create the same folder structure as your generated build directory | ||
| 5. Create a folder structure similar to your generated build directory: |
There was a problem hiding this comment.
similar threw me off a little, because it made me wonder if I could change the names a littl
There was a problem hiding this comment.
you can! strictly speaking the structure isn't identical
|
|
||
| 2. Choose an existing page (or create a new one (LINK TODO)) and click `Actions`→ `Design`. | ||
| 2. Choose an existing page (or [create a new one](../../compose/page-management.md#create-a-page)) and select `Design` from its Actions |
There was a problem hiding this comment.
debating whether the Actions should be backticked
There was a problem hiding this comment.
i opted not to because it's not a label or entity
No description provided.