Make the DOM ready before executing the Script

docs/how-to-guides/data-basics/1-data-basics-setup.md

@@ -24,10 +24,11 @@ function MyFirstApp() {
 	return <span>Hello from JavaScript!</span>;
 }
 
-const root = createRoot( document.getElementById( 'my-first-gutenberg-app' ) );
 window.addEventListener(
 	'load',
 	function () {
+		const rootDomElement = document.getElementById( 'my-first-gutenberg-app' );
+		const root = createRoot( rootDomElement );
 		root.render(
 			<MyFirstApp />,
 		);

docs/how-to-guides/data-basics/2-building-a-list-of-pages.md

@@ -423,14 +423,13 @@ function PagesList( { hasResolved, pages } ) {
 	);
 }
 
-const root = createRoot(
-	document.querySelector( '#my-first-gutenberg-app' )
-);
 window.addEventListener(
 	'load',
 	function () {
+		const rootDomElement = document.getElementById( 'my-first-gutenberg-app' );
+		const root = createRoot( rootDomElement );
 		root.render(
-			<MyFirstApp />
+			<MyFirstApp />,
 		);
 	},
 	false

docs/how-to-guides/data-basics/3-building-an-edit-form.md

@@ -539,5 +539,5 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 ## What's next?
 
 * **Previous part:** [Building a list of pages](/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md)
-* **Next part:** Building a *New Page* form (coming soon)
+* **Next part:** [Building a *Create page form*](/docs/how-to-guides/data-basics/4-building-a-create-page-form.md)
 * (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository