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

  • 08 – Creating a Functional 反应Component

    课程清单

    我们已经学到了很多关于React核心基础知识的知识,特别是JSX这是非常重要的。如前所述,React完全是关于使用组件构建应用程序的组件,而react是一个使这些组件变得如此简单的库。
    好吧,到目前为止,我们只使用一个组件,时间来更改它,为此,我们将在其中添加一个新文件夹和一个文件。 src 我们项目的文件夹。

    Create Functional 反应Component

    So let’s create a new folder named as . Inside that 文件夹,我们将添加一个 人.js 文件。
    现在在该文件中,我们想要创建一个组件,而我们已经做到了。大多数时候,您应该使用其他形式的组件或创建组件。一个更好的函数是一个简单的javascript函数,因为最简单的形式的组件就是一个返回JSX的函数。

    src / 人 / 人.js
    
    const person = () => {
    	return <p> I am a 人</p>;
    };
    
    在整个课程中,我们将使用 ES6 功能,例如箭头功能等。

    仅此就创建了一个有效的函数,我们可以将其用作组件,但是我们还必须做 东西。

    We need to import React because keep in mind this JSX syntex is transformed to React.createElement() and to be able to call this method we need to import react from react package :

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

    是! we dont need a componet class because we are not using a class which extends component instade we are creating a function.

    出口功能

    我们仍然需要将该函数导出为其文件的默认值。

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

    Here we export this person const and which holds this function.
    现在,我们可以在项目的其他文件中开始使用此组件。让我们将此功能导入我们的 src / App.js

    src / App.js
    
    ...
      import 人 from './Person/Person'; // import our own 人.js file
    ...
    
    注意:
    由于所有JSX(HTML)元素均以小写字母开头,因此始终导入具有首字母大写的变量的函数或类。

    So, You could create your own component which we named <Person>, we can either use the opening and closing tag like this: <Person> <Person/> or since we dont nest anything between (Will cover that also in feature lessons). you can also use self closing tag like <Person />

    src / App.js
    
    import React, { Component } from 'react';
    import './App.css';
    import 人 from './Person/Person';
    class App extends Component {
    	render() {
    		return (
    			<div className="App">
    				<h1> Heading</h1>
    				<p> Paragraph </p>
    				<Person />
    			</div>
    		);
    	}
    }
    export 默认 App;
    

    make sure your npm start is working in terminal so you can check your output on http://127.0.0.1:3000.
    So <Person /> is our only component getting used of course using it like this is already nice but what is the exact benefit of treating it like this instead of simply adding the code right into the App.js 文件。让我们对该组件做更多的工作,以在下一课中看到该好处。

    反应introduction
    反应Component
    反应Component
  • 启用通知    不用了,谢谢