React_part5.0_Introduction

npxは新しいフォルダをインストールします.
npx [email protected] react_movie_web
「cmd」で検索します.
ではcreate-act-appが作成されます.
cmdで
codeファイル名を入力

TERMINALを開く
その後、Vscodeでstartスクリプトを実行する必要があります.

このウィンドウで
印刷npm run
印刷後npm start.
では、開発サーバというdevelopseverを作成します.

これがcreate-act-appを使用してアプリケーションを作成したときの初期バージョンです.
フォルダ名srcを表示できます.このフォルダは私のすべてのファイルを置くフォルダです.この中のファイルの中で一番重要なのはindexです.jsです.

create-act-appは私たちのアプリケーションで、ここはindexです.htmlに設定します.

divがある!私たちが自分で手を出す必要はありません.自動的に根元に置きます
srcフォルダではappです.jsとindex.js以外は削除されます.

index.js設定

// 불필요한 것은 검사하고 싶지 않으므로, 이렇게 3가지만 import하는 것과 ReactDOM.reder이다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

	

app.js設定

function App() {
  return (
   <div><h1>Welcome back!</h1></div>  );
}
//내가 지금 node.js로 작업하고 있기 때문에 파일들을 각각 분리시키는 것이 가능하고, 좀 더 조직적으로 구성할 수 있다.
//우리는 한 파일당 한 컴포넌트를 가지고 있고, index.js에서 그 컴포넌트들을 import 시켰다.
//즉 차후에 버튼과 같은 다른 컴포넌트도 한 개의 파일로 이루어질 거라는 것을 의미한다.
export default App;