External babel file not working

Am working on one of the projects and what am trying to achieve is to link and load an external babel file:

So far what I have is as follows:

To link to the external file:

<script type="text/babel" src="index.js"></script>

Then the file itself

    function App(){
        const[text,setText] = React.useState('');

        return (
            <div className="text-center px-4">
                <h1>Markdown Previewer</h1>

                <textarea id="editor" rows="10" className="textarea" value ={text} onChange={{e} =>setText{e.target.value}}></textarea>

                <h3 className="mt-3">Output</h3>

                <Preview markdown ={text}/>


    function Preview(markdown){
        return {



    ReactDOM.render(<App />, document.getElementById('root'))

However, doing this works:

<script type="text/babel" src="index.js">
//some code

but that’s not the way I intend to serve it. Please guide me

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36

Challenge: Build a Markdown Previewer

Link to the challenge:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.