# 拆分组件 >想一想我们在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否则会报错。