> 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-bing-ce-shi.md).

# 修改前端并测试

查看前端后，可以进行一些修改。

修改步骤：

1. 编辑器中打开index.jsx文件，并修改style设置。例如，你可能想要修改字体并在输入框使用占位文字，可以像下面一样修改：

   ```
   // Modify the front-end in the React JavaScript
   class MyHello extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         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 (
         <div style={{ "font-family": "sans-serif" }}>
         <div style={{ "font-size": "30px" }}>
             <p>Greetings, from DFINITY!</p>
             <p> Type your message in the Name input field, then click <b> Get Greeting</b> to display the result.</p>

           <div style={{ "margin": "30px" }}>
             <input id="name" placeholder="Type text here" value={this.state.name} onChange={ev => this.onNameChange(ev)}></input>
             <button onClick={() => this.doGreet()}>Get Greeting!</button>
           </div>
           <div>Greeting is: "<span style={{ "color": "green" }}>{this.state.message}</span>"</div>
         </div>
       </div>
       );
     }
   }

   render(<MyHello />, document.getElementById('app'));
   ```
2. 运行下面的命令重新构建项目

   ```
   dfx build
   ```
3. 运行下面的命令部署项目

   ```
   dfx canister install --all --mode reinstall
   ```
4. 刷新浏览器显示custom\_greeting\_assets canister的页面查看结果

   例如：

![](https://210739325-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma3V1sgF0nYMJqZDzw8%2F-MbVB5d02cc981TDdprg%2F-MbVJnO_UqYwU_Z79BXY%2FWechatIMG42.jpeg?alt=media\&token=fec2cf40-df6c-4e1b-92ff-941b5d491a22)

5\. 输入新的消息查看结果

![](https://210739325-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ma3V1sgF0nYMJqZDzw8%2F-MbVB5d02cc981TDdprg%2F-MbVJuA3kU5yjPuVB0Q7%2FWechatIMG43.jpeg?alt=media\&token=3eeaa563-5ca2-49d4-8d7c-14d842cbb82b)