농장/React

[React.js] babel 첫 사용과 실행하기

귤발자 2021. 6. 29. 22:52
728x90
반응형

 

 

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel" src="./app.js"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

 

 

app.js

class Codelab extends React.Component{
    render(){
        return(
            <div>반갑습니다. 하하하하핳</div>
        )
    }
}

class App extends React.Component{
    render(){
        return(
            <Codelab/>
        )
    }
}

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

 

 

실행하기

npm i -g http-server
http-server .

 

접속

http://127.0.0.1:8081

* 포트번호는 기기마다 다를 수 있다.

728x90
반응형