【ReactJs學習筆記】【Chrome安裝react審查插件&&元件】

目錄

• 目錄
• Chrome安裝react審查插件
• 元件
  • 建立并導出元件
  • 引用元件
  • 嘗試直接将新元件放置到對應标簽
  • 組合元件
• 快捷連結

Chrome安裝react審查插件

react developer tools拓展安裝包下載下傳 ClickHere>>

拖動下載下傳了的.crx檔案到拓展程式，顯示如下

打開react項目，并用開發者工具，即可看到

元件

先開啟項目，實時檢視項目實作情況。

建立并導出元件

在src/建立一個.js檔案作為元件，其中我設定的是src/comment/CommentBox.js

//引入Component, Fragment，可将下面的簡寫，無需顯示為React.xxx;
// 使用Fragment可避免渲染多了一個多餘無用的div;切注意，最大容器有且隻有一個
import React, { Component, Fragment} from 'react';

class CommentBox extends Component{
//渲染
    render(){
    //可多行渲染
        return(
            <Fragment>
                <div className="comments">
                    <h1>評論</h1>
                    <hr />>
                </div>
            </Fragment>
        );
    }
}

//了解導出CommentBox作為預設的東西
// export { CommentBox as default };
// 可簡寫成
export default CommentBox;
           

引用元件

App.js

import React, { Component } from 'react';
import CommentBox from './comment/CommentBox';          //導入元件！

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <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>
        <CommentBox />             //引用元件
      </div>
    );
  }
}

export default App;
           

解讀index.js之引用App元件并将之渲染到id為root的标簽

import App from './App';

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

效果：

嘗試直接将新元件放置到對應标簽

index.js

import CommentBox from './comment/CommentBox';

ReactDOM.render(<CommentBox />, document.getElementById('emm'));
           

public/index.html

<div id="root"></div>
<div id="emm"></div>
           

效果：

組合元件

...
+import CommentList from "./CommentList";
+import CommentForm from "./CommentForm";


class CommentBox extends Component{
    render(){
        //多行渲染
        return(
            <Fragment>
                ...
+               <CommentList />
+               <CommentForm />
            </Fragment>
        );
    }
}
export default CommentBox;
           

效果：

快捷連結

全部React學習筆記的目錄 Click Here>>

全部Javascript學習筆記的目錄 Click Here>>

Less學習筆記 Click Here>>

安利一波前端開發推薦使用的工具 Click Here>>

github各類實戰練習源碼下載下傳 Click Here>>

如果你覺得我的東西能幫到你，無限歡迎給我的github庫點個收藏Star~0v 0~