# 拆分組件 >想一想我們在Vue中是如何進行管理組件的，會不會把組件和業務寫在一起，答案是否定的。我們一般會將組件書寫在單個文件中。 我們可以新建文件夾`components`來單獨管理單個組件。 ## 目錄結構： ~~~ src | ├─components | ├─├─Hello.js | ├─main.js package.json ~~~ ## Hello.js ~~~ import React from 'react'; export default function Hello(props) { return <div> 體驗React組件{props.name} {props.price} </div>; } ~~~ ## 注意 在這里面要注意 Hello.js似乎是沒有用到導入的React。有的同學會認為要將其刪除。那么應該刪除么？ <font color="red">不可以刪除</font> 千萬要注意。我們可以先刪除看一下它的報錯。 ``` Uncaught ReferenceError: React is not defined ``` 我們有提到過 React在運行JSX其實還是利用了React.createElement這個函數來創建虛擬DOM。這里截圖看一下。  ## 總結： 拆分成單個普通組件千萬要注意不可以將一定要手動引入React否則會報錯。