Skip to main content

Command Palette

Search for a command to run...

"Terms" that you should know as a React Developer

There are some special Terminologies that you should know to understand the meaning and function of that element or statement.

Published
2 min read
"Terms" that you should know as a React Developer
S

A passionate developer having great problem solving skills. I love to code daily and always eager to learn new technologies. Expert in front end with strong base of JavaScript. I have a strong background in web development, having worked as both a front-end and back-end developer for several years. My skills include HTML, CSS, JavaScript, ReactJS, NodeJS, NextJS and MySQL. I am also familiar with popular frameworks such as Bootstrap

1. Component

Component is a piece of UI (User Interface). A component could be as small as anchor tag (<a href="#">) or larger as entire page. React component names must always start with a capital letter while HTML can be lowercase.

function MyLink(){
    return(
        <a href="#">click Me</a>
    )
}

2. JSX

The markup syntax you’ve seen above is called JSX. JSX let you write HTML code into Javascript, just like we created an anchor in return from a Javascript function.

<a href="#"> Click Me </a> --> HTML code written under the j

Javascript functions are called JSX

3. Fragments

Fragments will give you the accessibility to create a group of multiple elements without adding the extra nodes.

1. You can Create fragment element. 
<Fragments>
    <h1> Heading </h1>
      <p> Hello World </p>
        <a href="#"> CLICK ME </a>
</Fragments> 

2. You Can Simply Use the opening and closing tag. 
<>
<h1> Heading </h1>
      <p> Hello World </p>
        <a href="#"> CLICK ME </a>
            </>

4. Hooks

Functions starting with use are called Hooks. For Example In React, useState() is a hook that is built in Hook.

Hooks are most restrictive since you can only call hooks at the top of your component. In below example i have called my useState hook at the very top.

Note --> You need to import useState() from React first.

  import { useState } from 'react';

function functionName(){
    const [count, setCount] = useState(0)
function eventHandler(){
setCount(count*2);
}
return (
    <button onClick={eventHandler}> Click Me </button>
)
}

5. State

Sometimes You want your component to remember the things like numbers,count and other data like current value. In React, this type of memory called State .

Adding the State Variable

First You need to import the useState from the React then create the variable shown in the below code, but you can change the name of the variable and function.

const [name, setName] = useState();

name is the variable that will remember the data. 
setName is the function that will update the data into name variable.