Forem: Shiho Kazama | mia

Why did I fail to study React once? Things to keep in mind before a coding beginner learns to React.

Shiho Kazama | mia — Sun, 06 Feb 2022 22:06:53 +0000

Hello. I'm a college student majoring in web development.
My academic classes are almost over. Now, I'm preparing to job hunting to become a front-end developer such as resume, portfolio, LinkedIn so on and so forth.
If you are interested in my portfolio, here is the link. https://shihokazama-portfolio-miacan2021.vercel.app/

Today, I'll share my experience of how I learned React. Hopefully, It will be helpful to someone who is a beginner at coding and struggling to understand React.

Where did I start from learning?

I entered my college in Apr 2021.
I've already understood HTML and CSS and basic Javascript until June.
As for "basic Javascript", I could handle DOM; apply a new class name by event listener and then fire animation etc.
I put the link to the Landing page I created in June. It's also mobile-friendly. I made it for one week or so.
https://eager-knuth-847dfa.netlify.app/

I started studying React in June but It didn't work. I couldn't understand React at all, even after watching several tutorials and googling "React for beginners" lots of times.
How come? I analyzed the reasons.

I've been neglecting my Javascript studies.

Some web developers said you don't need to study Javascript a lot, we don't use Javascript. We use React. So, you have to study React, not Javascript.
That's true! Most of the companies don't use only Vanilla JS, they mainly use React, Vue, Angular etc.
However, I think web developers shouldn't say that to beginners like me! Now I see there is a big difference between developers and beginners about the level "Don't need to study Javascript so much".
When I thought I've already had enough knowledge of Javascript, it was time to start learning React!, but I was at the level just understood about DOM manipulations.
I didn't have knowledge of how to handle arrays and objects, what is class, and when I needs to write asynchronous functions.
Believe it or not, I didn't know the difference between "map" and "forEach".
I highly recommend that you take longer than you think is enough to understand Javascript before starting to study React for beginners.
React is a JavaScript library.
Don't neglect to study Javascript, or you'll get stuck in your React studies.

Finally, I could create an EC website from scratch in vanilla Javascript.

I wrote the whole code (add cart, delete cart, shop items are in class etc...) in Javascript. I didn't copy others' code at all, I thought myself how I operate it in Javascript. I was sure I have a solid knowledge of vanilla JS at last!
Here is the link - https://gracious-khorana-5ef5d7.netlify.app/

Restart learning React

I restarted my React learning in September. I could understand it easily!!!

I created my first React project in September it was a chatbot.
https://vigorous-hoover-828c01.netlify.app/

And I made a weather app using API in September.
https://happy-hawking-f6969d.netlify.app/

I wrote an article about React Hooks in December.
https://dev.to/miacan2021/my-memorandum-react-hooks-usecontext-usereducer-usememo-usecallback-useref-3i4k

And then, I created React Redux project in December.
https://focustube.vercel.app/

I'm sure I'm growing as a front-end developer very fast.
Now, I'm searching for a job!

Through this process, I think I have escaped from being a complete programming beginner. I learned that understanding a programming language takes a certain amount of time and that it is important to build up a solid knowledge base.
Thank you.

[My memorandum] React Hooks. useContext, useReducer, useMemo, useCallback, useRef.

Shiho Kazama | mia — Mon, 06 Dec 2021 04:42:42 +0000

Hi. I'm studying React now. I've created a chatbot(with WordPress Rest API) and a weather app using React before.
Now, I think I understood how to use 'useState', 'useEffect' but I've not understood other hooks.
So, Today I wanna organize my brain that how to use other hooks to write this article!

useContext

The useContext hook makes us easy to pass data not to pass down every parent to child to grandchild component manually.

Manual way

Parent App.js

function App() {
  return (
      <Title head={'sample title'} text={'sample text'}/>
  );
}

Child Title.jsx

const Title = ({head,text}) => {
    return (
        <div>
            <h1>{head}</h1>
            <Text text={text}/>
        </div>
    )
}

Grandchild Text.jsx

const Text = ({text}) => {
    return (
        <div>
            <p>{text}</p>
        </div>
    )
}

useContext

How it works?

We can use data in every child, grandchild using useContext without using props relay. In this above pattern, we can get data that is _text= {'sample text'} _without though the Title components.

App.js

Set createContext and props data.
First, we have to import createContext from react to use useContext.
And then, we'll set Provider where we want to pass data.
In service provider has a value which comes from word variable.
That value of the word variable can be passed to other children or nested components.

import { createContext } from 'react';
import Title from './components/Title';

export const SampleContext = createContext()

function App() {
  const word = {
    title: "'sample title',"
    text: 'sample text'
  }
  return (
   <SampleContext.Provider value={word}>
      <Title />
    </SampleContext.Provider>
  );
}

Title.jsx

In child components, import useContext and a variable from App.js that used createContext().
We can access 'word' variables that in App.js using useContext like this.
So, I want you to focus on the tag here. It doesn't have any props value but it can display the data from the word variable.

import { useContext } from 'react'
import { SampleContext } from '../App'
import Text from './Text'

const Title = () => {
    const contextTitle = useContext(SampleContext)
    return (
        <>
        <h1>{contextTitle.title}</h1>
        <Text />
        </>
    )
}

Text.jsx

The way to get data is the same as Title.jsx.
It can get data from App.js directly without any props.

import { useContext } from 'react'
import { SampleContext } from '../App'

const Text = () => {
    const contextText = useContext(SampleContext)
    return (
        <p>{contextText.text}</p>
    )
}

useContext + useState

I'll introduce how to combine useContext and useState.
Here is the code that can change values of title and text to click buttons from Title.jsx and Text.jsx.

App.js

import { useState, createContext } from 'react';
import Title from './components/Title';

export const SampleContext = createContext()

function App() {
  const [title, setTitle] = useState('Default Title')
  const [text, setText] = useState('Default Text')
  return (
    <SampleContext.Provider value={{ titles: [title, setTitle], texts: [text, setText] }}>
      <Title />
    </SampleContext.Provider>
  );
}

Title.jsx

import { useContext } from 'react'
import { SampleContext } from '../App'
import Text from './Text'

const Title = () => {
    const {titles} = useContext(SampleContext)
    const [title, setTitle] = titles
    const handleClick = () => {
        setTitle('Changed from child components')
    }
    return (
        <>
        <h1>{title}</h1>
        <button onClick={handleClick}>Change</button>
        <Text />
        </>
    )
}

Text.jsx

import { useContext } from 'react'
import { SampleContext } from '../App'

const Text = () => {
    const {texts}= useContext(SampleContext)
    const [text, setText] = texts
    const handleText = () => {
        setText('Changed from grand child component.')
    }
    return (
        <>
        <p>{text}</p>
        <button onClick={handleText}>change</button>
        </>
    )
}

Note: If you use this, it wouldn't work.

const title = useContext(SampleContext.title);

useReducer

The useReducer hook can be used for state management like useState.
We can use useState but useReducer is a suited handle for complex structure states.
It looks like Redux!

How to use

I created a simple counter function.

import React, { useReducer } from 'react'

const Counter = () => {
    const reducerFunc = (state, action) => {
        switch (action) {
            case 'PLUS':
                return state + 1;
            case 'MINUS':
                return state - 1;
            case 'RESET':
                return 0;
            default:
                return state;
        }
    }
    const [count, dispatch] = useReducer(reducerFunc, 0);
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => dispatch('PLUS')}>+</button>
            <button onClick={() => dispatch('MINUS')}>-</button>
            <button onClick={() => dispatch('RESET')}>0</button>
        </div>
    )
}

'reducerFunc' would be receiving state and action and then update state that follows dispatched action type.
We'll use useReducer like this.

const [state, dispatch] = useReducer(Reducer, intialState)

It's useful to create functions that have many patterns.

useMemo and useCallback

The useMemo hook returns a memoized value and useCallback returns a memoized callback.
To return memoized value or callback, it would be held the result of the process and returns the held value without processing until a certain trigger. It helps the performance of a website.

useMemo(() => func(that has very expensive value), deps) 
useCallback(func(that has very expensive function), deps)

For useMemo, it'll be rendered when the 'deps' value changes.
It does not render when it is not needed, it could be improved performance.
Functions passed to useMemo will be executed during rendering. API request should be written in useEffect, not useMemo.
useMemo is effective for JSX.

For useCallback, it's good to use in useEffect if that has functions call again and again. And also good for handler events when a button is clicked.
It improves performance when the page re-rendered.

useRef

The useRef hook has a special feature that can store data without rendering.

useRef hook mainly has two ways to use.

First, it would be returned 'ref' object with the current property.
useRef hook can use like below.

const refObj = useRef(initVal)
const val = refObj.current;

And we can update ref object like this. This is an example of that input box would be a focus with a button click.

import React,{ useRef } from 'react'

const Input = () => {
    const refObj = useRef(null)
    const handleRef = () => {
        refObj.current.focus()
    }
    return (
        <div>
          <input ref={refObj} type='text' />
          <button onClick={handleRef}>click</button>
        </div>
    )
}

useRef is useful for the input box because it would be rendered when the value changed. It won't render just input every word.

EX.)
useRef => typing...(not render) 'HELLO' => update value(render)
useState => using set property. typing...(render every word, 5times for this time) 'HELLO' => update value(render)

When you want to update only holding values and don't want to re-render, useRef is a good choice!

Conclusion

I'm a beginner at using these hooks, so I'll be lost which hooks are better for use in my case? or how can I use this? for sure. I was completely lost in how these hooks work, but now, I could get it a little bit. I wanna use to it with using these for my project,

I hope this article could help your or my development journey.

Thank you.

Fade-in animation on scroll with IntersectionObserver(Vanilla JS)

Shiho Kazama | mia — Fri, 01 Oct 2021 02:36:52 +0000

　When we watch a website that has cool animations, we tend to stay on the website for a long time.

It could be said that these animation features could help attract visitors to your website.

Today, I'll share with you guys　how　to　implement　fade-in animation on scroll with Vanilla Javascript.

Using IntersectionObserver to monitor if the element that you plan to animate is in the browser or not, you can make a fade-in animation that fires when the element enters the browser.

Sample & Goals

Here are two samples.
The first one is added fade-in animation on scroll for one container includes five items.
The second sample is applied fade-in animation for every five-item.
You can try to scroll and check animation again and again.

Blueprint

First, prepare an element that you want to apply fade-in animation with HTML. And add '.appear' class. (Class name doesn't matter. Whatever you want.)
Elements with the '.appear' class will be the target of the fade-in animation.

Second, write a fade-in animation with CSS. When the '.inview' class is added to an element with a '.appear', set the opacity to 1 and transform: translateY(40px) to none.

Third, control the '.inview' class using IntersectionObserver of Javascript.

Throughout this article, we will use the unified class name to explain.

'.appear' class → It adds to the element's class which you want to apply fade-in animation.
'.inview' class →　It will be added when the element that has 'appear' class enters the browser.

Let's try to make a fade-in animation on scroll!

Monitor a single element and control classes with IntersectionObserver

1.Prepare the element that has the 'appear' class according to the above blueprint.

 <div class="container appear">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
 </div>

This time, I applied the 'appear' class at container div.

2.Prepare CSS animation.

.appear {
  transition: all 0.8s;
  opacity: 0;
  transform: translateY(40px);
}

.appear.inview {
  opacity: 1;
  transform: none;
  transition-delay: 0.3s;
}

If an element has an 'appear' class, it's applied 'transition','opacity' and 'transform'.

In this case, I wrote the CSS so that once the 'inview' class is added, the translateY value will disappear. By doing so, the element that has 'appear' class will move upward from 40px down from its normal position.
And then the element can appear to the browser changing 'opacity'.

3.Monitor an element and control classes with IntersectionObserver

You can use the IntersectionObserver　to determine if the monitored element is in the browser　or not and add or remove the 'inview' class.

const appear = document.querySelector('.appear'); 
const cb = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('inview');
    }else{
      entry.target.classList.remove('inview');
    }
  });
}
const io = new IntersectionObserver(cb);
io.observe(appear);

I will explain how I am using 'IntersectionObserver'.

1.Get the element to be monitored.

const appear = document.querySelector('.appear');

In this case, it's the 'container' class div.

2.Write a callback function.

const cb = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('inview');
    }else{
      entry.target.classList.remove('inview');
    }
  });
}

IntersectionObserver passes a callback function as a parameter.
In this code, a callback function is named 'cb'.
To find out which elements have been intersected using 'forEach'.
The 'entry.isIntersecting' can be used for the condition that the element is inside the screen.
And the if-else statement can be used to write code to add or remove classes.
If the element is intersected, add 'inview' class to 'appear' class.

3.Call the constructor to create an Intersection observer and pass a callback function.

const io = new IntersectionObserver(cb);

4.Specifies the target element to be monitored.

io.observe(appear);

In this code, it's monitoring the element with 'appear' class.

Monitor multiple elements(have same class name) and control classes with IntersectionObserver

1.Prepare elements that have the 'appear2' class according to the above blueprint.

  <div class="container">
        <div class="item appear2">1</div>
        <div class="item appear2">2</div>
        <div class="item appear2">3</div>
        <div class="item appear2">4</div>
        <div class="item appear2">5</div>
  </div>

In this second pattern, we will implement an animation in which multiple elements fade-in and out at different times.

I added 'appear2' class to each item.

2.Prepare CSS animation using Sass.

.appear2 {
    transition: all 0.8s;
    opacity: 0;
    transform: translateY(20px);

  &.inview2 {
      opacity: 1;
      transform: none;
      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          transition-delay: $i * 0.1s;
      }
    }
  }
}

'.appear2'class is the same styles as '.appear'.
However, '.inview2'　class has for loop section to transition-delay.

In Sass, we can handle Loop conveniently.
I'm going to put transition-delay on each element.
I use a loop statement to add a time delay for each element to appear one by one.

If you want to write it in CSS, it would be long like this.

.appear2.inview2 {
  opacity: 1;
  transform: none;
}

.appear2.inview2:nth-child(1) {
  transition-delay: 0.1s;
}

.appear2.inview2:nth-child(2) {
  transition-delay: 0.2s;
}

.appear2.inview2:nth-child(3) {
   transition-delay: 0.3s;
}

.appear2.inview2:nth-child(4) {
  transition-delay: 0.4s;
}

.appear2.inview2:nth-child(5) {
  transition-delay: 0.5s;
}

As you can see, Sass is powerful and useful, and I personally like Sass.

3.Monitor multiple elements and control classes with IntersectionObserver

Finally, We will control classes using IntersectionObserver.
In this sample, we need to monitor multiple elements, so we will use a loop statement to implement it.

const items = document.querySelectorAll('.appear2');

const active = function(entries){
    entries.forEach(entry => {
        if(entry.isIntersecting){
        entry.target.classList.add('inview2'); 
        }else{
            entry.target.classList.remove('inview2'); 
        }
    });
}
const io2 = new IntersectionObserver(active);
 for(let i=0; i < items.length; i++){
    io2.observe(items[i]);
 }

We have to get multiple elements this time, so I'll use
"querySelector*All*".

const items = document.querySelectorAll('.appear2');

This part is the same as the above.


const active = function(entries){
    entries.forEach(entry => {
        if(entry.isIntersecting){
        entry.target.classList.add('inview2'); 
        }else{
         entry.target.classList.remove('inview2'); 
        }
    });
}
const io2 = new IntersectionObserver(active);

This last section is different from the previous one.
Since there are multiple elements with the 'appear2' class, we will write the code to monitor all the elements with the 'appear2' class using a loop statement.

 for(let i=0; i < items.length; i++){
    io2.observe(items[i]);
 }

This'.observe()' is used in this way '.observe(Elements to be monitored)'.

If you want to monitor multiple elements that have different classes, you could write like this.

const item1 = document.querySelector('.item1');
const child = document.querySelector('.child');
const element = document.querySelector('.element');

///...(omitted)...IntersectionObserver


io2.observe(item1);
io2.observe(child);
io2.observe(element);

We can make fade-in animation on scroll using IntersectionObserver at last!

This is my first article about tech so I hope you guys could understand it easily.
Thank you.