DEV Community: Md. Shah Arafat

JSX Explained

Md. Shah Arafat — Fri, 07 May 2021 15:53:42 +0000

JSX is JavaScript Extension Syntax. It is used in react to write markup and JavaScript together easily. Today, in this blog I will try to cover all JSX thing you should know.

Before JSX, when we need to create any react element, we used the React.createElement().

// Syntax: React.createElement(component, props, ...children);

var RootElement = React.createElement(
"div", null, 
React.createElement("h1", { style: { color: red } }, "The world is yours"), 
React.createElement("p", null, "Say hello to my little friend")
);

In the example above, we created a react element using React.createElement(). It has a container div, inside the div it has two elements h1 and p. h1 element has a style to set the colour to red and both the element has some text inside.

This isn't easy to write HTML type of markup this way. To make this thing easier facebook came up with JSX.

Using JSX you can create react element by writing markup like HTML. Behind the scene, JSX will be converted to plain javascript using the package Babel. With JSX we can create the above element this way.

const RootElement = (
  <div>
    <h1 style={{color: red}}>The world is yours</h1>
    <p>Say hello to my little friend</p>
  </div>
)

You can paste the code here and see the output on the right side, which is pretty much the same we wrote using React.createElement().

Expressions in JSX

You can write any JavaScript expression in JSX. Any expression you put inside JSX. It must be wrapped using curly braces {}.

const language = 'JavaScript';

const element = <h1>Hello there, I am learning {language}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Here we injected the value of the variable 'language' inside h1 element.

If your expression inside JSX returns an object. It will throw an error.

Remember, You can use any valid JS expression inside JSX. You can't use if else condition inside JSX. Rather, you can use the ternary operator to make a decision.


const App = () =>{
  const [isDisabled, setIsDisabled] = useState(false);

  return (
       <button disabled={isDisabled ? true : false}>Simple Button</button>
  );

}

Look, we used the ternary operator to make but button disable or enable. If you try to use the if else statement here. I will not work.

class in JSX

Though JSX looks almost similar to HTML. But there are some changes.
If you want to use CSS class in your JSX, you might use class="". But it's not that ideal way in JSX. You should use className="" instead.

Empty tag in JSX

If you have an empty tag in JSX like img tag. You must close it with /> like XML.

const image = <img src={url} />;

Multiple elements in JSX

const App = () =>{

  return (
       <>
         <h1>Hey there, This is Arafat.</h1>
         <img src={url} />
       </>
  );

}

If you have multiple elements in JSX. You must wrap all element with a root element. It can be a <div> element or using React.Fragment element. You can use <></> as an alternative to React.Fragment.

Props in JSX

You can pass JavaScript expressions as props in JSX.

return (
       <Component foo={ 1 + 2 + 3 + 4 } >
         <h1>Hey there, This is Arafat.</h1>
         <img src={url} />
       </Component>
  );

Default props value

If pass no value to the props it defaults to true.


const App = () =>{

  return (
       <button disabled></button>
  );

}

In the example above, the button element has an attribute disabled. But we didn't pass any value for this. That's why by default its value is true.

Some other resources : JSX Basics JSX in depth

With all that being said, I highly recommend you keep learning.

Thank you for reading my blog. Feel free to connect on Linkedin and Twitter

Some JavaScript Principles you should know.

Md. Shah Arafat — Thu, 06 May 2021 15:41:40 +0000

In this blog, I will discuss some core JavaScript concepts. If you are new to the JavaScript world, then you must have a clear idea about that topic. I will try to explain those very clear and concisely.

Types

There are 7 primitive data types in JavaScript. Those are:

Number
String
Boolean
null
undefined
Big int
Symbol

and 2 structural data types:

Object
Function

No other types? In JavaScript, there are no other fundamental value types other than the ones we have just enumerated. The rest are all objects!

For example, even arrays, dates and regular expressions fundamentally are objects in JavaScript.

Expressions

An expression is a valid set of literals, variables, operators, and expressions that evaluates to a single value.

0 // 0

1 + 1 // 2

'Hello' + ' ' + 'World' // 'Hello World'

{ answer: 42 } // { answer: 42 }

Object.assign({}, { answer: 42 }) // { answer: 42 }

answer !== 42 ? 42 : answer // 42

Each example shown above is an expression. Every line represents some value.

Hoisting

In JS hoisting is a behaviour, where all variable declared with the var keyword and all functions defined with function declaration is moved to the top of the program.

So that if you use a function before functions declaration, it will not throw any error.

greeting('Programmer'); // Programmer

// functions declaration
function greeting(name){
  console.log(name);
}

This program will run perfectly, though you used the function before the declaration. But JS hoisting moves the function on top of all code. Like:

// functions declaration
function greeting(name){
  console.log(name);
}

greeting('Programmer');

That's why it is perfectly working.

Remember, Hoisting happens for function declaration. If you define a function by functions expression. It will give you an error.

In the case of a variable, when we declare a variable with the var keyword, JavaScript will hoist the variable to the top of the program. But, its value will not be assigned before we reach the line where we assigned the value.

console.log(name); // undefined

var name = 'John Doe';

console.log(name); // 'John Doe'

If you run this, you will not get any error. Instead, it will print undefined. Because of hoisting, variable declaration moved to the top but the value was not assigned. So, the value is undefined. After reaching the line where the value was assigned then the value is visible as the value of that variable.

From ES6 variable declaration with let and const does not have any hoisting issue. We will discuss that later.

Global Block Binding

When we declare a variable with the var keyword, it changes the global object. For the browser, it is a window object.

var RegExp = 'Regular Expression';

console.log(window.RegExp === RegExp); // true

It's a big issue because we are mutating the global object. In the example above it 'RegExp' variable change the global 'RegExp', Which is unexpected.

Here let and const comes into the picture. If we declare a variable using let and const, it will never mutate the global object.

let RegExp = 'Regular Expression';

console.log(window.RegExp === RegExp); // false

Block Bindings in For loop

for (var i = 0; i < 5; i++){
  console.log(i); // 0 1 2 3 4 
}

console.log(i) // 5

In the example above, I defined the variable 'i' with var keyword. after loop execution complete, the variable 'i' is visible outside the block or for loop. But we don't want that. Here let keyword comes to the rescue.

for (let i = 0; i < 5; i++){
  console.log(i); // 0 1 2 3 4 
}

console.log(i) // i is not defined.

Here the value of the variable exists only inside the for loop. so, below the loop, we will get an error.

Arrow Functions

Arrow function is a new way of writing functions in JavaScript.
Syntax:

const func = (param1, param2, ...) => {
  // ....
}

The syntax is very simple, right? If you have only one parameter, then you do not need to use a brace for the parameter and you can directly return a value without using the second bracket.

const func = x => x * x;

func(2); // returns 4

Remember, when we define an arrow function expression. It's not hoisted. It's an expression, not a declaration. Function declarations are hoisted, not function expressions.
That's why we need to write the function before we use it. Another thing is arrow function doesn't have its own this.

With all that being said, I highly recommend you keep learning JavaScript. Trust me it's a very powerful and impressive language.

Thank you for reading my blog. Feel free to connect on Linkedin and Twitter