how is this parser work? I couldn't parse it.

[Taymindis]

import "./styles.scss";
import React from "react";
import ReactDOM from "react-dom";
import jsx from 'acorn-jsx';
import * as acorn from 'acorn';
// default code
const code = `import React from "react";
function Greet() {
  return <span>Hello World!</span>
}
export default Greet;
`;

class SandBox extends React.Component {
  render() {
    const Greet = acorn.Parser.extend(jsx()).parse(code,{
      sourceType: 'module',
      plugins: { jsx: true },
  });
    return (
      <div className="app">
        <Greet />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<SandBox />, rootElement);

[RReverser]

Please provide more details: 1) What did you try to do? 2) What you expected to happen? 3) What happened instead?

From the code snippet it looks like you're trying to use parsing result (AST) as a React component, which doesn't make much sense...

[Taymindis]

Hi Mr Reverser, I want to convert my code to react component which show example above. How could I covert AST to react component?

[RReverser]

You would need to walk through the generated objects that Acorn returns and create React components for each of them yourself.