React実習環境の構築
Create Resact Appツールチェーンのノードを使用します.jsインストール
vscode端末で
npx create-react-app .
端末がnpmを起動すると、サンプルアプリケーションが実行されます.
ディレクトリ構造
ここで索引jsファイルは、サンプルアプリケーションのエントリを表します.グローバル設定が含まれます.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; // 디렉터리의 App.js 파일을 의미
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App /> // 샘플 앱의 인터페이스 부분
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}インデックスのhtmlにroot idがあり、画面の設定を変更します.
配置
npm run buildコマンドを入力するとbuildフォルダが作成されます.
serve-s buildを入力すると、どのパスに入ってもインデックスが作成されます.htmlファイルを表示します.
npx serve -s build
生活コードの授業をもとにします.
https://opentutorials.org/course/4900/31263
Reference
この問題について(React実習環境の構築), 我々は、より多くの情報をここで見つけました https://velog.io/@esolit3/React-실습환경-구축テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol