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

  • 09 –与...合作

    课程清单

    In the lesson we have create our Person component. The question is what is the big advantage of this.
    组件很棒,因为我们可以将代码集中在每个文件中,从而使代码更具可维护性。没有把一切都放进去 src / App.js file which can really get crowded for bigger apps and the Person component s also reusable and configurable.

    可重复使用的组件

    现在回到配置零件重用非常简单。我们可以根据需要简单地多次复制和粘贴组件。
    例:

    src / App.js
    
    import 湖北福彩, { Component } from 'react';
    import './App.css';
    import Person from './Person/Person';
    class App extends Component {
    	render() {
    		return (
    			<div className="App">
    				<h1> Heading</h1>
    				<p> Paragraph </p>
    				{/* Reusing the same component Multiple time. */}
    				<Person />
    				<Person />
    				<Person />
    			</div>
    		);
    	}
    }
    export  默认  App;
    

    在浏览器中,我们多次获得输出,这是在应用程序中任何地方重用它的超级简单方法。如果我们的应用程序包含越来越多的组件,那么使用所有这些组件进行构建就非常容易,并且可以在我们需要在应用程序中使用的任何地方使用它们。
    <Person /> :这实际上是我们的自定义HTML元素。我们还可以配置它,尽管在执行此操作之前,让我们在湖北福彩代码中进行其他更改,因为现在所有内容都是静态的,仍然有我们的自定义组件,但是最后我们仍然使用一些静态HTML。

    src / Person / Person.js
    
    import 反应from 'react';
    const person = () => {
    	return <p> I am a Person</p>;
    };
    export  默认  person;
    

    现在,通常我们的模板,即我们的JSX代码应该是动态的。根据您的应用程序状态或某些用户输入,它应该输出不同的内容。我们将在本课程中做很多工作,但让我们在下一课中介绍其基础。

    反应introduction
    反应Component
    可重复使用的组件
  • 启用通知    不用了,谢谢