iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0
Modern Web

30天React從入門到入坑系列 第 4

DAY4:create-react-app_說明目錄結構與檔案

create-react-app新建application目錄結構

react-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

public/index.html為頁面模版,根節點為root到時會把組件透過ReactDOM.render描繪致此。public下的文件才能夠被public/index.html所使用,除非把src/下build成檔案使用。

public/index.html

<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>   
  </body>

src/index.js為JavaScritp entry point,需要將js與css放在src目錄下,只有src目錄中的文件才會被webpack處理。import src/App.js module名App,使用ReactDOM.render()把App描繪到Public/index.html的root節點上。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

JSX注意事項

  1. class App 元件元素應為大寫字母
  2. HTML標籤對應DOM元素為小寫
  3. tag必須成對,如果tag為空必須關閉 /> ,類似XML
src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

以往在HTML會把一組css屬性定義為class使用,因為在JavaScript中class為關鍵字,JSX裡無法直接使用。React DOM屬性使用駝峰式命名,所以JSX裡轉換為className,因為React到時會把自定義轉換為HTML屬性。

HTML 
<div class="App">
JSX 
<div className="App">

上一篇
DAY3:create-react-app_建立與說明
下一篇
DAY5:新朋友Components and Props
系列文
30天React從入門到入坑30

尚未有邦友留言

立即登入留言