【ReactJs学习笔记】【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(
            
                <div className="comments">
                    
评论
                    
>
                div>
            
        );
    }
}

//理解导出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">
        
"App-header">
          
"App-title">Welcome to React
        
        
"App-intro">
          To get started, edit src/App.js and save to reload.
        
                     //引用组件
      div>
    );
  }
}

export default App;

解读index.js之引用App组件并将之渲染到id为root的标签

import App from './App';

ReactDOM.render(, document.getElementById('root'));

效果：

尝试直接将新组件放置到对应标签

index.js

import CommentBox from './comment/CommentBox';

ReactDOM.render(, 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(
            
                ...
+               
+               
            
        );
    }
}
export default CommentBox;

效果：

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~