React中自行定义新的Component组件：

React中自行定义新的Component组件：

一个React Component除了有重要的替换render（）外，将会有属性（props）跟状态（state），生命週期（lifecycle）。

一.下面的程式就是组件，它一定要继承React.Component并实作render且有return。

test.js

import React from "react";class Test extends React.Component {    render() {      return <h1>Hello , {this.props.name}</h1>;    }  }}  export default Test;

二.使用组件的方法:
1.先import组件进来，并给它一个变数的名子Test。例:import Test from './Test.js';
2.在ReactDOM.render()里加上就可以使用了。
3.若要加上参数的话就在 ;里面加，name="Sara",要多笔就用逗号分开。

index.js

//import 组件进来import Test from './Test.js';ReactDOM.render(  //这一段就是使用组件  <Test name="Sara" />;    document.getElementById('root'));

三.在组件中可以使用组件
1.先import组件进来，并给它一个变数的名子Test。例:import Test from './Test.js';
2.在ReactDOM.render()里加上就可以使用了。
3.若要加上参数的话就在 ;多笔就用空格分开。

Test.js

import React from "react";import Welcome from './welcome.js';class Test extends React.Component {  render() {    return (      <div>//有传参数prop，那子元件那边的类别中的建构子就会接收到this.props.name。<Welcome name="Sara" />; <Welcome/>;      </div>    );  }}