단 하나의 파일로 반응 개발 설정!

2612 단어 reactwebdevjavascript
안녕하세요!

이 기사의 제목이 클릭 미끼이고 이것이 실제로 사실이 아니라고 생각하십니까? 🤷🏽‍♂️

글쎄요, 저도 며칠 전까지만 해도 같은 생각을 하곤 했습니다. 그런데 전혀 그렇지 않다는 것을 알게 되었습니다. 우리는 create-react-app 또는 웹팩 없이도 해키한 소규모 반응 애플리케이션을 개발하고 코딩할 수 있습니다.

하나의 html 파일만 있으면 됩니다!

해당 파일의 내용은 다음과 같습니다.




<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>single page react boilerplate</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="kokaneka">
</head>

<body>
  <div id="place-app"> </div>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script type="text/babel">
    var App = (props) => {
            return (
                <div >
                    Hello Universe!
                </div>
            );
        };
        ReactDOM.render(
            App(),
            document.getElementById('place-app')
        );
  </script>
</body>
</html>

그리고 그게 다야! 위의 파일을 사용하여 원하는 대로 React를 가지고 놀 수 있고 브라우저에서 html 파일을 열어 UI를 볼 수 있습니다.

이 설정에서 일어나는 마법에 대한 세부 정보는 다음과 같습니다.
  • react 및 react-DOM을 가져오기 위해 CDN 링크를 사용하고 있습니다.
  • 우리는 babel에 대해서도 같은 일을 하고 있습니다.
  • 태그 내부에 React 구성 요소를 작성하고 getElementById를 사용하여 자리 표시자 div 대신 렌더링합니다!

  • 그리고 그게 다야. 반응 개발 여정을 계속하십시오. 마음에 드셨다면 흥미로울 수 있는 다른 항목을 확인해 보세요.





    건배!

    좋은 웹페이지 즐겨찾기