React-學習目錄

會把我學習過程中的學習流程到這裏，供新手入門用

學習資料：

1.React入門-概述和演練教程

https://www.taniarascia.com/getting-started-with-react/

2.官方示例

https://zh-hans.reactjs.org/docs/getting-started.html#learn-react

 

 

環境搭建：

1.安裝Node.js和npm

https://nodejs.org/dist/v13.12.0/node-v13.12.0-x64.msi

cmd下使用node -v 和npm -v查看版本

2.下載React App

在本地任意路徑下，打開命令提示符，執行

npx create-react-app my-app

進入你的my-app文件夾，可以看到

刪除裏面src的所有文件，並新增一個index.JS文件,如下

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
	render(){
		return (<h1>你好</h1>)
	}
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

在src當前目錄下，打開命令提示符,輸入npm start

在瀏覽器訪問http://localhost:3000/

結果如下：

來簡單分析一下這個JS文件。

兩行import就是要導入這兩個模塊。

App類中有一個reder方法，裏面return的東西就是DOM，也就是HTML的內容

ReactDOM.render裏，第一個參數是<App/>,這個App就是我們寫的類名。

後面的 document.getElementById('root')，這個root,在哪呢

 

打開這個index.html

含義就是，在id爲root的標籤內填充我們reder函數返回的DOM內容