How To Dev

Introduction React is a JavaScript library created by Facebook , often referred to as the most popular frontend framework today. This page aims to gather articles related to ReactJS , covering topics such as theory, features, and commonly used packages in the process of building ReactJS applications. I will update this series with more articles in the future as new ideas for content come up. The articles are arranged in increasing order of difficulty, so if you have time, it's recommended to start from the beginning of the series. This will ensure you grasp the essential knowledge and information needed for the subsequent articles. Here are some key topics in the series that you need to explore to effectively use ReactJS : Fundamental : React Hook, React Context, Lazy load, etc. State management : redux, mobx, recoil, etc. Middleware libraries : redux-thunk, redux-saga, redux-observable, etc. Popular packages : react-query, immer, styled-components, etc. Rendering techniques : C

Introduction When it comes to styling your React application with a css-in-js approach, styled-components stands out as a top choice. In this post, I'll walk you through how to utilize styled-components in a Next application. By default, Next provides a way to use  css-in-js  through styled-jsx. However, if you find styled-jsx cumbersome because it requires writing CSS within JSX , which can make your components lengthier, then styled-components might be the right fit for you. Installation of styled-components npm install styled-components // or yarn add styled-components Example usage: import styled from 'styled-components' const Wrapper = styled . div ` color: red; text-align: center; ` // Component with input param const Wrapper2 = styled . div <{ $color ?: string }> ` color: ${ props => props . $color } ; text-align: center; ` export default function Index () { return ( <> < Wrapper > Demo 1 </ Wrapper >