react的安裝與使用
阿新 • • 發佈：2020-07-02
https://www.jianshu.com/p/1f3acf8f8927
一、腳手架工具create-react-app安裝
使用以下命令進行安裝：
npm install -g create-react-app
二、create-react-app的使用
- 在需要建立專案的位置開啟命令列
- 輸入create-react-app + 專案名稱的命令，比如：
create-react-app todolist
- 當專案建立完成後，可以進入專案，並啟動：
cd todolist
npm start
三、腳手架工具生成的目錄結構
- 重要檔案：
- index.html
- index.js
- App.js
- 檔案內容：
- App.js
import React, { Component } from 'react';
/**
import {Component} from 'react'
相當於：
import {Component} from React // 因為react匯出React物件
由於解構賦值的原因，所以Component等於React.Component
*/
//所有的元件都要繼承Component
class App extends Component {
// 傳送頁面內容
render() {
return (
<div>
Hello World
</div>
);
}
}
// 匯出App模組
export default App;
- index.js
import React from 'react'; // 匯入React的作用是使用jsx語法
import ReactDOM from 'react-dom';
import App from './App'; // 接受
// 像js中使用標籤的語法，叫做jsx語法
ReactDOM.render(<App />, document.getElementById('root'));
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>TodoList</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html> 作者：燈光樹影
連結：https://www.jianshu.com/p/1f3acf8f8927
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。