> 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/xiu-gai-qian-duan-wen-jian.md). # 修改前端文件 现在为默认程序创建一个新的前端 准备前端文件步骤： 1. 编辑器中打开webpack配置文件 (`webpack.config.js`) 2. 用index.jsx替换前端配置项index.html ``` entry: { // The frontend.entrypoint points to the HTML file for this build, so we need // to replace the extension to `.js`. index: path.join(__dirname, info.frontend.entrypoint).replace(/\.html$/, ".jsx"), }, ``` 3. 在plugins上添加下面的`module` ``` module: { rules: [ { test: /\.(js|ts)x?$/, loader: "ts-loader" } ] }, ``` 4. 在项目根目录创建tsconfig.json文件 5. 编辑器中打开tsconfig.json，复制粘贴下面的内容： ``` { "compilerOptions": { "target": "es2018", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ "lib": ["ES2018", "DOM"], /* Specify library files to be included in the compilation. */ "allowJs": true, /* Allow javascript files to be compiled. */ "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ }, "include": ["src/**/*"], } ``` 6. 保存修改并关闭tsconfig.json文件继续 7. 打开默认的src/custom\_greeting\_assets/src/index.js文件，删除7-12行 8. 复制粘贴下面的示例代码 ``` // Insert these lines after the import statements for // importing an agent and an actor import * as React from 'react'; import { render } from 'react-dom'; // Replace the default index.js content with // React JavaScript class MyHello extends React.Component { constructor(props) { super(props); this.state = { name: 'Name', message: '', }; } async doGreet() { const greeting = await custom_greeting.greet(this.state.name); this.setState({ ...this.state, message: greeting }); } onNameChange(ev) { this.setState({ ...this.state, name: ev.target.value }); } render() { return (

Greetings, from DFINITY!

Type your message in the Name input field, then click Get Greeting to display the result.

this.onNameChange(ev)}>
Greeting is: "{this.state.message}"
); } } render(, document.getElementById('app')); ``` 9. 运行下面的命令将index.js文件重命名为index.jsx ``` mv src/custom_greeting_assets/src/index.js src/custom_greeting_assets/src/index.jsx ``` 10. 打开文件 `src/custom_greeting_assets/src/index.html` ， 将body内容替换为 `
`. 例如： ``` custom_greeting
```