Separate JSX from component - React Native

Question

Is there any way in React Native to put the whole JSX in a separate file without risk of decreasing the performance of App?

Type the Angular that has a file for the HTML, other to the CSS and another pro Typescript.

Edit 1:

I forgot to mention but what I want to do is separate the whole JSX and be able to use the state, props and funções of the component even so.

Answer 1

It doesn’t make much sense to do this because Angular has an MVC structure and React doesn’t, the most you can do is create two components. One that only renders Components from props and another that takes care of the state and functions

Example in React

Example in React Native

function SomenteJSX(props) {
  return <View>{props.oQueVoceQuiser}</View>;
}

class SomenteStateProps extends React.Component {
  state = {
    oQueVoceQuiser: "hey"
  };

  algumaFuncao = () => console.log("oi");

  render() {
    return (
      <SomenteJSX
        algumaFuncao={this.state.algumaFuncao}
        oQueVoceQuiser={this.state.oQueVoceQuiser}
      />
    );
  }
}

But it will still be difficult to remove all JSX from the component.

Trying to turn React into a MVC structure is not recommended. What I advise is to always separate the css file from the component.