React code conventions and best practices
Use linting and automatic formatterAll the major tools for React provide linting rules. If you like, feel free to edit them to fit your style, but always use some and automate the process of linting and formatting. Preferred tools are eslint and prettier. Import orderAdd some import order rules to your eslint config. This will ensure that the imports are always in the same order and are grouped by
Applying SOLID principles in React
Applying SOLID principles in ReactPublished on July 12, 2022 Photo by Jeff Nissen on Unsplash As the software industry grows and makes mistakes, the best practices and good software design principles emerge and conceptualize to avoid repeating the same mistakes in the future. The world of object-oriented programming (OOP) in particular is a goldmine of such best practices, and SOLID is unquestiona
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
React Libraries To Use In 2023: 17 Top Picks
Yash Tiwari for Coursesity Posted on Jun 13, 2021 • Updated on Mar 23, 2023 React is a JavaScript library that lets you create a prime UI for both mobile and web applications. It integrates seamlessly with other JavaScript frameworks and libraries and includes small, reusable pieces of code, called components. Due to their high modularity, React component libraries not only optimize UI development
New Suspense SSR Architecture in React 18 · reactwg/react-18 · Discussion #37
Overview React 18 will include architectural improvements to React server-side rendering (SSR) performance. These improvements are substantial and are the culmination of several years of work. Most of these improvements are behind-the-scenes, but there are some opt-in mechanisms you’ll want to be aware of, especially if you don’t use a framework. The primary new API is renderToPipeableStream, whic
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛
Wasp
app todoApp { title: "ToDo App", // visible in the browser tab auth: { // full-stack auth out-of-the-box userEntity: User, methods: { google: {}, gitHub: {}, email: {...} } } } route RootRoute { path: "/", to: MainPage } page MainPage { authRequired: true, // Limit access to logged in users. component: import Main from "@client/Main.tsx" // Your React code. } query getTasks { fn: import { getTasks
Figmachine (Figma to React) – Convert Figma designs to React code
import React from 'react' import { View, Text, Image, StyleSheet } from 'react-native' import { Svg } from 'react-native-svg' export default function FigmatoReact () { return ( <View style={FigmatoReactStyles.FigmatoReact}> <Text style={FigmatoReactStyles.Title}> Figma to React </Text> <Inputfield /> <Button /> <View style={FigmatoReactStyles.TabMenu}> <TabButton /> <TabButton /> <TabButton /> </V
TDD in a React frontend
2021-01-19 React, tddTDD in a React frontendNowadays, only a few professional developers are left that seriously doubt the value of test-driven-development and test-driven-design (tdd). But the reality of many codebases I have seen is that tdd is often limited to the backend, where the "business logic" lives. Part of this is due to a stigma that frontend development is not "real software developme
Let’s Build Micro Frontends with NextJS and Module Federation!
That headline is a mouth-full, I know! In the past several years I have been working on distributed and multiple teams as well as being a pretty early adopter of NextJS (since around V2.0!) in production. I’ve worked on micro frontends with shared npm packages while trying to orchestrate one cohesive user experience. It was and is hard. That’s why I have been closely following the latest developme
React component code smells
🌿 This post is still growing and might be updated.A growing collection of code smells in React components. The smells 💩Too many propsIncompatible propsCopying props into stateReturning JSX from functionsMultiple booleans for stateToo many useState in a componentLarge useEffect Too many propsPassing too many props into a single component may be a sign that the component should be split up. How ma
SWR vs React Query - fsubal
（※ この記事は API およびそこから導かれる設計のしやすさ観点での比較をしています。実際にキャッシュが有効に効いたか、などについてはまた別の機会に ）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mithi/react-philosophies: 🧘 Things I think about when I write React code 🧘
Utopia
https://blog.sentry.io/2021/04/12/slow-and-steady-converting-sentrys-entire-frontend-to-typescript/
Figma to React Component | Figma
Next.js から Prisma ORM を利用する
GitHub - bytedance/IconPark: 🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons
GitHub - flareact/flareact: Edge-rendered React framework built for Cloudflare Workers
GitHub - appleple/smartblock: intuitive block based wysiwyg editor built with React and ProseMirror
