SharePoint Framework - Integrating Office UI Fabric

export interface IComponentState {  
    userName: string;  
}  

Open OfficeUiFabricExamples.tsx under “\src\webparts\officeUiFabricExamples\components\” folder,

Import Textfield and button components,

// Import Textfield component  
import { TextField } from 'office-ui-fabric-react/lib/TextField';  
  
// Import Button component  
import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button';  

export default class OfficeUiFabricExamples extends React.Component<IOfficeUiFabricExamplesProps, IComponentState> {  
  constructor(props: IOfficeUiFabricExamplesProps, state: IComponentState) {  
    super(props);  
  
    this.state = ({  
      userName: ''  
    });  
  
    this._greetClicked = this._greetClicked.bind(this);  
  }  
  
  public render(): React.ReactElement<IOfficeUiFabricExamplesProps> {  
    return (  
      <div className={ styles.officeUiFabricExamples }>  
        <div className={ styles.container }>  
          <div className={ styles.row }>  
            <div className={ styles.column }>  
              <div className="docs-TextFieldExample">  
                <TextField   
                  required={true}   
                  name="txtUserName"   
                  placeholder="Your name please!"  
                  value={this.state.userName}  
                  onChanged={e => this.setState({ userName: e })}  
                />  
  
                <DefaultButton  
                  data-automation-id="greet"  
                  target="_blank"  
                  title="Greet the user!"  
                  onClick={this._greetClicked}  
                  >  
                  Greet  
                </DefaultButton>  
  
                <p>{this.state.userName}</p>  
              </div>  
            </div>  
          </div>  
        </div>  
      </div>  
    );  
  }  
  
  private _greetClicked(): void {  
    alert('Hello ' + this.state.userName);  
  }    
}  

Test the WebPart

1. On the command prompt, type “gulp serve”
2. SharePoint local workbench will open
3. Add the web part to the page
4. Enter text in TextBox component, click the Greet button. An alert should appear with the value entered in the textbox.