DEV Community: coding varsity

What is React?

Srijan — Tue, 15 Mar 2022 15:15:10 +0000

React is a free and open-source JavaScript library. You can build fast and interactive user interfaces with React. React is maintained by Meta and React community (consisting of individual developers and companies).

React is generally used for building single-page applications, mobile apps, and server-rendered applications. React is very popular with 184k stars on GitHub and is usually the first choice of a developer working on SPA’s these days.

Let’s learn about the features that make React stand out among the front-end libraries.

React is Component-based

Components are isolated pieces of code that represent a piece of user interface like buttons, text box, navigation bar, etc. It is a JavaScript function or class which accepts properties (props) and returns a react element.

React element is a lightweight description of what to render. React takes the description (React element) and displays the result (component).

React is declarative

React follows the declarative paradigm. When we instruct React what to render for each state, it will update the right components when the data changes. It simplifies stuff and makes your code more predictable and easier to debug.

JSX

JSX is a syntax extension to JavaScript. It describes what UI should look like in each state thus helps in writing declarative code. It also shows more useful error and warning messages.

const element = <h1>coding varsity</h1>

Don’t worry about the syntax, we will look into JSX in more detail in another article.

React allows only one-way data flow

React apps consists of a series of nested components. Data is passed in one direction - from the parent to the child component using props.

React allows only the unidirectional flow of data. But what if a child component wants to update something in the interface? We will learn about how to do this in another article.

React is fast

React does not work on the DOM directly. Instead, it creates a virtual DOM in memory and compares it with the original DOM. If there is a difference, react update only the part of DOM which is changed. It does not render the whole web page again.

Summary

React is a free and open-source JavaScript library. You can build fast and interactive user interfaces with React.
React is generally used for building single-page applications, mobile apps, and server-rendered applications.
React is component-based.
You write declarative code when working with React. It makes your code more predictable and easier to debug.
React allows only one-way binding.
React is fast. It only updates part of DOM that is changed instead of rendering the whole page again.

HTML Tags, Attributes and Elements

Srijan — Sat, 21 Aug 2021 15:09:50 +0000

In this article, we will learn about HTML tags, attributes, and elements. If you are just starting with web development and HTML, you should be clear about these terms.

HTML Tags

We have already covered tags in the article: What is HTML - HyperText Markup Language.

Tags give special meaning (semantics) to the text they enclose.

To annotate a text as the most significant heading we can use the <h1> tag and annotate text as a paragraph we can use the <p> tag.

<h1>I am the most significant heading</h1>

<p> I am a paragraph</p>

Opening and closing tags

Tags that need to wrap the content have a closing tag. For example, paragraph <p> and headings <h1> - <h6>.

<p> I am a paragraph </p>

<h2> I am a heading </h2>

Tags that do not wrap the content, for them, the closing tags are not required. They are called self-closing tags. Examples are line break <br/> and horizontal rule <hr/>.

HTML Attributes

Attributes are extra information about the tags. They are always specified in the opening tag. Attributes have a name and value. For example, for the <img> tag we need to specify the source (path of the image) which can be done using the src attribute. Same way for specifying the alternate text we use the alt attribute.

<img src="/media/user/profile-pic.jpg" alt="profile pic"/>

HTML Elements

The opening tag, closing tag, and content together create an HTML Element. For example, a paragraph element can be a simple <p> tag with some content or a nested element with other elements like <a> or <span>.

<p> I am a paragraph<p>

<p> 
  To read this article, visit 
   <a href=”/link-to-article”>coding varsity</a>
</p>

Tags, attributes, and elements are the foundation of any HTML document.

Summary

Tags give special meaning to the text they enclose in a document.
A closing tag is needed if the tag needs to wrap any content. Example of closing tags are <p>, <h1> etc.
Attributes are extra information about tags. For example, the <img> tag has src and alt attributes.
HTML tags along with the content they enclose are called HTML elements.

What is HTML - HyperText Markup Language?

Srijan — Fri, 20 Aug 2021 16:01:44 +0000

HTML stands for Hypertext Markup Language. The browser uses it to structure content on a web page. HTML also describes the basic layout of a web page.

What is HyperText?

HyperTexts are texts that link a page to another page on the same website or another site. By default, links are underlined and have blue text color.

I am a HyperText

HTML is a Markup Language

HTML is not a programming language but a markup language. HTML uses tags as markup to annotate different types of content in a web page. For example, HTML has the <img> tag for an image, and for a paragraph, it has a <p> tag.

<p> I am a paragraph</p>
<img src="/media/codingvarsity-logo.jpg" alt="coding varsity logo" />

HTML Tags

HTML Tags give special meaning (semantics) to the text they enclose.

<h1>
  I am the most significant heading
</h1>

<p>
  I am a paragraph
</p>

<html>
  I contain whole HTML Document 
</html>

All HTML Tags are case insensitive. You can write them as you like <TITLE> or <title> or even <Title>. All versions are correct.

HTML Document

Let’s go through a simple HTML document and learn about few tags that we can use to create a web page.

<!DOCTYPE html>
<html>
  <head>
    <title>I am a title</title>
  </head>
  <body>
    <h1>I am a heading</h1>
    <p>I am a paragraph</p>
    <img src=”/media/codingvarsity.jpg” alt=”codingvarsity logo”/>
  </body>
</html>

`<!DOCTYPE html>`

<!DOCTYPE html> is the required preamble in all HTML documents. Its purpose is to tell the browser to render the document in the latest version of HTML.

`<html>`

<html> tag is the container for all HTML elements and is the root of an HTML document.

`<head>`

<head> tag contains meta-information about the web page. These pieces of information are not displayed on the screen but are used by the browsers and search engines to understand the content of the document.

`<title>`

<title> tag is used to add the title of the document.

`<body>`

<body> tag contains the main content of the document and is displayed in the browser window.

`<h1>`

<h1> tag is used to add the most significant heading in the document. A web page should contain only one <h1> tag.

`<p>`

<p> tag is used to add a paragraph in the document.

`<img>`

<img> tag is used to embed an image in the document.

We will learn about every tag in more detail in another article.

Summary

HTML stands for HyperText Markup Language.
Hypertexts are texts that one web page to another web page.
HTML tags give special meaning to the text they enclose. For example, to create a paragraph we use the <p> tag.
All HTML tags are case insensitive.
<!DOCTYPE html> is required in all HTML documents to instruct the browser to render the document in the latest version of HTML.