インストール
8869 ワード
reactをWebサイトに追加
1.HTMLファイルにDOMコンテナをインストールする
// html
<body>
<div id="like_button_container"></div>
<!-- React를 실행. -->
<!-- 사이트를 배포할 때는 'develoment.js' 를 "production.min.js"로 대체한다.-->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 만든 React 컴포넌트를 실행. -->
<script src="like_button.js"></script>
</body>idを付与すると、JavaScriptはタグを検索し、見つかったタグにreactコンポーネントを表示することができる.2.React構成部品の作成
// like_button.js
'use strict'
const e = React.createElement;
// code....
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer)Create React App
単一ページのアプリケーションです.
開発環境を設定し、最新のjsを使用して、良好な開発経験と生産アプリケーションを最適化します.
$ npx create-react-app project-name
$ cd project-name
$ npm start導入本番稼働
npm run buildです.CDNリンク
開発に使用
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>導入用
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>CDNでReactを使用する場合は、CrossOriginツリーとともに使用することをお勧めします.
<script crossorigin src="..."></script>プロジェクトへのJSXの追加
$ npm init -y $ npm install babel-cli@6 babel-preset-react-app@3 $ npx babel --watch src --out-dir . --presets react-app/prodコマンドを使用して自動JSXモニタを実行src/like_button.jsという名前のファイルを作成すると、モニタは、前処理され、ブラウザと互換性のある純粋なJavaScriptからなるlike_button.jsを生成します.JSXを含むソースファイルを編集すると、このプロセスは自動的に再実行されます.リファレンス
このプッシュは実戦フィードバック公式サイトhttps://ko.reactjs.org/
「リトラクトガイド」https://ko.reactjs.org/docs/getting-started.htmlを参照してください.
Reference
この問題について(インストール), 我々は、より多くの情報をここで見つけました https://velog.io/@gay0ung/설치하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol