Edited at

完全に心が折れた人向けのReactチュートリアル


前文

まともなReactのセットアップや説明がなかったので書きます。

周り見てた感じいろんなQiitaの記事を片っ端から試して凄まじい構成になっているものをよく見るので、環境構築から基礎まで書けたらよいと思います。ちょいちょい更新予定

環境構築はMacの場合だけ Windowsもnodeのインストール以外はだいたい同じなはず


そもそもReactって

React(リアクト)は、Facebookとコミュニティによって開発されているユーザインタフェースを構築するためのJavaScriptライブラリである[3]。React.jsまたはReactJSの名称でも知られている。wikipediaより引用

要はフロントを作るためのライブラリです。htmlとjsとcssの凝ったバージョンだと思えばよし

npmとかを使うから、Node.jsと混同したりサーバーサイドも関係あるんちゃう?って考える人も多いですが、関係ないです。ただのフロントエンドを構築するためのライブラリです。


環境構築


nodeの環境構築

$ brew install node

$ npm install -g n

$ sudo n stable


Reactの雛形作成

$ npm install -g create-react-app

$ npx create-react-app "プロジェクト名"

これでReactの雛形のプロジェクトのフォルダが生成されます。

プロジェクト名は小文字英数字が望ましい というか大文字ではプロジェクト作れない


とりまブラウザで確認

$ cd "プロジェクト名"

$ npm start

後は勝手にビルドされてブラウザが開くはず


ディレクトリ構造の解説

これを解説しないとこの辺のファイルを妙に弄ってプロジェクトを破損させたりする輩がいるので解説


  • node_modules/


    • npm install ... とかで入るライブラリ等の実体がある所

    • いじるな



  • public/


    • index.htmlとかfaviconとかを入れておく場所



  • src/


    • Reactのソースコードを書く場所



  • build/


    • index.htmlとかfaviconとかが入る場所



  • package.json


    • npm等で操作したデータが入っている ここに依存パッケージとかビルドするスクリプトとかが入っている

    • 消すな



  • yarn.lock


    • パッケージ管理にyarnを使っている場合関連パッケージが記載されている 

    • 消すな



  • README.md


    • 読め




ReactというかWebpackの仕組み

正確な説明はしないけどイメージ程度に

Reactの独自の言語であるJSXをコンパイルして、普通のブラウザで見られるhtml,css,javascriptの形式にする。

これがnpm run buildのコマンドのやっていること

npm startはnpm run buildをやってくれ、ブラウザに対してリンクを開いてくれる。

この状態でソースコードを編集すると自動的にビルドしなおしてくれる

Webpackはいろいろなライブラリを導入したり、ReactやVueのソースコードをひとまとめにしてくれるやつのこと

基本的にReactはこのWebpackとかを通して、まとめてビルドしない動かない

詳しい人が見たら怒りそうな解説であるが、イメージが大事...


src/ にあるコードの解説

ここは脳死でそういうもんなんやと考えてもいい

大事なのはせいぜいAppがpublic/index.htmlのrootにRenderされるという情報

後はのちのち考えればよい


index.js

import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();


index.jsのrenderから呼ばれたコンポーネントはこちら

これはFunctional Componentと言ってちょっと新しい書き方なのでややこしい

要はfunction Appがコンポーネントのように振る舞う

returnの中身が描画して欲しいデータということ


App.js

import React from 'react';

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;


しかしこれはわかりずらいので従来のコンポーネントに戻したコードが以下のコード

割とこっちの方が馴染みのあるコードなはず 

ネットに転がってるチュートリアルもこっちのほうがまだ多い気がする

もしこっちのほうがいいという人は、コピペすればよい


App.js

import React from 'react';

import logo from './logo.svg';
import './App.css';

class App extends React.Component {
render() {
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



チュートリアル

読め

https://reactjs.org/tutorial/tutorial.html