styled-components: API Reference
CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all
Reactでお手軽アニメーション実装
今回は、Reactのアニメーションの方法について紹介します。 WebGLを使うようなダイナミックのもではなく、Webサイトを制作する上でよく使うアニメーションや、要素がビューポートに入ると発火するなど、あるあるだけど意外と実装めんどくさい...なものを簡単に実装できる方法を紹介します！ また、それらを組み合わせて自作ライブラリも作ってみたのでぜひチェックしてみてください🙌 Intersection Observer API 言わずと知れたJavaScript標準の交差監視APIですね。 Reactでは、ライブラリを使った方が楽に実装できるため、今回はサンプルコードと基本的な解説のみ行います。 import React, { ReactNode, useEffect, useRef, useState } from "react"; const ObserverComponent = ({
🎨Storybook@7入門：Next.js + TailwindCSSへのステップバイステップ組み込みガイド
Storybookのメジャーバージョンが7にアップデートしてからしばらく経ちます。 しかしながらNext.jsとtailwindCSSの組み合わせにStorybookを使用する記事が少なかったため、 組み込むために行ったことをまとめました。 動作確認環境は以下のとおりです。 "next": "13.3", "react": "^18.2.0", "tailwindcss": "^3.3.2", "storybook": "^7.0.11", "@storybook/addon-essentials": "^7.0.11", "@storybook/addon-interactions": "^7.0.11", "@storybook/addon-links": "^7.0.11", "@storybook/blocks": "^7.0.11", "@storybook/nextjs": "
Lists and Keys – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React and include live examples: Rendering Lists First, let’s review how you transform lists in JavaScript. Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled a
Handling Events – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React and include live examples: Responding to Events Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the
Components and Props – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React and include live examples: Your First Component Passing Props to a Component Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed
マークダウンとJavaScriptでインタラクティブなWebサイトを作れる「Reactive Doc」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、マークダウンで手軽にWebサイトを構築できるサービスをご紹介します。 一般的なマークダウン記法で簡単にWebコンテンツを作れるのですが、独自のコードブロックを挿入してインタラクティブなフォーム要素も挿入できるのが特徴です。 さらにJavaScriptで好きな機能を開発できる仕組みが提供されており、簡単なWebアプリを作るなど自由度の高いサービスに仕上がっています。 すべて無料で使えるので、ご興味ある方はぜひ参考にしてください！ 【 Reactive Doc 】 ■「Reactive Doc」の使い方 それでは、「Reactive Doc」をどのように使えばいいのか詳しく見ていきましょう！ 利用するためにユーザー登録やログインなどは一切不要です。サイトに訪れたらトップ画面にある【Try it】ボタンをクリックするだけです。 専用のWebエ
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
Reactハンズオンラーニングを読んだので感想
はじめに この記事はこれからReactやJavaScriptを0から学びたいと思う人に向けての記事です。 こちらの本を紹介したいなという、ただの布教記事です。 自分もそれなりにJavaScriptを書いて、Reactを勉強してきたと思っていましたが こちらの本を読んで、まだまだ序の口だったのだなと感じました。 もちろん、何年もJavaScriptを書いてきて、ここに書いてある事は常識だぜ！っていう人もいるかと思います。 ただ、最初にも書いたように、0から学ぼうとしている人に向けてなので そういった人にはとても有益な本になるのではないかと思います。 こちらのスクラップに自分で理解するためにコードのメモなどもとってあるので、参考にしてみてください。 本の構成について ツールの紹介 から始まります。 Github React Dev Tools Node などの説明があります。 JavaScri
5歳娘「パパのReact、めっちゃ遅いね！」 - Qiita
新しい記事もよろしくやで！ →ハスケル子「タグごとに色がついてたらいいのにな…」 38歳無職ワイ ワイ「（カタカタカタカタ・・・ッターン！）」 娘（5歳）「パパ、今日は何してるの？」 ワイ「今日はな、むかしWordPressで作った自分用TODOリストの」 ワイ「デザインをリニューアルしてんねん」 よめ太郎「（そんなことより職を探せや）」 娘「へぇ〜」 娘「WordPressってことは、PHPを書いてるの？」 ワイ「いや、ちゃうで」 ワイ「リニューアル後は、フロント部分をReactで実装しようと思ってな」 ワイ「そこで、WordPressをREST APIモードで使うことにしたんや」 ワイ「つまり、WordPressを管理画面つきAPIみたいに使うってことや」 娘「要は、WordPressをヘッドレスCMSとして使うんだね」 ワイ「ヘッドレス・・・？」 ワイ「ちゃうちゃう、管理画面つきAP
StackBlitz | Instant Dev Environments | Click. Code. Done. - StackBlitz
Stay in the flow with instant dev experiences. No more hours stashing/pulling/installing locally — just click, and start coding. Boot a fresh environment in milliseconds. Instant dev experiences Wait, I can enjoy web dev again? Significantly reduce time to market with matchlessly secure, instantly reproducible, fullstack dev environments which boot in milliseconds. Instant Bug Reports Create zero-
デザイナーがデザインツールを使わずに、React を使ってデザインした話 | MEDLEY Developer Portal
2020-06-19デザイナーがデザインツールを使わずに、React を使ってデザインした話メドレーのデザイナー酒井です。最近、JobMedleyからCLINICSに異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のようなデザインツールを利用するのが一般的かと思います。 弊社でも基本的にはデザインツールでデザインを行うことが多いのですが、プロジェクトによっては、よりリアルなモックアップが必要なため、デザイナー自身がコーディ
Reactチュートリアル『まるばつゲーム（三目並べ）』をcreate-react-appを土台にしてやってみる
ここです。ちょくちょく制作状況・現状を共有してくれるのですごく分かりやすいチュートリアルになっています。 こんな感じでちょこちょこ、今の状態のコードを見てみるみたいなリンクが貼ってあって、そこでコードと実行結果が見れます。 また、最後に追加課題もあるのですごく勉強になりました。 create-react-app準備npm install -g create-react-app create-react-app react-test cd react-test/上は自分で環境構築する場合。なお、チュートリアル「Setup Option 1: Write Code in the Browser」にも書いてありますが、環境構築で困ったらなりふり構わずブラウザでのチュートリアルをオススメします。 ソース修正チュートリアルの詳細は、頑張って英語を読んで下さい… 英語力中学生並の私でもなんとなく読めま
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frontity - The React Framework for WordPress
React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
SLOBSERVER - L'actualité de Second Life
React FontIconPicker Component
10 WordPress Themes Built with React