Step by step learning basic state in front end with Ethereum, React, Typescript ステップごとの Ethereum、TypeScript、React のフロントエンドを学んでいきます。
Before you begin, ensure you have met the following requirements: このプロジェクトを始める前に、以下の要件を満たしていることを確認してください：
- Node.js: You need Node.js installed to run this project. You can download it from Node.js official website. このプロジェクトを実行するにはNode.jsがインストールされている必要があります。Node.jsの公式ウェブサイトからダウンロードできます。
- Git: リポジトリをクローンするためにGitがインストールされている必要があります。Gitのウェブサイトで指示に従ってインストールしてください。 Git must be installed to clone the repository. Instructions are available on the Git website.
ethereum101をインストールするには、以下の手順に従ってください。
Follow below instruction to setup.
-
リポジトリをクローンする / Clone repository
git clone https://github.com/airinterface/ethereum101.git cd ethereum101 -
試したいレッスンのブランチを確認’・ Find out which branch you want to try.
| branch name | Description | diff (差を見る) |
|---|---|---|
step1  |
JavascriptでHelloworld Show Hello world in Javascript |
N/A |
| step2 |
TypescriptとLintに変換 Convert to TypeScript and Lint |
diff |
| step3 | DOMNodeをJSでページに追加します。 Create DOM Node and append to the page. |
diff |
| step4 | DOMNodeにイベントリスナーとスタイルを足しました。 Added EventListener and Style to DOM Node. |
diff |
| step5 | Reactを使い、JSXでDOMを生成する。 Switched with React, and use JSX to render the DOM |
diff |
step6  |
SASSを導入しCSSと変える。 Switched CSS with SASS |
diff |
step7  |
Componentを作り利用し、ステートとつなげて制御してみる Create a reusable component that uses the useState hook to manage and update its state. |
diff |
step8  |
Ethereum のウォレットの イベントとリクエストを追加 To add event handling and requests for Ethereum |
diff |
step9  |
NextJS と SASSを追加 Added NextJS and SASS |
diff |
step10  |
StateをContext内で管理 Manage State change in a context |
diff |
| step11 | コントラクトを作成する環境を作る。 Create the environment to develop contract |
diff |
| step12 | コントラクトを作成、テスト、Deploy。 Create a contract and deploy |
diff |
| step13 | Tailwind使用、コントラクトにデータを書き込む Used tailwind, and write to the contract |
diff |
-
依存関係をインストールする
前の依存ライブラリを消去
remove previous dependencies
rm -rf node_modulesブランチをチェックアウト
Checkout branch ( replace with below )
git reset --hard git checkout <branch>今の依存ライブラリをインストール
install current dependencies
npm install
ローカルでプロジェクト名を実行するには、以下のコマンドをターミナルで実行します。 See work in dev enironment, type below command in terminal
```
npm run dev
```
ステップ１,2, 3は For step 1, 2, 3
Click this link http://localhost:3000 http://localhost:3000 に行きましょう。