【ReactJs学习笔记】【Chrome安装react审查插件&&组件】

本文链接：https://blog.youkuaiyun.com/m0_37136491/article/details/81662693

本文介绍了如何在Chrome中安装React开发者工具，并详细讲解了创建、导出、引用及组合React组件的步骤。通过实例展示了如何将新组件插入到相应标签，并提供了完整的React学习资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

效果：
这里写图片描述