「Javascript/react/プロジェクト作成」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→プロジェクト起動) |
|||
| 行25: | 行25: | ||
</pre> | </pre> | ||
ブラウザで、ttp://localhost:3000 で、起動するか確認 | ブラウザで、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> | ||
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>
);
}
