DEV Community: Smithan kumar R

Must Know Concepts in React

Smithan kumar R — Tue, 15 Nov 2022 05:36:51 +0000

What are components & Props?

Components are the core buildling blocks of React Application that can be reused and handled independently.

Props stands for Properties and they are immutable(Read-only)
Props are the arguments passed to React Components

How to pass props from one component to another.

Props data is sent by the parent component and cannot be changed by the child component as they are read-only.

Parent component

import React from 'react';
function Parent()
  {
    const name= Smith;
    const msg = `Hello, my dear ${name}`;

    return (
     <Child msg={msg} />
     )
   }

Child component

import React from "react";
import Parent from "./Parent.js";

function Child(props){
return (
        <h2>props.msg </h2>
       )
}

Functional based components & Class-based components.

A Functional component is just a plain JavaScript pure function that accepts props as an argument and returns a React element(JSX).

function App(){
return <h1> Hello React </h1>
}

The Class components are simple classes (made up of multiple functions that add functionality to the application).
which can manage the state and lifecycle components

import React from'react';
class Counter extends React.component{
    constructor(props){
       super(props);
       this.state = {
         count: 0
       }
  }
handleIncrement = () => {
  this.setState(prevState => prevState + 1)
}
handleDecrement = () => {
  this.setState(prevState => prevState - 1)
}
render(){
  return (
   <>
      <h2>this.state.count </h2>
      <button onClick={handleIncrement}>increment</button>
      <button onClick={handleDecrement}>decrement</button>
   </>
  )
}
}

Usage of PropTypes in React.

PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype.

Count.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  address: PropTypes.object,
  friends: PropTypes.array,
};

Using of events in React.

Just like HTML DOM events, React can perform actions based on user events.
React events are written in camelCase syntax within the curly braces

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

State & how to use setState.

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders.

refer counter example

What is Conditional Rendering & how to use it?

Displaying UI based on the certain condition
in React we can use the different ways to achive it some of them are
1: && operator 2: Ternary Operator 3: If-else 4: Switch

import react from 'react';
class signIn extends React.component{
     constructor(){
       super(props);
       this.state = {
        isLoggedIn : false
       }
   }
render(){
  return (
      <h1> {this.state.isLogged ? "Welcome Back" : "Please 
           Sign Up" } </h1>
     )
  }
}

Handling Inputs.

Controlled components & Uncontrolled component.

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component.

// Controlled:
<input type="text" value={value} onChange={handleChange} />

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the 
   current value of <input>

Introducing Components: A Better Way To Build And Maintain Complex Web Applications

Smithan kumar R — Fri, 21 Oct 2022 09:01:47 +0000

Components let you split the page into independent and reusable parts.

This makes organizing the page leaps and bounds easier, but even more importantly, components allow us as the developers to separate concerns from one another.

Functional Components

In React, there are two types of components that you can use: Functional Components and Class Components.
In this part, we will talk about functional components.

A functional component is a simple JavaScript function:

function Hello() {
  return <h1>Hello world.</h1>;
}

The code above defined a functional component called Hello, that returns a simple React element.

Notice that the name of the functional component begins with a capital letter. This is absolutely critical. If we start the name of a component with a lowercase letter, the browser will treat our component like a regular HTML element instead of a Component.

Rendering Components

In order to display the component, we need to create the corresponding JSX element.

For example, for our user-defined component Hello:

const elm = <Hello />;

Now, we can use our user-defined element and render it on the page:

function Hello() {
  return <h1>Hello, I am here Learn new things.</h1>;
}

const elm = <Hello />; 
ReactDOM.render(
  el, 
  document.getElementById('root')
);

Class Components

Class components are typically used when there are more advanced user interactions, like forms, and animations.

All class components need to extend the React.Component class.

We can rewrite our Hello functional component as a class component:

class Hello extends React.Component {
  render() {
    return <h1>Hello world.</h1>;
  }
}

Class components need to have a render method, which is in charge of telling what the page should show.

t's made by the React team, and it's the cornerstone of their design philosophy, which is to use reusable components for all components on the page.

Here's The Cool Thing About JSX: You Can Use HTML Tags In It.

Smithan kumar R — Fri, 21 Oct 2022 08:41:46 +0000

As you can see, the element is not in quotes to represent a string. It's like an HTML element, however we use it right in the JavaScript code!
This is called JSX, and it is a syntax extension to JavaScript. It allows us to build UI elements right in the JavaScript code!

ReactDOM.render(
  <h1>Hello, React!</h1>,
  document.getElementById('root')
);

Expressions in JSX

We can use any JavaScript expression inside JSX using curly braces.

const name = "David";
const el = <p>Hello, {name}</p>;

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

Attributes in JSX

We can specify attributes using quotes, just like in HTML:

JSX
When using a JavaScript expression as the attributes value, the quotes should not be used:

<div id="name"></div>

When using a JavaScript expression as the attributes value, the quotes should not be used:

<div id={user.id}></div>

How Does JSX Work?

When the JSX expressions are compiled, they are converted into JavaScript objects, representing React elements.
React then uses these elements to build the corresponding HTML DOM and display it in the browser.

Let's create a counter app, that increments a counter variable every second and displays it on the page as a paragraph:

let counter = 0;

function show() {
  counter++;
  const el = <p>{counter}</p>;
  ReactDOM.render(
    el, document.getElementById('root')
  );
}

setInterval(show, 1000);

We use setInterval to call the show function every second and render the counter element on the page.

One of the great features of React is that it updates only the elements that need an update. You can inspect the HTML output of the example above and see that only the text in the paragraph gets updated every second.

JSX is a great tool for React in creating views. It has the simplicity of HTML. React's DOM manipulation works with it. The declarative nature makes it easy to understand.

Still, you should also know that JSX can make the code redundant, which makes a lot of developers hesitant to use it. But if you apply the proper unit testing, any potential issues can be found and resolved in time.

Everything You Need to Know About Unix Commands

Smithan kumar R — Tue, 16 Aug 2022 06:31:31 +0000

UNIX, multiuser computer operating system. The main features of UNIX were its simplicity, portability (the ability to run on many different systems), multitasking and multiuser capabilities, extensive library of software, and hierarchical file system.

Displaying a Directory:

ls–Lists the names of files in a particular Unix directory. If you type the ls command with no parameters or qualifiers, the command displays the files listed in your current working directory. When you give the ls command, you can add one or more modifiers to get additional information.

Example: ls

Result: Lists the names of files in your default directory, in alphabetical order.

Example: ls -l

Result: Gives a long listing of the files in your directory. In addition to the file name, the long listing shows protection information, file owner, number of characters in the file, and the date and time of the last change to the file.

Example: ls -a

Result: Causes all your files to be listed, including those files that begin with a period (i.e., hidden files).

For more information, type Man ls at the Unix system prompt.

To create and change directory:

This is used to change the current directory and also move from one directory to another directory.

Example:  cd {these changes the current }
Example:  cd {these changes the current }
Example:  cd .. {here it comes out of the present directory}

mk-dir — This command is used to make or create a new file or new directory in the specified path.

Example: mk-dir

rm-dir — This command is used to remove the created directory and by using rm-dir -r (recursively delete all the files present in that directory)

Example: rm-dir

Manipulating files using CRUD{Create, Read,Update, Delete}:

Some of the commands to Know:

Touch — This command is used to create a new file.txt

Echo — It is used to print the statement or add a new line that file

Head — It is used to display the first ten lines of the file

Tail — It is used to display the Last Ten Lines of the file

Nano — It is an inbuilt editor used to edit the file

Grep{global regular expression} — used to find the specific in the given file

Displaying and Concatenating (Combining) Files:

cat — Displays the contents of a file on your terminal.

Example:  cat new file

Result: Displays the contents of the file “new file” on your terminal.

Example:  cat new file old file

Copying Files:

cp – Makes copies of your files. You can use it to make copies of files in your default directory, to copy files from one directory to another directory, or to copy files from other devices.

Example: some cp file one file two

Result: Copies the contents of file one to a file named file two. Two separate files now exist.

Deleting Files:

rm - Deletes specific files. You can enter more than one file name on a command line by separating the file specifications with spaces.

Example: rm new file

Result: Deletes the file named “new file.”

Renaming Files:
mv - This command changes the identification (name) of one or more files.

Example: mv old file new file

Result: Changes the name of the file “old file” to “new file.” Only one file will exist.