DEV Community: Anasooya

Functional Component in react⚛️

Anasooya — Tue, 27 Apr 2021 20:52:24 +0000

Hello guys,😀

Hope you are doing good!

In this tutorial 👩🏻‍💻 🔥 , we are going to learn about functional components in react.

Prerequisite: Javascript,JSX,ES6.

First, let us know about components.

❓. What is a component?
Ans:
A component is a core building block of react.

There are two types of components:
1)Functional component
2)class component

let us take an example for each.
Class component

Functional component

Now we will dive into Functional components👩🏻‍💻.

> const n=<Component name="Ana" />;

Inside a functional component, we are passing props as an argument of the function.

A functional component is an ES6 function.

❓ When do we use functional components?
Ans:
1)when it receives prop and renders something.
2)when it doesn't have any state.

❓ Why functional components?
Ans: A functional component is written shorter and simpler. It doesn't use THIS unlike in class component.

Always prefer functional components over class components.😀

Functional component holds state using hooks. (react 16.8)

Let's us code now,

try these examples on a code editor.

I hope you liked this tutorial. If you have any doubts you can (google 😜) comment down below. I Will revert asap 👍.

Sources I referred to:
reactjs.org/docs/components-and-props
react-components-jsx-props-for-beginners

File Modes in Nodejs

Anasooya — Mon, 01 Feb 2021 20:55:53 +0000

DAY 1 :

Hey folks,

This is my short tutorial on File Modes (write,append)

1)fs.writeSync(fd, buffer[, offset[, length[, position]]])

const fs=require('fs')
// 1.using writeFileSync
fs.writeFileSync('notes.txt','my name is ana')

2)fs.appendFileSync(path, data[, options])

const fs=require('fs')
// //1.using writeFileSync
fs.appendFileSync('notes.txt',',I live in India')

Will continue further in the next tutorial.

Values, Types, and Operators

Anasooya — Sat, 12 Dec 2020 18:05:43 +0000

Did You know the computer can't understand our language except for machine language?

binary	decimal
01000001	A
111	7
010	2

The binary code is well understood by our computers.

Editor:Vs-code,sublimetext,atom,fiddlejs,codesandbox,Repl,etc.

choose any one of the above mentioned editors.

VALUES:

Values comprised of bits, they play different roles. Values can be numbers, pieces of text or function, and so on.
NUMBERS:

Here we will discuss values of the number type i.e. numeric (12,13..) values.

OPERATORS:

UNARY OPERATOR

Typeof operator

console.log(typedef 34.15);
// *number
console.log(typedef "x");
// * string

note: minus operator can be used as a binary as well as >unary operator.

console.log(-(5-2));
// -> -7

BOOLEAN OPERATOR

Comparision
It tells us whether the value is true or false.

console.log(10>2);
//->true
console.log(5<9);
//->false

We can also compare length of two strings.

console.log("ANA"<"SOOYA");
//->true

Other operators are ==,>=,<=,!=

console.log("alpha"!="aphanhso");
//->true

Note-There is only one value that is not equal to itself >and that is NaN (not a number)

console.log(NaN==NaN);
//->false

LOGICAL OPERATOR

and is written as &&

console.log(true && false);
//->false

or is written as ||

console.log(false||true);
//-->true

Ternary operator ? or conditional operator

console.log(false?3:5);
//-->3

Short-circuiting of logical operators

|| operator for example will return value to its left when >that can be converted to true and vice versa

console.log(null||"user");
//->user

Automatic Type Conversion

At times javascript can accept any program you give it.Even if an operator applied to the "wrong" type of value,Javascript will convert it to that value it needs.This is known as type coercion.

console.log(4*null)
//->0

In the above example, null becomes 0 so we got 0 as output.

console.log("2" - 1)
//->1
console.log("2"+1)
//->3
console.log("2"*1)
//->2
console.log("two"*1)
//->NaN
console.log(false==0)
//->true

If null or undefined occurs on either side of the operator >,it produces true. Let's take an example.

console.log(null ==undefined);
//->true

Ref: Eloquent Javascript

I would advice readers to code on their own and explore more.
If You have any doubts, you can write it in the comments section.

😃 Have an amazing day ahead.
Hope you liked this blog!