如何使此代码适应这种环境

Question

Sharepoint代码是使用yo生成的。我有一个使用GitHub API进行搜索的用户名和退出项目，我想将其放在Sharepoint Webpart中，但不能将其放在那种环境中。

如何修改此代码：

const Card = (props) => {
	return(
  	<div style={{margin: '1em'}}>
    	<img width="75" src={props.avatar_url}/>
    	<div style={{display: 'inline-block', marginLeft: 10}}>
      	<div style={{fontSize: '1.25em', fontWeight: 'bold'}}>
        	{props.name}
        </div>
        <div>{props.company}</div>
      </div>
    </div>
  )
}

const CardList = (props) => {
	return(
  	<div>
    	{props.cards.map(card => <Card {...card}/>)}
    </div>
  );
}

class Form extends React.Component{
	state = {userName: ''}
	handleSubmit = (event) => {
  	event.preventDefault();
    axios.get(`https://api.github.com/users/${this.state.userName}`)
    	.then(resp => {
      	this.props.onSubmit(resp.data);
        this.setState({userName: ''});
      })
  }
	render(){
  	return(
    	<form onSubmit={this.handleSubmit}>
      	<input type="text"
        value={this.state.userName}
        onChange={(event) => this.setState({userName: event.target.value})}
        placeholder="GitHub Username" required/>
        <button type="submit">Add Card</button>
      </form>
    );
  };
}

class App extends React.Component{
	state = {
            cards: []
     		 };
         
  addNewCard = (cardInfo) => {
  	this.setState(prevState => ({
    	cards: prevState.cards.concat(cardInfo)
    }))
  }
         
	render(){
  	return(
    	<div>
        <Form onSubmit={this.addNewCard}/>
        <CardList cards={this.state.cards}/>
      </div>
    );
  }
}

ReactDOM.render(<App/>, mountNode);

对于Sharepoint Framework Environment，使用yo生成：

import * as React from 'react';
import styles from './Fmw.module.scss';
import { IFmwProps } from './IFmwProps';
import { escape } from '@microsoft/sp-lodash-subset';



export default class Fmw extends React.Component<IFmwProps, {}> {
  public render(): React.ReactElement<IFmwProps> {
    return (
      <div className={ styles.fmw }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>Nome do framework: {escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

谢谢大家