Day 22 of My Web Development Journey 🚀 | Meta Tags and Introduction to React.js

Today, I learned about HTML meta tags and started exploring React.js. I also learned the difference between a library and a framework and how to set up a React project using the terminal.

1. What Are Meta Tags in HTML?

Meta tags provide information about a webpage to browsers and search engines. They are placed inside the section of an HTML document.

Example

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="My web development learning journey">
<title>My Website</title>
</head>

• charset="UTF-8" supports a wide range of characters.
• name="viewport" helps webpages display properly on different screen sizes.
• name="description" provides a short description of the webpage.
• defines the title shown in the browser tab.</li> </ul> <h2> <a name="2-introduction-to-reactjs" href="#2-introduction-to-reactjs" class="anchor"> </a> 2. Introduction to React.js </h2> <p>React.js is a JavaScript library used to build user interfaces, especially interactive web applications.</p> <p>React helps us divide a webpage into reusable pieces called components.</p> <p>For example, an e-commerce website can have separate components for:</p> <ul> <li>Navbar</li> <li>Product card</li> <li>Shopping cart</li> <li>Footer</li> </ul> <p>Instead of writing the same UI code repeatedly, we can reuse components.</p> <p><strong>3. What Is a Library?</strong></p> <p>A library is a collection of reusable code that helps developers perform particular tasks.</p> <p>Example: React.js is a library that helps us build user interfaces.</p> <p>We choose when and where to use the library in our application.</p> <p><strong>4. What Is a Framework?</strong></p> <p>A framework provides a broader structure for building an application and often guides how different parts of the application should work together.</p> <p>Examples include Angular and Next.js, although Next.js is specifically a React framework.<br> <strong>Library vs Framework</strong></p> <p><strong>Library</strong><br> Helps with particular tasks.<br> we call its functions when needed.<br> Example:ReactJS.</p> <p><strong>Framework</strong><br> Provides a broader application structure.<br> Often defines how the application is organized.<br> Example:Angular,next js.</p> <h2> <a name="5-installing-react-using-the-terminal" href="#5-installing-react-using-the-terminal" class="anchor"> </a> 5. Installing React Using the Terminal </h2> <p>I started setting up my React project using the terminal.</p> <p>First, I checked whether Node.js and npm were installed.<br> `<br> node -v</p> <p>npm -v`</p> <p>Then, I created a React project using Vite:</p> <p><code>npm create vite@latest my-react-app -- --template react</code></p> <p>Next, I entered the project folder:</p> <p><code>cd my-react-app</code></p> <p>I installed the required dependencies:</p> <p><code>npm install</code></p> <p>Finally, I started the development server:<br> <code>npm run dev</code></p> <p>The terminal displays a local URL that I can open in my browser to view the React application.</p> <p>What I Learned Today</p> <ul> <li>The purpose of HTML meta tags.</li> <li>The basics of React.js.</li> <li>The difference between a library and a framework.</li> <li>How to create and run a React project using the terminal.</li> <li>How Node.js and npm help us set up a development environment.</li> </ul>