SharePoint Framework SPFx & React

0
votes

I'm new for SharePoint SPFx and React, got a question, the code generated by gulp below:

export default class HelloReactWebPart extends BaseClientSideWebPart<IHelloReactWebPartProps> {
  public render(): void { 

    const element: React.ReactElement<IHelloReactProps> = React.createElement(
      HelloReact,
      {
        description: this.properties.description
      }
    );

    ReactDom.render(element, this.domElement);

  }

Is there a way to create the element using JSX, not use React.ReactElement, like something below:

const element: React.ReactElement<IHelloReactProps> = 
        <HelloReact description={this.properties.description} />

Thanks!

1
reactjssharepointframework
You want the generated gulp code to output jsx? – azium
no, I just want to manually change the generated code to the JSX code, but got syntax error. – 10031103
JSX is not "legal" JavaScript syntax. that's what gulp is doing, transforming JSX to what it really is, createElement. you can use the online babel repl to see babeljs.io/repl/… – azium

1 Answers

1
votes

Yes, it works, all I need to do is rename the filename generated by the template, change the filename "HelloReactWebPart.ts" to "HelloReactWebPart.tsx".

Here is the screenshot