DEV Community: Ahnaf Tahmid

Quick Start Guide: React for the Rest of Us (With a Dash of Humor!)

Ahnaf Tahmid — Mon, 10 Jun 2024 14:45:05 +0000

Welcome to the ultimate guide to get you started with React.js. Let's dive into the React universe, where you’ll learn the essential concepts you’ll use daily. It’s like learning to cook: master the basics, and you can whip up anything from a simple sandwich to a fancy gourmet dish.

What You’ll Learn:

How to create and nest components
How to add markup and styles
How to display data
How to render conditions and lists
How to respond to events and update the screen
How to share data between components

Creating and Nesting Components: Assemble Your Superhero Squad

React apps are made out of components. Think of a component as a piece of the UI (user interface) with its own logic and appearance. It can be as small as a button or as large as an entire page.

Step 1: Creating a Simple Component

Imagine you’re introducing a new superhero to your squad. Here’s our first superhero: a button!

function MyButton() {
  return <button>I'm a button</button>;
}

Our hero is simple but effective. It’s a JavaScript function that returns a bit of HTML (called JSX in React). Now, let’s nest this superhero into another component, like adding Batman to the Justice League.

Step 2: Nesting Components

Just like Batman works better with his team, our button can be part of a bigger component. Let’s create an app that welcomes users with a button.

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Notice that <MyButton /> starts with a capital letter. That’s the rule: React component names always start with a capital letter, while HTML tags are lowercase. Think of it as giving your heroes proper names.

Writing Markup with JSX: Speak the Superhero Language

The markup syntax you’ve seen above is called JSX. It’s optional but super convenient. JSX is stricter than HTML. You have to close tags like <br /> and wrap multiple tags in a shared parent, like <div>...</div> or an empty <>...</> wrapper.

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}

Think of JSX as the secret superhero language. You can use an online converter to turn regular HTML into JSX if you need help translating.

Adding Styles: Dressing Up Your Superheroes

In React, you specify a CSS class with className. It works the same way as the HTML class attribute. Let’s give our hero a stylish costume.

<img className='avatar' />

Write the CSS rules in a separate file:

/* In your CSS */
.avatar {
  border-radius: 50%;
}

React doesn’t dictate how you add CSS files. Use a <link> tag in your HTML or follow the documentation for your build tool or framework.

Displaying Data: Show Off Your Superhero Stats

JSX lets you mix JavaScript with HTML. Curly braces {} let you escape back into JavaScript to display data. For example, let’s display a user’s name:

const user = { name: 'Hedy Lamarr' };

return <h1>{user.name}</h1>;

You can also use curly braces for attributes:

const user = { imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg' };

return <img className='avatar' src={user.imageUrl} />;

For complex expressions, like string concatenation:

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className='avatar'
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}

Conditional Rendering: Superhero Decisions

React uses regular JavaScript for conditions. For example, you can use an if statement to include JSX conditionally:

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}

return <div>{content}</div>;

For a more compact approach, use the conditional ? operator:

<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>

Or use the logical && operator when you don’t need an else branch:

<div>{isLoggedIn && <AdminPanel />}</div>

Rendering Lists: The Superhero Roster

Use JavaScript’s map() function to render lists of components. Imagine you have an array of products:

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));

return <ul>{listItems}</ul>;

Each <li> needs a key attribute, usually from your data, like a database ID.

Responding to Events: Superhero Actions

Respond to events by declaring event handler functions inside your components:

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Notice how onClick={handleClick} has no parentheses at the end. You only pass the function; React will call it when the event occurs.

Updating the Screen: Superhero State

To remember some information, like how many times a button is clicked, add state to your component. First, import useState from React:

import { useState } from 'react';

Declare a state variable inside your component:

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

useState gives you the current state (count) and a function to update it (setCount). Clicking the button updates the state and re-renders the component.

If you render the same component multiple times, each gets its own state:

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

Sharing Data Between Components: Superhero Team Coordination

Sometimes, components need to share data and update together. Move the state “upwards” to the closest common component. Here’s how:

First, move the state up from MyButton into MyApp:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

Pass the state and click handler down as props:

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}

When you click a button, handleClick updates the state in MyApp, which then passes the updated state to both MyButton components. This is called “lifting state up”.

Conclusion

Congratulations! You’ve taken your first steps into the world of React and learned how to create, nest, style, and manage state in components. With these superpowers, you’re ready to build amazing, interactive web apps. Keep experimenting, stay curious, and remember: with great power comes great responsibility (and lots of fun coding adventures)!

Happy Coding!

contact with me:

✉ ahnaftahmid802@gmail.com

GitHub

Var vs Let vs Const

Ahnaf Tahmid — Fri, 23 Feb 2024 07:10:23 +0000

Var vs Let vs Const

In this article, I will teach you everything you need to know about the differences among var, let, and const. So, let's get started! ✌

All You Need To Know

var has been used in all web applications since ES6 (2015). It can be a bit confusing for beginners. If you need support for older versions, you must use var. But don't worry about it! Nowadays, developers use a bunch of libraries and frameworks like React.js, Angular.js, Vue.js. These frameworks check browser compatibility. So, let's break down the var keyword.

Var Keyword Rules

Used in older applications.
Has function scope.
Has global scope.
Does not have block scope.
Has JavaScript hoisting behavior.
Redeclarable.
Reassignable.
Used in Old Applications: Imagine var as the old grandpa of JavaScript. It's been around for a while and has seen a lot, but newer generations (like let and const) have taken over.

Have Function Scope: Think of var like a magician who performs tricks inside their hat. Whatever they declare with var stays inside that function and isn't visible outside.

function magicTrick() {
    var rabbit = '🐰';
    console.log(rabbit); // Output: 🐰
}
console.log(rabbit); // Output: ReferenceError: rabbit is not defined

Have Global Scope: var is like that one person at a party who talks to everyone and is heard by all. Variables declared with var outside any function are accessible globally.
```
var partyAnimal = '🎉';
function haveFun() {
    console.log(partyAnimal); // Output: 🎉
}
haveFun();
```
Not have Block Scope: var doesn't care about blocks. It's like a reckless driver who ignores traffic signals. Variables declared with var leak outside blocks.
```
if (true) {
    var leakyVar = 'oops';
}
console.log(leakyVar); // Output: oops
```
Have JavaScript Hoisting Behavior: var gets lifted up! It's like a magical elevator that takes variable declarations to the top of their scope.
```
console.log(hoistedVar); // Output: undefined
var hoistedVar = 'I\\'m hoisted!';
```

Redeclarable: var is forgetful. You can redeclare variables without a fuss.

var color = 'blue';
var color = 'green';
console.log(color); // Output: green

Reassignable: Once a var, always a var. You can change its value anytime.

var mood = 'happy';
mood = 'sad';
console.log(mood); // Output: sad

Let All are Need To Know

You can say let is a alternative of var keyword. Modern web application use it as a alternative modern version var. It comes in ES6. The main difference of let and var is Let have block scope and var have no block scope. Let is not redeclarabled and var is redeclarabled

Let Keyword Rules

Used In Modern Applications as an Alternative to var
Has Function Scope
Has Global Scope
Has Block Scope
Does Not Have JavaScript Hoisting Behaviour.
Not Redeclarabled
Reassignable.

1. Used In Modern Applications as an Alternative to `var`

Think of let as the cooler, newer version of var. It's like swapping out your old flip phone for a shiny new smartphone.

// Old school
var oldSchool = "I'm a dinosaur";

// Modern and hip
let newHotness = "I'm the future";

2. Has Function Scope

let behaves well inside functions. It's like a magician who only performs within their stage.

function myFunction() {
  let insideFunction = "I'm inside!";
  console.log(insideFunction);
}

myFunction(); // Output: "I'm inside!"
console.log(insideFunction); // Throws an error, because 'insideFunction' is only known inside the function

3. Has Global Scope

let can play on the big stage too, outside of functions. It's like a celebrity everyone knows.

let globalCelebrity = "I'm everywhere!";

function anotherFunction() {
  console.log(globalCelebrity); // Output: "I'm everywhere!"
}

4. Has Block Scope

let is like a chameleon; it changes depending on where it's put. It's like a master of disguise!

if (true) {
  let insideBlock = "I'm inside the block!";
  console.log(insideBlock);
}

console.log(insideBlock); // Throws an error, because 'insideBlock' only exists within the block

5. Does Not Have JavaScript Hoisting Behavior

let stays right where you put it. It's like glue, it sticks to where it's declared.

console.log(hoistedVar); // undefined
var hoistedVar = "I'm hoisted!";

console.log(hoistedLet); // Throws an error
let hoistedLet = "I'm not hoisted!";

6. Not Redeclarable

let is like a stubborn pet; it doesn't like being told what to do twice.

let myVariable = 42;
let myVariable = "Oops! I did it again"; // Throws an error, because 'myVariable' is already declared

7. Reassignable

let is flexible; it can change its value whenever it wants. It's like a shape-shifter!

let mutableVariable = "I can change";
mutableVariable = "I'm a whole new variable now!";
console.log(mutableVariable); // Output: "I'm a whole new variable now!"

Const All are Need To Know

Const means Constant [Not Changable]. It comes in ES6. These is same to let keyword. But the difference it is not reassignable and let is reassignable

Const Keyword Rules

Used In Modern Application as a Alternative of var
Has Function Scope
Has Global Scope
Has Block Scope
Does Not Have JavaScript Hoisting Behaviour.
Does Not Redeclarabled
Not Reassignable.
Used In Modern Applications as an Alternative to var:
Think of const as your loyal friend who won't change their mind once they've made a decision. If you declare something with const, it's like saying, "This is it, I'm sticking with it!"
```
const age = 25;
age = 26; // Uh-oh! Can't change my age now!
```

Have Function Scope:
It means const is like a secret recipe known only within a particular function.

function cookDinner() {
    const secretIngredient = "love";
    console.log(secretIngredient);
}

cookDinner(); // Outputs: love
console.log(secretIngredient); // Error! I can't see the secret ingredient outside!

Have Global Scope:
This is like broadcasting your announcement to the whole world. Everyone can access it from everywhere!

const globalLanguage = "JavaScript";

function sayHello() {
    console.log(`Hello from ${globalLanguage}!`);
}

sayHello(); // Outputs: Hello from JavaScript!

Have Block Scope:
It's like having a magic spell that only works within a specific area.

if (true) {
    const magicNumber = 7;
    console.log(magicNumber); // Outputs: 7
}

console.log(magicNumber); // Error! Magic number disappears outside the block!

Not Have JavaScript Hoisting Behavior:
Unlike some folks who can jump up before you expect them to, const stays right where you put it.
```
console.log(pet); // Error! Can't access pet before initialization
const pet = "dog";
```
Not Redeclarable:
Once you've introduced something with const, you can't introduce another thing with the same name in the same scope. It's like having a name tag that sticks!
```
const favoriteFood = "pizza";
const favoriteFood = "sushi"; // Error! I already have a favorite food!
```

Not Reassignable:
It's like saying, "I've made up my mind, and I won't change it."

const skyColor = "blue";
skyColor = "red"; // Error! Can't change the color of the sky!

Conclusion

In summury , Most of the case we use const. This is good practice to use const to declare array , object and Fixed Value like PI. If the value is changable we use let. I recommended you to not use var always use let and const keyword from now. If you find any wrong information in my first article contact me.

Happy Coding!! 😀

💌 ahnaftahmid802@gmail.com

DEV Community: Ahnaf Tahmid

Quick Start Guide: React for the Rest of Us (With a Dash of Humor!)

What You’ll Learn:

Creating and Nesting Components: Assemble Your Superhero Squad

Step 1: Creating a Simple Component

Step 2: Nesting Components

Writing Markup with JSX: Speak the Superhero Language

Adding Styles: Dressing Up Your Superheroes

Displaying Data: Show Off Your Superhero Stats

Conditional Rendering: Superhero Decisions

Rendering Lists: The Superhero Roster

Responding to Events: Superhero Actions

Updating the Screen: Superhero State

Sharing Data Between Components: Superhero Team Coordination

Conclusion

Var vs Let vs Const

Var vs Let vs Const

All You Need To Know

Var Keyword Rules

Let All are Need To Know

Let Keyword Rules

1. Used In Modern Applications as an Alternative to var

2. Has Function Scope

3. Has Global Scope

4. Has Block Scope

5. Does Not Have JavaScript Hoisting Behavior

6. Not Redeclarable

7. Reassignable

Const All are Need To Know

Const Keyword Rules

Conclusion

Happy Coding!! 😀

1. Used In Modern Applications as an Alternative to `var`