Say2 vlog

Day 1 with React

Jatin Sharma's photo
Jatin Sharma
·

5 min read

Day 1 with React

Learning the Basics:

1. What is Emmet?

Emmet is a built-in feature of VS Code; thus, it doesn't require any additional installation. By using shorthand and abbreviations, Emmet significantly improves and speeds up your HTML and CSS workflow, saving you the stress of having to manually type out the code in full. Emmet employs different abbreviations and short expressions, dynamically converting them into the full code. While primarily used for HTML, XML, and CSS, Emmet is versatile enough to be used with various programming languages.

Creating an HTML file with Emmet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Day 1 React</title>
  </head>
  <body>
    <div id="root">
      <h1>Hello world</h1>
    </div>
  </body>
</html>

Creating the same "Hello World" using JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Day 1 React</title>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const heading = document.createElement("h1");
      heading.innerHTML = "Hello world from JavaScript";

      const root = document.getElementById("root");
      root.appendChild(heading);
    </script>
  </body>
</html>

Using React:

To incorporate React, the first step is to include React and ReactDOM via CDN (Content Delivery Network). But what is a CDN, and why do we use it?

2. What is CDN? Why Do We Use It?

A Content Delivery Network (CDN) is a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, with the majority of web traffic being served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

Benefits of CDN:

  • Improving website load times

  • Reducing bandwidth costs

  • Increasing content availability and redundancy

  • Improving website security

HTML with CDN Links:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Day 1 React</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
  </body>
</html>

Understanding the concept of Cross-Origin Resource Sharing (CORS) is crucial. Learn more in this blog.

Difference Between React and ReactDOM:

  1. React:

    • The react package is the core of the React library, providing essential functionality for defining and working with React components.

    • It includes the logic for components, virtual DOM, and the overall structure of React applications.

  2. ReactDOM:

    • The react-dom package is responsible for interacting with the DOM (Document Object Model).

    • It provides methods for rendering React components into the DOM, such as the key function ReactDOM.render().

Take a break, and let's move on to creating our first React app in the next part.

Hands-On with React: Creating Your First React App

3. Hello World with React

Let's create a simple "Hello World" app using React.

<script>
  const heading = React.createElement("h1", {}, "Hello world from React!");

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(heading);
</script>

This script uses React.createElement to create a React element and ReactDOM.createRoot to create a root instance. The render method then renders the React element into the specified DOM element.

Congratulations on Your First React App!

Structuring Your React Code

4. Organizing with App.js

Organize your code by creating a new file named App.js to house your React code.

index.html:

<script src="./App.js"></script>

App.js:

const heading = React.createElement("h1", {}, "Hello world from React!");

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(heading);

Now, delve into understanding React elements and attributes.

Understanding React Elements and Attributes

5. React Elements and Attributes

A React element is essentially a JavaScript object. The attributes provided to an element are known as props.

In the React.createElement function:

const heading = React.createElement("h1", { id: "heading" }, "Hello world from React!");

The object { id: "heading" } represents attributes (props) assigned to the <h1> tag.

6. Adding CSS to React

Add style to your React element by creating a CSS file and linking it to the HTML.

#heading {
  color: red;
}

Now, the "Hello world from React!" text will appear in red.

Try adding a console.log(heading); in App.js and check the output.

Note: Continue reading in the next part for creating nested HTML structures in React and understanding the importance of file order in HTML.

*Please let me know if you'd like me to continue correcting and formatting the rest of the content.*Creating Nested HTML Structures in React

7. Creating Nested Structures

React simplifies the creation of complex, nested HTML structures. Consider the following example:

const parent = React.createElement(
  "div",
  { id: "parent" },
  React.createElement(
    "div",
    { id: "child" },
    React.createElement("h1", {}, "Nested h1 tag")
  )
);

console.log(parent); // Object
const root = ReactDOM.createRoot(document.getElementById("root"));

// Rendering the parent
root.render(parent);

This code creates a nested structure with a parent <div> containing a child <div> and an <h1> tag.

8. Your Task

Now, here's a task for you: try creating one more child <h2> tag by yourself without viewing the solution.

Solution: If you need to provide more than one child, you can convert them to an array:

const parent = React.createElement(
  "div",
  { id: "parent" },
  React.createElement("div", { id: "child" }, [
    React.createElement("h1", {}, "Nested h1 tag"),
    React.createElement("h2", {}, "Nested h2 tag"),
  ])
);

// Ignore any key warning for now

File Order in HTML: Does It Matter?

9. Understanding File Order

Does the order of files in your HTML document matter? Absolutely! If you place the script importing App.js before the React CDN links, errors will arise. The order of file inclusion should follow a sequence.

<body>
  <div id="root"></div>
  <script
    src="https://unpkg.com/react@18/umd/react.development.js"
    crossorigin
  ></script>
  <script
    src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    crossorigin
  ></script>
  <script src="./App.js"></script>
</body>

Ensure that React is included after its dependencies.

Congratulations on progressing through the basics of HTML, JavaScript, and React! Stay tuned for more exciting tutorials and insights.

for code visit : https://github.com/Jatin4224/FoodDeliveryApp/blob/main/Notes/lesson%201

Continue your learning journey with the next chapter👇

https://tech2say.hashnode.dev/day2-with-react-igniting-our-app

WeMakeDevsReact