REACT起動

5410 ワード
React テキストリンク

開発環境の構築


node.js

$ node -v

npm

npm -v
//npmは、Node Packaged Managerの略で、Nodeによって作成されたpakageを管理します.//nodejsをインストールすると一緒にインストールされるので、個別にインストールする必要はありません.

npx

npm install -g create-react-app
npm install npx -g
//npxはnpmの5.2.0バージョンから追加された新しいツールです.//npm-gオプションを使用すると、グローバルインストールで複数のエラーが発生する可能性があります.//npmを使用してnpxをダウンロードしてください.
npx create-react-app {프로젝트 이름}
構築に成功すると、次のフォルダが作成されます.
.
├── node_modules
├── public
├── src
├── package-lock.json
├── package.json
├── .gitignore
└── README.md
作成したアイテムを開始するには、次のコマンドを入力します.
$ npm start
Compiled successfully!

You can now view newapp in the browser.

  Local:            http://localhost:3000/React-Appp    
  On Your Network:  http://192.168.0.137:3000/React-Appp

Note that the development build is not optimized.       
To create a production build, use npm run build.        
runtime modules 31.7 KiB 16 modules
webpack 5.71.0 compiled successfully in 5537 ms
//構築に成功すると、これらの文は端末に書き込まれます.//次に、対応するurlにリンクして、構築されたプロジェクトを検証できます.

src/index.js

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

ReactDOM.render(<App />, document.getElementById('root'));
src/logo.svg
src/serviceWorker.js
src/index.css
App.test.js
//開発前!不要な書類を全部食べる.🍔//次に、対応するurlにリンクして、構築されたプロジェクトを検証できます.
src
├── App.js
├── App.css
└── index.js
import React from 'react';

function App() {
  return (
    <div className="App">
      Hello World!
    </div>
  );
}

export default App;
//削除されたファイルに基づいて./src/App.jsを変更します.App.jsの合成はindex.htmlの<div id="root"></div>に入る.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
||<App />document.getElementById('root').
string対{}とmapの置換子のコード(説明が悪いのは、mapの値を{}に置換することです)
iPad Split Viewを使用するかどうかを確認します.