react

Vite（読み方はヴィート）とは？ 次世代フロントエンドツール 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 瞬時にスタートするサーバ 超高速な HMR 豊富な機能 最適化されたビルド ユニバーサルなプラグイン 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 $ npm create vite@latest MyApp -- --template react-ts というコマンドを叩くだけで、 Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y √ Package name: ... MyApp Scaffolding project in C:\Project\MyApp... Done. Now run: cd MyApp npm install npm run dev 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 上記コマンドでTailwindのインストールと設定ファイルを作成する。...

前回は環境構築したので、今回のゴールは簡単なアプリっぽいものを立ち上げるまでとする⚔️ sampleProjectという名前のサンプルプロジェクトを作成するために下記コマンドを叩く。 と、沢山の選択肢が示される。 $ expo init sampleProject ? Choose a template: » - Use arrow-keys. Return to submit. ----- Managed workflow ----- // Expo のサポート下で開発できる（簡単） blank a minimal app as clean as an empty canvas // １番シンプルな状態で blank (TypeScript) same as blank but with TypeScript configuration // １ページからスタート > tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript // 複数の画面遷移ができる状態に ----- Bare workflow ----- // Expo なしでの開発に近く、カスタマイズ性は上がる（難しい） minimal bare and minimal, just the essentials to get you started 今回は勉強なので、１番しっかりしてそうな「複数の画面遷移ができる状態に」を選択。...

まずは、Node.js LTSをインストールする必要がある。 私はnode管理ツールにvoltaを使用しているので、 $ volta install node success: installed and set node@16.16.0 (with npm@8.11.0) as default ↑を実行する。 Expo CLI のインストールする npm install --global expo-cli 正常にインストールできたかは、 expo whoami ↑を実行する。 結果、 bash: expo: command not found できていない…。 ログを辿る限り↓が怪しい。 Please ensure you have correct permissions to the Volta directory. 翻訳すると Volta ディレクトリに対する正しい権限があることを確認してください。 とのこと…、なるほど🤔? 調べてみるとそそもそもvoltaを使う際は開発者モードを有効にする必要があるとのこと。 会社のPCはvoltaを入れる前に有効にしていたので気が付かなかった。 ということで有効にしたうえで再挑戦。 npm install --global expo-cli やって、 expo whoami やると Not logged in, run expo login to authenticate 無事にインストールできた👍...

以前、reactをインストールする方法を書いたが、今日（2021年12月22日）急にインストールができなくなった。 react でプロジェクトを作成する You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/ というエラーが出てくる。 なにうえ、と調べるといくつかヒットした。 キャッシュを消せとか、色々出てきたので、検索して試してみるといいと思われる、が。 私にはどの方法もうまくいかなかった。 で、結局うまくいったのは…下記の通り。 これが正解…？ npx clear-npx-cache C:\Users\{name}\AppData\Roaming\npm-cache 削除 npm init npx create-react-app myapp これが正解なのだろうか。...

前回、reactのファイルを検分したので、今回は、適当に触ってみる。 それじゃ、適当に触ってみる App.js編 まず、前回インストール時の時から依存ファイルをクリーニングした。 結果、非常にわかりやすくなった。 ざっと見た感じ、HTML部分の特別な違いは、class が classNameになること…くらい？ import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <p>HTML部分の特別な違いは、class が classNameになること...くらいかしら</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a> </header> </div> ); } export default App; 上記コードで保存すると、 のように表示される。 ここまでは特別に難しくない。 App.css 編 次に、App.js の先頭に書かれている、 import './App.css'; を見ていく。 こちらも特別難しいことはない。 普通にcssを読みこんでいるだけなので、 color: white; → color: red; にすればテストの色が変更される、 この画像通りに。 特別難しいことはないが、 @media (prefers-reduced-motion: no-preference) {} font-size: calc(10px + 2vmin); とか個人的に知らない使い方があったので、勉強になる気がする。 てか、人のコードを見るのは勉強になる。 参考：意外と知らない？メディアクエリを使ってみよう。 参考：【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 index.js 編 最後に、前述した App....