12,673
回編集
差分
ナビゲーションに移動
検索に移動
→ファイル拡張子
==[[React]]==
[[Node.js]] | [[Next.js]] |
{{amazon|4873117887}}
{{amazon|4815619484}}
===スケルトン作成===
#[httphttps://www.typea.info/blgblog/globindex.php/2017/08/react-1.html React 15/react_1/ 開発の全体像を把握しつつ開発環境を整える]#[httphttps://www.typea.info/blgblog/globindex.php/2017/08/react-router.html 16/react_router/ React の単純なサンプルに React Router を適用する]#[httphttps://www.typea.info/blgblog/globindex.php/2017/08/react-react-router-redux17/react_react_router_redux-saga.html / React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する]#[httphttps://www.typea.info/blgblog/globindex.php/2017/08/react19/react_react_router_redux-react-router-redux-saga-ajax.html saga_ajax/ React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む]#[httphttps://www.typea.info/blgblog/globindex.php/2017/08/23/react-react-routerreact_router-redux-saga-superagent-bootstrap.html superagent_bootstrap/ React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する]
==導入==
===Create React App===
*Reactアプリ開発のためのコマンドラインツール。トランスパイラ、バンドラ、開発サーバーなどを含むツールチェーン
*Facebook本家が提供。他にもNext.js、Vite、Gatsby、Parcelなどのツールチェーンがある。
*より高度な環境としてNext.jsも存在
===Next.js===
*[[Next.js]]
*Reactは、あくまでUI部分のみ
*本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
*Reactベースのフレームワークとしてデファクトスタンダードと言える存在
*主なライブラリ
**ファイルシステムベースの設定レスルーター
**サーバーコンポーネント
**データ取得用fetchメソッド
**リソース組み込みの自動最適化
**CSSフレームワーク、Tailwind CSSへの標準対応
===Node===
[[Node.js]] のインストール
====npx====
*ローカルにインストールされたツールを実行するためのパッケージランナー
===Next.jsアプリの作成===
[[Next.js]]
===[[TypeScript]]の導入===
====ファイル拡張子====
=====JSX=====
*https://3chome.net/javascript-typescript/#:~:text=.tsx%EF%BC%88TSX%E3%83%95%E3%82%A1
*[[TypeScript]]の拡張子
**.ts : コードにJSX含まない
**.tsx : コードにJSX含む(含まない場合tsxとしてもよいが望ましくない)
=====Module=====
*https://zenn.dev/uhyo/articles/typescript-module-option
**.mts
====型アサーション====
===導入(旧)===
----
*https://facebook.github.io/react/docs/installation.html
*https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/[[R]]EADME.md#table-of-contents
*[[React]]のSPAを作成するのによい方法
[[npm]] install -g create-react-app
*https://ja.reactjs.org/docs/create-a-new-react-app.html
<pre>
npx create-react-app my-app
cd my-app
npm start
</pre>
*[[React]]はバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。
*Babelやwebpackのようなビルドツールも設定なしに利用できる。
*リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
[[npm]] run build
==クイックスタート==
===JSX===
© 2006 矢木浩人
