React基本(ファイルの分割)

• 開発環境構築
• ファイル階層
• ファイル分割

---

開発環境構築

#.bashrc再読み込み
. ~/.bashrc
#開発環境構築
create-react-app [name]
cd [name]
#アプリ入れたところでNodeを立ち上げる
npm start

ファイル階層

[name]の中身

package-lock.json
package.json
README.md
public
node_modules
src(←主にいじるのはここ)

実はcreate-react-appですでにファイル分割されている

src/
　├ App.css
　├ App.js
　├ App.test.js
　├ index.css
　├ index.js
　├ logo.svg
　├ registerServiceWorker.js

ファイル分割

メインファイル

htmlと一緒でindexが優先して参照されるっぽい

index.js

import React from 'react';//　これは必須
import ReactDOM from 'react-dom';//　表示するのに必要なおまじない
import './index.css';//　css
import App from './App';//Appを読み込む
import registerServiceWorker from './registerServiceWorker';//　表示するのに必要なおまじない

//読み込んだコンポーネントを入れる
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

外部ファイル

App.js

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

export default class Click extends React.Component{
  clickAction(event){
      alert('clicked!');
  }

  render(){
      return (
        <div onClick={(event) => this.clickAction(event) }>
          クリックしてね
          </div>
     )
  }
}

外部コンポーネント

exportさせんといけない

export default class Click extends React.Component{
・・・
}

または

class Click extends React.Component{
・・・
}
export default Click;