https://github.com/makstyle119/react-foundations-by-next-docs

this is my journey to learn and understand React
https://github.com/makstyle119/react-foundations-by-next-docs

js makstyle119 react

Last synced: about 1 month ago
JSON representation

this is my journey to learn and understand React

• Host: GitHub
• URL: https://github.com/makstyle119/react-foundations-by-next-docs
• Owner: makstyle119
• Created: 2024-11-12T17:54:27.000Z (about 2 months ago)
• Default Branch: master
• Last Pushed: 2024-11-12T18:23:11.000Z (about 2 months ago)
• Last Synced: 2024-11-12T19:20:41.425Z (about 2 months ago)
• Topics: js, makstyle119, react
• Language: HTML
• Homepage:
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Foundations By Next Docs

this is my journey to learn and understand React

## Folder Structure:

```

|- chapter-03

    |- index.html

|- chapter-04

    |- index.html

|- chapter-05

    |- index.html

```

## Code Explaining

- chapter-03/index.html

```

	

		
			

		

		

			// Select the div element with 'app' id

			const app = document.getElementById('app');

		

			// Create a new H1 element

			const header = document.createElement('h1');


			// Create a new text node for the H1 Element

			const text = 'Develop. Preview. Ship.';

			const headerContent = document.createTextNode(text);

			// Append the text to H1 element

			header.appendChild(headerContent);

			// Place the H1 element inside the div

			app.appendChild(header);			

		

	

```

- chapter-04/index.html

```

	

		


		

		

		

		

		

		

		

		 

				// Select the div element with 'app' id

				const app = document.getElementById('app');


				// react root using reactDOM

				const root = ReactDOM.createRoot(app);

				// you can render any jsx inside the render 

				root.render(<h1>Develop. Preview. Ship.</h1>);

		

	

```

- chapter-05/index.html

```

	

		


		

		

		

		

		

		

		

		 

				// Select the div element with 'app' id

				const app = document.getElementById('app');


				function Header() { // component name should be in capatilized

					return <h1>Develop. Preview. Ship.</h1>;

				}

				function HomePage() {

					return (

						<div>

							<Header /> {/*  you can call other component inside a component */}

							<p>

								Welcome to home page.

							</p>

						</div>

					)

				}

				// react root using reactDOM

				const root = ReactDOM.createRoot(app);

				// you can render any jsx inside the render 

				root.render(<HomePage />);

		

	

```