「Javascript/react/プロジェクト作成」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==プロジェクト作成== 以下をコンソールから実行する <pre> $ npx create-react-app helloworld $ cd helloworld </pre>」) |
(→プロジェクト起動) |
||
| (同じ利用者による、間の4版が非表示) | |||
| 行1: | 行1: | ||
| + | ==参考== | ||
| + | https://qiita.com/P-man_Brown/items/6c6c6366466b3ef61f7b | ||
| + | |||
==プロジェクト作成== | ==プロジェクト作成== | ||
以下をコンソールから実行する | 以下をコンソールから実行する | ||
<pre> | <pre> | ||
$ npx create-react-app helloworld | $ npx create-react-app helloworld | ||
| + | </pre> | ||
| + | |||
| + | ===確認=== | ||
| + | helloworld直下に以下が作成されてることを確認 | ||
| + | <pre> | ||
| + | README.md | ||
| + | node_modules | ||
| + | package-lock.json | ||
| + | package.json | ||
| + | public | ||
| + | src | ||
| + | </pre> | ||
| + | |||
| + | ==プロジェクト起動== | ||
| + | <pre> | ||
$ cd helloworld | $ cd helloworld | ||
| + | $ npm start | ||
| + | </pre> | ||
| + | ブラウザで、ttp://localhost:3000 で、起動するか確認 | ||
| + | |||
| + | ==テンプレをhelloworldに変更== | ||
| + | src/App.js | ||
| + | <pre> | ||
| + | import logo from './logo.svg'; | ||
| + | import './App.css'; | ||
| + | |||
| + | function App() { | ||
| + | return ( | ||
| + | <div className="App"> | ||
| + | <header className="App-header"> | ||
| + | <p>helloworld | ||
| + | </p> | ||
| + | <a | ||
| + | className="App-link" | ||
| + | href="https://google.co.jp" | ||
| + | target="_blank" | ||
| + | > | ||
| + | Google | ||
| + | </a> | ||
| + | </header> | ||
| + | </div> | ||
| + | ); | ||
| + | } | ||
</pre> | </pre> | ||
2024年6月4日 (火) 04:47時点における版
参考
https://qiita.com/P-man_Brown/items/6c6c6366466b3ef61f7b
プロジェクト作成
以下をコンソールから実行する
$ npx create-react-app helloworld
確認
helloworld直下に以下が作成されてることを確認
README.md node_modules package-lock.json package.json public src
プロジェクト起動
$ cd helloworld $ npm start
ブラウザで、ttp://localhost:3000 で、起動するか確認
テンプレをhelloworldに変更
src/App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<p>helloworld
</p>
<a
className="App-link"
href="https://google.co.jp"
target="_blank"
>
Google
</a>
</header>
</div>
);
}
