DEV Community: Gobinath Varatharajan

why export default not accepting in const

Gobinath Varatharajan — Sun, 05 Feb 2023 09:55:46 +0000

Uncovered part to javascript 1

const is a javascript keyword for decalring variable,
const a = 3
you can declare multiple vatiable in const like

const a = 4;
      b = 9;

This work well but when you used export and default javascript does not support export and default together.

If you want to assign export in const you need to do the fellowing.

export const = [
name: 'jim',
work: 'FBI'
]

Bonus: when you writing json last value and array should not end with ,.

If you want to use export and default in javascript means then you should used

function sum(a, b) { return a + b; }

javascript throw error when you write the export default in const.

Happy Learning

class and functional component in react

Gobinath Varatharajan — Tue, 31 Jan 2023 06:36:41 +0000

The project help to understand the concept of useState, map and ternary operator in function component and using same functionality in class company

why more developer switch from class to hooks?
how to use them effectively by building a carousel?

LooK below

I have a list of images like

const sampleImages = [
  "https://images.pexels.com/photos/3836292/pexels-photo-3836292.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
  "https://images.pexels.com/photos/2792157/pexels-photo-2792157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
  "https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
  "https://images.pexels.com/photos/1661179/pexels-photo-1661179.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
  "https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
];

I have made the application both on hooks and class.check and work with them. I a welcome with feedback.

Building a simple Markdown with react and vanilla javascript for beginner

Gobinath Varatharajan — Thu, 12 Aug 2021 12:28:13 +0000

1.Javascript Part
2.React Part

Demo of what we are going to build

1. Javascript Part

This is build with vanilla javascript, HTML and some style to look better the same styling was use for react app also.

2. React Part

In React we are using a third party api for using markdown

you'll learn about useState hooks which is use as a trigger to change the value

The command to be fellow to build this application are

Select a folder where you want to keep this project.

npx create-react-app markdown

npm i react-markdown

This is App.js part which trigger our value to preview.

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import './App.css';

export default function App() {
  const [markdown, setMarkdown] = useState('# suppppp');

  function handleChange(e) {
    setMarkdown(e.target.value);
  }

  return (
    <div className="app">
      <textarea onChange={handleChange} value={markdown} />

      <ReactMarkdown className="preview" children={markdown} />
    </div>
  );
}

Congrats for reading the blog post and thank you for visiting my site

Essential React Concept - Part 1

Gobinath Varatharajan — Mon, 26 Jul 2021 17:33:31 +0000

This video by far the best piece of advice to learn react.💯

Baisc React JSX

import React from 'react';
import ReactDOM from 'react-dom';

// greeting is what it will render
function greeting() {
    return <div>Hello World</div>
}

// root from html is where to render
const rootNode = document.getElementById('root');

// ReactDOM.render(what, where);

ReactDOM.render(greeting(), rootNode);

Nesting Expression

{ } - it help us to interpreted the javascript expression in JSX

const year = 2020;

function Date() {
    return <div>Covid-19 hit on the year {year}</div>
}

Styling JSX with Inline-CSS

it help us to interpreted the javascript expression in JSX as an object.

const greeting = <button 
        style={{backgroundColor: 'red'}}>Submit
    </button>
```



---

**Using Multi-Component with JSX**

- Function vs Class



```jsx
import React from 'react';
import ReactDOM from 'react-dom';

// 1. Using Function Component
const Header = () => {
    return <h1>Hello World</h1>;
}

const Footer = () => {
    return <p>Welcome to React Component</p>;
}

// 2. Using Class Component

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

class Footer extends React.Component {
    render() {
        return <p>Welcome to React Component</p>;
    }
}

function App() {
    return (
    <>
        <Header />
        <Footer />
    </>);
}

const rootNode = document.getElementById('root');

ReactDOM.render(<App />, rootNode);
```



---

**Argument Vs Parameter**

- Parameters are declare within the function
- Arguments are the value pass to the function



```jsx
// Parameter
function argumentVar(par1, pa2, par3, par4, par5) {
    console.log(par1 + par2 + par3 + par4 + par5);
}

// Function call
argumentVar(1,2,3,4, 5);
// 11

// Arguments
function argumentVar(parameter1, parameter2, parameter3) {
    console.log(arguments.length);
}

// Function call
argumentVar(1,2,3,4,5);
// 5
```



---

**Single Props**

- Help to pass value to the component
- props are object.
- They are **read-only**(immutable) and they cannot directly change



```jsx
function Name(props) {
    return <h1>Hello {props.username}</h1>
}

const rootNode = document.getElementById("root");

ReactDOM.render(
    <Name username="Tony Robbie" />, 
    rootNode
);

// Hello Tony Robbie
```



---

**Parent and child relationship with Props**

- you should implement {**props.children}** when you're passing children in the parent component.



```jsx
import React from 'react';
import ReactDOM from 'react-dom';

// This is child
function Header(props) {
    return <h1>Hello {props.username}</h1>;
}

// This is the parent
function Layout() {
    return 
        <div style={{ background: 'golden' }}>
            {props.children}
        </div>;
}

function App() {
    return (
    <Layout>
        <Header username="Tony Robbie" />
    </Layout>
);
}

const rootNode = document.getElementById('root');

ReactDOM.render(<App />, rootNode);
```



---

**Map**

- Help toaccess array of element



```jsx
function App() {
    const actor = ["bruce", "robert", "will"];

return (
    <ul>
        {actor.map(character => (
            <li>{character}</li>
        ))}
    </ul>);
}

//you can also do this with component
function App() {
    const actor = ["bruce", "robert", "will"];

return (
    <ul>
        {actor.map(character => (
            <Character character={character} /> 
        ))}
    </ul>);
}

function Character(props) {
    return <li>{props.character}</li>
}

//render
const rootNode = document.getElementById("root");
ReactDOM.render(<App />, rootNode);
```



---

**key**

- Unique identifier to do some change only the needed once.



```jsx
function App() {
    const actor = ["bruce", "robert", "will"];

// here I have use indexes 
// you can also use some package for it.

return (
    <ul>
        {actor.map((character, i) => (
            <Character key={i} character={character} /> 
        ))}
    </ul>);
}
```



---

**Event Handler**

- onClick eventhandler



```jsx
// you have access to function data with event
function Character(props) {
    function handleCharacterClick(event) {
        alert(props.character);
        console.log(event);
}

    return <li onClick={handleCharacterClick}>{props.character}</li>
}
```



- onChange eventhandler



```jsx
function handleInputChange(event) {
    const inputValue = event.target.value;
    console.log(event);

return (
    <input onChange={handleInputChange} />
    )
}
```



---

> In Part 2 - I wil post all about Hooks all the post written in my blog are from my knowledge feel free to oppose it🤩. 
---

3 way to learn code faster

Gobinath Varatharajan — Fri, 16 Jul 2021 18:14:14 +0000

you can reach 50 to 60 percentage within a week to master something it take high amount of practice

1. what is active vs passive learning?

Studies show that one need a lot more attention while reading a book than that of watching videos. Reading is slow process which gives you more retention.

Action to be taken:

learn from docs and write a blog post about the stuff you learn

make them easy to understand by everyone

join a community and answer some question if it is already answer then simplify it and vice-versa.

2. how one should take notes while learning or watching tutorial?

Better way to learn is taking notes after listening or watching videos. Taking notes side-by-side lead to less retention.

Action to be taken

use space repetation mention while learning

build a small application that can be scalable

stick with one course don't jump from one place

3. where to start and stop by code-along tutorial?

code along is easy way to get start to know about unfamiliar thing. If you like it then explain the entire project to yourself then stop code along and start by expanding your project. If you feel struck then google but don't repeat watching the video again and again

Action to be taken

write a very small ebook with the help of your project and explain it with simple term and make publish it in online store.