viteでreact(or preact)+typescript(+tailwindcss)な開発環境を構築 | DevelopersIO
吉川@広島です。 最近viteが非常に快適でハマって（良い意味の方）おり、ReactとPreactの環境構築を試してみたので備忘録がてら紹介します。 Getting Started | Vite viteには npm init vite@latest my-vue-app -- --template vue のように自分で設定することなくscaffoldする機能があるのですが、今回はこれを使わずに構築する手順を共有したいと思います。 環境 node 15.11.0 yarn 1.22.10 npm 7.18.1 vite 2.4.4 プロジェクト作成 ディレクトリを作って入ります。 mkdir my-app cd my-app 必要パッケージのインストール react, react-dom (or preact) vite (+ @vitejs/plugin-react-refresh o
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
Designing a Dataflow Editor With TypeScript and React | Protocol Labs Research
This is a design report – a story about the tradeoffs and challenges that we encountered while building a medium-complexity React component in TypeScript. These include state modeling (“making illegal states unrepresentable”) basic type-level programming in TypeScript DX patterns for generically typed React components DX patterns for reusable controlled components using a Redux-like action/dispatc
How to use Redux Toolkit for React + Typescript projects. | DevelopersIO
One of the bottlenecks using Redux is the number of boilerplates that need to be written: State, Action, Selector, and Reducer. This time, I tried using Redux Toolkit, a Redux helper library, and it helped me to use Redux easier and simpler than using regular Redux. In this article, I summarized how to use Redux Toolkit in a React project. What is the Redux Toolkit? The main maintainer of Redux an
Getting started with Typescript with React Hooks
Typescript is the next big thing in the Front End Development domain and if you are looking to upgrade your skills from a junior to an intermediate frontend developer, then it is a must have skill. Typescript is a a superscript of javascript, so if you know javascript you are already half way there! What Typescript brings to the table is more error-free code with type checking during run time and
Top three React & TypeScript pitfalls
The usage of React & TypeScript exploded in recent years. This should not come as a surprise to anyone at this point. Both tools proven to be viable working on web application large and small allowing developers to satisfy various business needs. With the explosion of popularity comes also the explosion of mistakes that engineers can make while working with this stack in their day-to-day jobs. Thi
Introduction to Micro Frontends with Module Federation, React and Typescript
Introduction to Micro Frontends with Module Federation, React and Typescript The Micro Frontend is one of the hottest topics on the internet right now. We hear it all the time, but what is micro Frontend? Imagine a website with lots of components such as Navbar, Footer, Main Container and Side Menu. What would happen, if they were being served from different domains? Yes, you guessed it right we w
【初心者】React × TypeScript 基本の型定義
はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長
I've made a Spotify clone with React, Redux, and Typescript
I've made a Spotify clone with React, Redux, and Typescript Hello everyone, I'm sharing this Spotify Clone that I made with React, Redux, and Typescript. If you wanna head straight to the live version you can click on this link: http://spotifyclooone.netlify.app/. If you wanna check the source code head to my Github by clicking here https://github.com/diogo405/spotify-clone. About the project The
React Hooks と TypeScript で簡単 TODO アプリ
1. はじめに 対象とする読者 以下のような人を読者として想定しています。 ある程度 JavaScript を習得している人 React 公式チュートリアルを終えたものの、次のステップを探しているような人 Node.js をインストール済みである人 Git Bash もしくは何らかの UNIX シェルの操作をある程度習得している人 コードエディタには、 Visual Studio Code（以下、VSCode）を利用します。VSCode に備わる機能の利用を前提とした記述もありますので、インストールしておくことをおすすめします。 目標とする Todo アプリ タスク (Todo) を既済・未済・削除済みなどの状態によってフィルタリングできる 登録済みタスクを編集できる 削除済みアイテムを「ごみ箱」フィルタから完全に削除できる 他のおすすめのドキュメント 2. 開発環境の準備 Vite.js
[React + Typescript] emotion の Theming 機能を使って複数のTheme切り替えを実装してみた | DevelopersIO
[React + Typescript] emotion の Theming 機能を使って複数のTheme切り替えを実装してみた やりたいこと emotion の ThemeProvider を使って自前で定義した複数の Theme の切り替えを実装してみました。 コードの量が多かったため全体のコードは CodeSandbox で公開しています。 emotion とは glam, glamor, styled-component, glamorous といった既存のライブラリから影響を受けて作られた CSS in JS ライブラリです。 書き方もstyled-componentによく似ており、styled-component でできることは emotion でも大体できそうという印象を受けました。 新規プロジェクトの作成 React + typescript の雛形を作成します。 npx
![[React + Typescript] emotion の Theming 機能を使って複数のTheme切り替えを実装してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7c3cd8ba0cd7f178e90733fd8102e276267084c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F04%2F10.png)
TypeScriptで「Reactを自作しよう」をやってみた - $shibayu36->blog;
最近2分間コーディングのすすめ、コードを書く習慣のハードルを下げるに触発されて2分間コーディングをやってみている。まずは昔興味が出ていたReactを自作しようをやってみたのでメモ。 やった様子は https://github.com/shibayu36/building-own-react に置いた。メインファイルは https://github.com/shibayu36/building-own-react/blob/main/src/index.tsx create-react-appしたままだと色々おかしくなったのでejectして手直ししたり、JSXのtranspileを置き換えるためにwebpackの設定を少しいじったりしたところが苦労した。そのあたりについては https://github.com/shibayu36/building-own-react/commits/mai
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する | DevelopersIO
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する React + Typescript で実装されたフロントエンドにreact-beautiful-dndを使ったドラッグ＆ドロップ機能を実装しました。 全体の流れ 本記事でやることの全体の流れです。 React + Typescript で簡単な画像のリストを作成する react-beautiful-dndを導入してリストのアイテムをドラッグ＆ドロップできるようにする 成果物 React + Typescript プロジェクトの雛形を作成する ドラッグ＆ドロップを実装する前準備です。 create react app コマンドでプロジェクトの雛形を作成します。言語は Typescript を指定します。 npx create-react-app sample_dd
![[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
Build a Shopping Cart with React and TypeScript
Many websites have shopping carts and you can create your own using React and TypeScript. We've released a tutorial on the freeCodeCamp.org YouTube channel that will help you improve your React and TypeScript skills. You'll also learn how to use: Material UI Styled Components and React-Query for React hooks Swedish software engineer Thomas Weibenfalk created this tutorial. He has created a ton of
【React+TypeScript】Netflixのクローンを作るチュートリアル
このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 【学べる事】 - Reactの関数コンポーネントとTypeScriptの基礎理解 - React Hooksによるstate管理 - Reactでの外部APIとの連携方法 - Postmanを使ったAPIテストの方法 - コンポーネント分割の考え方 - Tailwind CSSの基礎理解 - Vercelを使ったデプロイ方法 【余談】 また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。 - APIとは？ - HTTPステータスコードのついて - ReactフレームワークとReact環境の選択肢 - .envについて - 非同期処理について - スプレッド構文とは？ - 三項演算子 VS 条件式(if
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Query and TypeScript
Comparing TypeScript and PropTypes in React applications - LogRocket Blog
Up & Running with React, Redux Toolkit, Typescript and React Router
プロジェクトの概要｜【React+TypeScript】Netflixのクローンを作るチュートリアル
Instant messaging app made with React, Typescript, Node & Socket.io 🦜