public render()

in packages/app/client/src/ui/editor/welcomePage/howToBuildABot.tsx [48:201]
131 lines of code
2 McCabe index (conditional complexity)

  public render(): JSX.Element {
    return (
      <div className={styles.section}>
        <div className={styles.howToBuildSection}>
          <SmallHeader className={styles.howToTitle}>How to build a bot</SmallHeader>
          <div className={styles.stepContainer} role="presentation">
            <div className={styles.stepIcon}>
              <div className={styles.buildPlan01} />
            </div>
            <div className={styles.stepSection}>
              <p className={styles.stepHeader}>Plan:</p>
              <p className={styles.stepContent} role="presentation">
                Review the bot&nbsp;
                <LinkButton
                  ariaLabel={'Learn more about design guidelines.'}
                  linkRole={true}
                  onClick={this.onDesignGuidelinesDocClick}
                >
                  design guidelines
                </LinkButton>{' '}
                for best practices&nbsp;
              </p>
            </div>
          </div>
          <div className={styles.stepContainer} role="presentation">
            <div className={styles.stepIcon}>
              <div className={styles.buildPlan02} />
            </div>
            <div className={styles.stepSection}>
              <p className={styles.stepHeader}>Build:</p>
              <p className={styles.stepContent} role="presentation">
                <LinkButton linkRole={true} onClick={this.onEmulatorToolsLinkClick}>
                  Download Command Line tools
                </LinkButton>
                <br />
                Create a bot&nbsp;
                <LinkButton
                  ariaLabel="Create a bot from Azure"
                  linkRole={true}
                  onClick={this.onEmulatorCreateBotAzureLinkClick}
                >
                  from Azure
                </LinkButton>{' '}
                or&nbsp;
                <LinkButton
                  ariaLabel="Create a bot locally"
                  linkRole={true}
                  onClick={this.onEmulatorCreateBotLocallyLinkClick}
                >
                  locally
                </LinkButton>
                <br />
                Add services such as
                <br />
                <LinkButton
                  ariaLabel={'Learn more about Language Understanding (LUIS)'}
                  linkRole={true}
                  onClick={this.onLUISDocsClick}
                >
                  Language Understanding (LUIS)
                </LinkButton>
                ,&nbsp;
                <LinkButton ariaLabel={'Learn more about QnAMaker'} linkRole={true} onClick={this.onQnADocsLinkClick}>
                  QnAMaker
                </LinkButton>
                &nbsp;and&nbsp;
                <LinkButton ariaLabel={'Learn more about Dispatch'} linkRole={true} onClick={this.onDispatchLinkClick}>
                  Dispatch
                </LinkButton>
              </p>
            </div>
          </div>
          <div className={styles.stepContainer} role="presentation">
            <div className={styles.stepIcon}>
              <div className={styles.buildPlan03} />
            </div>
            <div className={styles.stepSection}>
              <p className={`${styles.stepHeader} ${styles.testBullet}`}>Test:</p>
              <p className={styles.stepContent} role="presentation">
                Test with the&nbsp;
                <LinkButton
                  ariaLabel={'Test your bot on the Emulator.'}
                  linkRole={true}
                  onClick={this.onDebugWithEmulatorLinkClick}
                >
                  Emulator
                </LinkButton>{' '}
                <br />
                Test online in&nbsp;
                <LinkButton
                  ariaLabel={'Test online in Web Chat.'}
                  linkRole={true}
                  onClick={this.onDebugWithWebChatLinkClick}
                >
                  Web Chat
                </LinkButton>
              </p>
            </div>
          </div>
          <div className={styles.stepContainer} role="presentation">
            <div className={styles.stepIcon}>
              <div className={styles.buildPlan04} />
            </div>
            <div className={styles.stepSection}>
              <p className={styles.stepHeader}>Publish:</p>
              <p className={styles.stepContent} role="presentation">
                Publish directly to Azure or
                <br />
                Use&nbsp;
                <LinkButton
                  ariaLabel={'Learn Continuous Deployment.'}
                  linkRole={true}
                  onClick={this.onContinuousDeploymentLinkClick}
                >
                  Continuous Deployment
                </LinkButton>
              </p>
            </div>
          </div>
          <div className={styles.stepContainer} role="presentation">
            <div className={styles.stepIcon}>
              <div className={styles.buildPlan05} />
            </div>
            <div className={styles.stepSection}>
              <p className={styles.stepHeader}>Connect:</p>
              <p className={styles.stepContent} role="presentation">
                Connect to&nbsp;
                <LinkButton
                  ariaLabel={'Learn more connecting to channels.'}
                  linkRole={true}
                  onClick={this.onConnectChannelsLinkClick}
                >
                  channels
                </LinkButton>
              </p>
            </div>
          </div>
          <div className={styles.stepContainer} role="presentation">
            <div className={styles.stepIcon}>
              <div className={styles.buildPlan06} />
            </div>
            <div className={styles.stepSection}>
              <p className={styles.stepHeader}>Evaluate:</p>
              <p className={styles.stepContent} role="presentation">
                <LinkButton linkRole={true} onClick={this.onAnalyticsLinkClick}>
                  View analytics
                </LinkButton>
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }