react でプロジェクトを作成する
投稿日:2021年12月12日
最終更新日:2023年02月09日
目次
react をインストールする
npx create-react-app my-app-name
上記のコマンドで react が自動でインストールされる。
※そんなことしないと思うが、「my-app-name」を「react」にすると怒られ、インストールできないので注意。私は何も考えずにそうして、無事に怒られた。
cd my-app-name
次にインストールしたディレクトリに移動する。
npm start
で、ローカルホスト(http://localhost:3000/)が開かれる。
これだけで、reactのアプリが起動する。
起動だけを考えるとvue より楽かもしれない、vueはいろいろと選択する必要があるので。
まずはソースを覗き見る
この時点で表示されているのは App.js のようで、
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Edit <code>src/App.js</code> and save to reload.</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>Learn React</a>
</header>
</div>
);
}
export default App;
該当ソースがこんな感じで、Javascriptを使用してhtmlを吐き出している?
正直、ぱっと見だとvue のtemplate構文のほうが見やすい気がする。
まあ、少しづつ、慣れていく。
次に読むおすすめ記事
何が面倒って、アイキャッチ画像を設定するほど面倒なことはない
Angularとセットで使うことが多いmaterial UI をインストールする
[…] 前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。 […]
[…] 前回、reactのファイルを検分したので、今回は、適当に触ってみる。 […]
[…] react でプロジェクトを作成する […]
react でプロジェクトを作成する | ウェブ制作を手掛ける「nove」のオウンドメディア
[url=http://www.gy02t1r4ha21p5765y284szxtb7mo25ds.org/]uxxfkyqtbvf[/url]
axxfkyqtbvf
xxfkyqtbvf http://www.gy02t1r4ha21p5765y284szxtb7mo25ds.org/