antd pro学习之react扫盲学习（三）

自定义简单react组件并引用

1.在src下新建hello.js

import React  from 'react';

// const Hello =()=>{
//    return(
//        <div>Hello React!</div>
//    );
// }

//函数Hello和上面注释掉的箭头函数的表示效果是一样的,
//当有多个dom元素的时候，必须给它们一个父元素，不然会报错
function Hello(){
    return(
        <div>
			<div>Hello React!</div>
        	<div>Hello React!</div>
		</div>
    );
}

export default Hello;

2.在index.js中引用自定义组件Hello

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Hello from './hello';
import * as serviceWorker from './serviceWorker';

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

3.npm start启动

4.页面输出

自定义的简单组件就可以了