【Day5】来了解一下Component的建立和使用方法吧!! ٩(●˙▿˙●)۶…⋆ฺ

React Component是什麽概念呢!?

就是很像把东西组成起来的元件 => 比如汽车的引擎、汽车的车壳、汽车的轮胎组成汽车

那网页也是会分成很多的元件组成起来的!

Component会透过React Component的render而渲染出来，通常会有以下两种写法

• 渲染一整个Js Class (Class Component)
• 将某个组件作为function来渲染 (Funtion Component)

上述两种方式 无论是哪一种，只要Component建立完毕，
引用的时候都是需要import的，import完了才可以在我们的render里使用，
样子会长成这样 => <Class名称/>

Component的命名规则是首字母要大写

渲染一整个Js Class

• 建立一个JS档案，import React， 并 extends React.Component

  export default class Test extends React.Component {
  
  }
  

• 接着呼叫render function

  render() {
    return(
        <div>1234</div>
    )
  }
  

将某个组件作为function来渲染

• 建立一个Js档案叫做FormComponents.js，命名规则一样是首字母大写

• 建立一个function并export

  export function TextField(props){
  
  }
  

• 一样透过return来回传要渲染的东西

  export function TextField(props){
  
  	return(
  		<div>1234</div>
  	)
  }
  

最後，我们可以在别的组件里套用这个组件

• 引用整个Js Class

import Test from "../Test/Components/Test.js";

  render() {
        	return (<Test/>)
        }

• 引用某个Js里的function

  import {TextField} from "..Public/FormComponents.js";
  

   render() {
          	return (<TextField/>)
          }
  

以上是两种Component的建立方式及使用方法，
下一篇要来介绍State跟Prop的原理和应用方式!

快了快了!! 我们已经习得了React的重点之一了~
再加上下一篇的两个重点，我们就可以用JSX来写React了!

希望到这边，各位看官们都还看得懂，
小菜鸟我一直怕表达得不是很好..还请多见谅啊!! (｡ŏ﹏ŏ)