×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 06 – 反应Component Basics

    课程清单

    在本课程中,我们将更深入地介绍React组件,正如我所解释的,React完全是关于创建组件自定义HTML元素的,我们可以说,然后可以使用它来构建应用程序。

    以前的亮点 :
    应用程式.js 即应用组件实际上已在 index.js 文件,将其渲染到根位置 document.getElementById('root')

    As 应用程式lication will contain multiple different components, typically you render one root component the 应用程式 component but you can name it what ever you want.


    应用程式 : 反应Component

    在应用程序组件中,我们可以嵌套您的应用程序可能需要的所有其他组件,当然这些组件也可以彼此嵌套。

    src / 应用程式.js
    
    import 反应, { Component } from 'react';
    import './App.css';
    function 应用程式Component() {
    	return (
    		<div className="应用程式">
    			{/* 其他 Component can be nested here  */}
    			<h1>Root Of 应用程式lication</h1>
    		</div>
    	);
    }
    class 应用程式 extends Component {
    	render() {
    		return 应用程式Component();
    	}
    }
    export 默认 应用程式;
    

    但是一直以来,您只有一个根组件,您可以将其扩展到HTML文件中的多个节点,并在同一项目中为不同的React应用程序安装不同的根组件。这将是可能的,但这不是我们在这里所做的。最后,您可以简单地将在本课程中为多个应用程序学习的内容复制到一个HTML文件中。
    现在,让我们坚持一下react的一般或典型用法。所以我们有App组件,它被定义为 应用程式.js 文件。

    Declaration of 反应Component class

    因此,我们可以看到两种定义 反应component we create javascript class with class keyword and then we use the extends keyword to inherit from this component object or class to be precise which is imported up there from the react library.

    src / 应用程式.js
    
    import 反应, { Component } from 'react';
    class 应用程式 extends Component {
      // ....
    }
    

    实际上,我们已经导入了两件事:
    1. 反应 :负责向DOM呈现任何内容的责任或要求。我们始终需要将其导入定义组件的文件中。
    2. 组件类 :用于创建组件的组件类。

    As component class has one method i.e the render() method. It needs to have that because 反应will call this method to render something to the screen. there is one impotent job that every 反应component has to do it has to return or render some HTML code which can be rendered to the DOM.

    Export That Particular 反应Component

    声明并创建组件后,我们需要将该组件类导出为文件的默认导出。

    src / 应用程式.js
    
    import 反应, { Component } from 'react';
     ...
    class 应用程式 extends Component {
     ...
    }
    export 默认 应用程式; // 默认 export of this 文件。
    

    这是个 ES6 feature and simply means if you import the whole file you will simply import this 应用程式 class because it is the 默认 export.

    我们确实在 index.js file where we have imported 应用程式 component.

    src / index.js
    
    import 反应from 'react';
    import 反应DOM from 'react-dom';
    import './index.css';
    import 应用程式 from './App'; // imported the 默认 应用程式 Class
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    serviceWorker.unregister();
    
    反应introduction
    反应Component
    反应Component
  • 启用通知    不用了,谢谢