[withoutCRA2] CRA없이 React앱 구성하기

Use Babel

In this chapter, we use transfer(babel). Babel also available in form of CDN.

...
<script src="https://unpkg.com/@babel/standalone@7.24.10/babel.min.js"></script>
...

we know simply adding this line is okay.

We can see Babel perfectly loaded. It means from now we can use JSX syntax also.

...
const App = () => <h1>Hello React World with JSX!</h1>;
ReactDOM.render(<App />, document.getElementById("root"));
...

But, still contrary to expectations, syntax error is occured

-> why? : because we didn’t provide to a browser, what script will be transpiled. We can solve it by adding type="text/babel" in <script> tag.

<script type="text/babel"> //let browser know "this part should be transpiled"

Now, we can see expected result.

But At console, we can see warning message as below. It means we should execute pre-transfered script instead of transferring in browser.

---

At next chapter, we’ll solve this warning. -> Webpack