React에서 Hello, World!!
3991 단어 개발 준비ReactHelloWorld
전제
React 설치
Google Chrome React 확장 프로그램 추가
React Developer Tools을 설치합니다.
위 링크의 오른쪽 상단에 있는 Chrome에 추가를 누릅니다.
그런 다음 브라우저 오른쪽 상단의 React Developer Tools를 마우스 오른쪽 버튼으로 클릭하고 "확장 기능"을 클릭하십시오.
「파일의 URL에의 액세스를 허가한다」를 ON으로 한다.
디렉토리 생성
적절한 위치에 React_projects라는 디렉토리를 만들고 index.html 파일을 만듭니다.
이 index.html을 편집기에서 열고 씁니다.
React 스크립트 로드
index.html을 에디터에서 열어 Try React 의 html의 일부를 사용해 아래와 같이 기입합니다.
script가 사용하는 부분입니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<title>React Practice</title>
<link rel="stylesheet" href="css/styles.css">
<!-- React本体-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- Reactの結果をDOMに反映していくライブラリ-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- バベルライブラリ-->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
</script>
</body>
</html>
위와 같이 할 수 있다면 body를 이렇게합니다.
<body>
<div id="root"></div>
<script type="text/babel">
(() => {
ReactDOM.render(
<p>Hello, World!!</p>,
document.getElementById('root')
)
})();
</script>
</body>
이것을 브라우저에서 볼 때,
이렇게 표시할 수 있었다고 생각합니다.
Reference
이 문제에 관하여(React에서 Hello, World!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kagami-r0927/items/9c0c9e423069b3391a46
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
React Developer Tools을 설치합니다.
위 링크의 오른쪽 상단에 있는 Chrome에 추가를 누릅니다.
그런 다음 브라우저 오른쪽 상단의 React Developer Tools를 마우스 오른쪽 버튼으로 클릭하고 "확장 기능"을 클릭하십시오.
「파일의 URL에의 액세스를 허가한다」를 ON으로 한다.
디렉토리 생성
적절한 위치에 React_projects라는 디렉토리를 만들고 index.html 파일을 만듭니다.
이 index.html을 편집기에서 열고 씁니다.
React 스크립트 로드
index.html을 에디터에서 열어 Try React 의 html의 일부를 사용해 아래와 같이 기입합니다.
script가 사용하는 부분입니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<title>React Practice</title>
<link rel="stylesheet" href="css/styles.css">
<!-- React本体-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- Reactの結果をDOMに反映していくライブラリ-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- バベルライブラリ-->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
</script>
</body>
</html>
위와 같이 할 수 있다면 body를 이렇게합니다.
<body>
<div id="root"></div>
<script type="text/babel">
(() => {
ReactDOM.render(
<p>Hello, World!!</p>,
document.getElementById('root')
)
})();
</script>
</body>
이것을 브라우저에서 볼 때,
이렇게 표시할 수 있었다고 생각합니다.
Reference
이 문제에 관하여(React에서 Hello, World!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kagami-r0927/items/9c0c9e423069b3391a46
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
index.html을 에디터에서 열어 Try React 의 html의 일부를 사용해 아래와 같이 기입합니다.
script가 사용하는 부분입니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<title>React Practice</title>
<link rel="stylesheet" href="css/styles.css">
<!-- React本体-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- Reactの結果をDOMに反映していくライブラリ-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- バベルライブラリ-->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
</script>
</body>
</html>
위와 같이 할 수 있다면 body를 이렇게합니다.
<body>
<div id="root"></div>
<script type="text/babel">
(() => {
ReactDOM.render(
<p>Hello, World!!</p>,
document.getElementById('root')
)
})();
</script>
</body>
이것을 브라우저에서 볼 때,
이렇게 표시할 수 있었다고 생각합니다.
Reference
이 문제에 관하여(React에서 Hello, World!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kagami-r0927/items/9c0c9e423069b3391a46텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
