react

前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。 react app のファイル構成 最初にインストールした時点で存在しているフォルダは下記一覧。 |--node_modules | |--(抜粋) |--public | |--favicon.ico | |--index.html | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css | |--App.js | |--App.test.js | |--index.css | |--index.js | |--logo.svg | |--reportWebVitals.js | |--setupTests.js |--.gitignore |--package.json |--README.md |--yarn.lock node_modulesの中身は多すぎるので、抜粋した。 どうやらこの中でも必要じゃないファイルがいくつかあるらしいので、残しておくべきファイルを整理する。 必要フォルダ構成 |--node_modules // 必要 | |--(抜粋) |--public | |--favicon.ico | |--index.html // 必要 | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css // 必要 | |--App....

react をインストールする 参考：Create React App 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構文のほうが見やすい気がする。 まあ、少しづつ、慣れていく。