Frontend/React (12) 썸네일형 리스트형 React - Style Libraries (Bootstrap) Let's see how we can add style libraries in the React application Bootstrap Run the command shown below to install the bootstrap npm i bootstrap Add the path in the index.js file import 'bootstrap/dist/css/bootstrap.css'; Done References Adding Bootstrap | Create React App (create-react-app.dev) Adding Bootstrap | Create React App While you don’t have to use any specific library to integrate Boo.. Hooks - useRef (Creating a Reference to Elements) In vanilla JS, we can get elements by creating a reference to the DOM element to change them dynamically. On the other hand, in React, not only is not possible to use the document object in a component but also we can access the element directly and change the value of attributes. But if there is a way to get access to elements as we do with vanilla JS in React, it would not hurt to have the ski.. Hooks - useEffect (Catching Changes in a Component) The useEffect is a hook that catches changes in a component. It works similarly to event or setInterval and using this we can update the component whenever there is a change. Setting Up a Project 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.. Hooks - useContext(Global State) The useContext is one of the hooks in React. It manages the status of the application like useState with a twist that it does this on a global scope. So unlike useState where a status should be passed from one component to another, any component can access the context regardless of its position hence making it an excellent fit for global status management. HTML 삽입 미리보기할 수 없는 소스 React Hook - Redirection (React Router DOM) Redirection is one of the many basic features when it comes to developing a web application. React, by nature, does not have the feature but React Router DOM offers features to make the redirection availble. Let's see how we can use them 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. How.. 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.. 이전 1 2 다음