DEV Community: Hiren Timbadiya

Javascript Vs Typescript

Hiren Timbadiya — Mon, 06 Feb 2023 15:18:47 +0000

JavaScript and TypeScript are both programming languages used for web development, but they have several key differences.

Typing System :

TypeScript has a strong typing system, while JavaScript is dynamically typed. This means that in TypeScript, variables must be declared with a specific type (e.g. string, number, etc.),
whereas in JavaScript, the type of a variable can change during runtime.

Object-Oriented Features :

TypeScript supports object-oriented programming concepts such as interfaces, classes, and inheritance, which are not available in pure JavaScript.

Compilation :

TypeScript is a statically compiled language, which means that the code written in TypeScript is compiled into JavaScript before it is executed.
This can lead to better performance and improved error handling, as some errors can be caught during the compilation process.

Namespaces :

TypeScript has the concept of namespaces, which provide a way to organize code into logical groups and avoid naming conflicts.
JavaScript does not have this feature.

Tooling :

TypeScript has better tooling support than JavaScript, including integrated development environments (IDEs) with improved code completion, syntax highlighting, and error checking.

Learning Curve :

TypeScript has a steeper learning curve than JavaScript, as it introduces several new concepts, such as classes and interfaces, that are not found in JavaScript.

In conclusion, TypeScript is a superset of JavaScript that offers several additional features and improved tooling.

It is especially useful for large-scale projects and for teams working on a codebase, as it provides a more organized and maintainable codebase.

However, for smaller projects or for those who are more familiar with JavaScript, pure JavaScript may be a better choice.

that's wrap , like and share if it helped you understand difference and follow me for more!!

React.JS Props: A Complete Guide with Examples

Hiren Timbadiya — Sat, 04 Feb 2023 08:30:13 +0000

About React

React.JS is a popular JavaScript library used for building user interfaces. It provides a way to create reusable components and manage the state of an application. In React.JS, props (short for properties) are a way to pass data from a parent component to a child component.

About this Blog Post

In this blog post, we will be diving into the concept of props in React.JS and exploring how they are used. We will look at several examples to help you understand how props work and how to use them effectively in your applications.

What are Props in React.JS?

In React.JS, props are the means by which a parent component can pass data to its child component.
They are used to pass data from one component to another and are a critical part of React.JS.
Props are read-only and cannot be modified within the child component.
They are used to pass information, such as values, functions, or objects, from the parent component to the child component.

Example 1: Passing a Value as a Prop

In the following example, we have a parent component that passes a value as a prop to a child component. The child component then displays the value as text on the screen.

// parent component
function App() {
  return (
      {/* passing props as attributes*/}
      <Note
            id="1"
            title="this is title"
            content="blog is about props"
      />
  );
}
// child component
function Note(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

Example 2: Passing a Function as a Prop

In the following example, we have a parent component that passes a function as a prop to a child component. The child component then calls the function when a button is clicked.

// parent component
function App() {
// event handling function
  const printNote = (content) => {
    console.log(content);
  };
  return (
      <Note
            id="1"
            title="this is title"
            content="blog is about props"
            onClickNote={printNote}
       />
  );
}

// child component
function Note(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
      <button
        // onclick it triggers the onClickNote which is in App.jsx
        // which essentially will trigger printNote function to print the note on console.
        onClick={() => {
          props.onClickNote(props.content);
        }}
      >
        // delete icon component
        <DeleteIcon />
      </button>
    </div>
  );
}

Example 3: Passing an Object as a Prop

In the following example, we have a parent component that passes an object as a prop to a child component. The child component then uses the object to display information on the screen.

// parent component
function App(){
    const user = {
       name: "Hiren Timbadiya",
       email: "hiren@email.com"
    };
    return (
      <Note user={user} />
    );
}

// child component
function Note(props){
    return (
      <div>
        <p>Name: {props.user.name}</p>
        <p>Email: {props.user.email}</p>
      </div>
    );
}

Thank You for reading!! follow me for more

broke it😎

Hiren Timbadiya — Fri, 09 Dec 2022 10:42:17 +0000

contex : 1 xor 2 is 3 which is greater than 1*2 which is 2