> For the complete documentation index, see [llms.txt](https://mixdao.gitbook.io/dfinity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mixdao.gitbook.io/dfinity/si-.-jiao-cheng/8.-zi-ding-yi-qian-duan.md).

# 8.自定义前端

现在，你已经对如何创建，构建和部署一个简单的程序有了基本的理解，并且熟悉了默认的项目文件和示例前端。也许你想要为你的项目实验不同的方法来自定义前端用户体验。

这篇教程讲解了使用简单的React框架为默认示例程序创建一个新的前端，并引导你对一些基本的接口进行自定义修改。之后的教程会对这里的介绍做扩展，但是如果你已经了解了如何使用CSS，HTML，JavaScript和React等其它构建UI的框架，你可以跳过这个教程。

Note

这个教程讲解了如何在Canister使用React框架来管理DOM。因为React有自己的DOM规则，你需要修改webpack配置来编译JSX编写的前端代码。需要更多学习React和JSX的信息，在[React](https://reactjs.org/)网站查看[Getting started](https://reactjs.org/docs/getting-started.html)。