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了!

希望到這邊，各位看官們都還看得懂，
小菜鳥我一直怕表達得不是很好..還請多見諒啊!! (｡ŏ﹏ŏ)