Frontend (56) 썸네일형 리스트형 React Hooks - UseParams / UseSearchParams (React Router DOM) It is common to use URLs to send additional information such as the id of an item. React Router DOM is one of the React libraries that makes working with routings easy. Today we will see how we can use its hooks to add a parameter or queries and get the value from them. Project Set Up Creating a React Project React React is the most papular framework followed by Angular and Vue. React, like Angu.. React Library - React Router DOM React, by nature, does not have a routing feature. React Router DOM is one of the React library packages; with this, we can easily create routing between pages. Let's see how we can use this library. HTML 삽입 미리보기할 수 없는 소스 React Library - Framer Motion Framer Motion is one of the package of the React library. With this, we can easily create animation effects to render or remove components smoother. Let's see how we can use this library. Project Set Up Creating a React Project React React is the most papular framework followed by Angular and Vue. React, like Angular uses components to build an application. However, React does not come with nati.. Hooks - State Management (useState, useReducer) The information shown on one page is not available on the other pages without a server or other storage. React provides various hooks to manage status across components that can represent different pages without needing a server or other client storage libraries. Let's see how we can use them! HTML 삽입 미리보기할 수 없는 소스 Displaying a List In React we can write JavaScript code with curly braces inside an HTML template. Let's see how we can show a list of items without writing repetitive elements in React. Implementation Creating a React App React React is the most papular framework followed by Angular and Vue. React, like Angular uses components to build an application. However, React does not come with native features like Angula.. React - Creating a Template When you create a react app there are many unnecessary files that come with it. I find it easier just to delete them all and add what is necessary. I will show you how Completed Template In case you just want the completed file right away. Here you go App.js function App() { return ( Test ) } export default App index.js import React, { StrictMode } from "react"; import ReactDOM from 'react-dom/c.. JavaScript Module - Text Wave Effect Let's see how we can create a wave effect. The completed code looks like the one below. To make it easy to implement this feature to any existing website, I structured this to work by adding a class name to a text element. When you add the class name 'wave-text', the effect will take effect given that you have done the necessary configurations. // wave-module.js const waveTextEl = document.query.. Client Side Storage - Indexed DB indexed db is a client storage. It is similar to web storage but can save more data than web storage. Think of indexed db as a database where you can create, add, edit, and delete. For every tasks, you have to connect to the database first. Create open(“dbName”, version): this opens a database or creates one if not exists. The schema of a database differs by the version. const req = window.index.. 이전 1 2 3 4 5 6 7 다음
