[learn][s]: complete 'getting started' section with 'edit the page' instructions - refs #562.

This commit is contained in:
Anuar Ustayev
2022-01-17 12:32:23 +06:00
parent 0fa7612961
commit f344630aa5
3 changed files with 21 additions and 1 deletions

View File

@@ -64,7 +64,27 @@ npm run dev
This starts your Portal.js apps "development server" (more on this later) on port 3000. This starts your Portal.js apps "development server" (more on this later) on port 3000.
Lets check to see if its working. Open http://localhost:3000 from your browser. Lets check to see if its working. Open http://localhost:3000 from your browser and you should see the following page:
![Portal.js screen](/portaljs-screen.png)
### Edit the page
Portal.js app is a Next.js/React.js based project. To edit the page follow these steps:
1. Open the project in your text editor.
2. Go to `/pages/index.js` file.
3. Find the `h2` tag with text that says **"Yay, the portal is open 🌀"** and change it to **"Hello World!"**.
4. Save the file.
Once you've changed the file and saved it, the page on `localhost:3000` should update:
![Portal.js screen update](/portaljs-screen-update.png)
We won't dive into details of how to edit the pages as our focus is presenting data. To learn more about how to use Next.js and/or React, please visit the following sites:
* [Learn NextJS](https://nextjs.org/docs/getting-started)
* [Getting started with React](https://reactjs.org/docs/getting-started.html#learn-react)
## Next steps ## Next steps

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB