reactjs組件，渲染，個(gè)人嘗試后總結(jié)的注意事項(xiàng)，VScode或HBuilder中創(chuàng)建【詩(shī)書畫唱】
http://127.0.0.1:3000/
目錄：
講義
視頻學(xué)習(xí)記錄
初學(xué)者等人學(xué)習(xí)reactjs框架時(shí)，建議既要會(huì)在HBuilder中創(chuàng)建reactjs項(xiàng)目，也要會(huì)在VScode中創(chuàng)建reactjs項(xiàng)目
一個(gè)簡(jiǎn)單的reactjs的項(xiàng)目搭建：網(wǎng)頁(yè)上打印出“Hello,world"（每學(xué)個(gè)內(nèi)容其實(shí)都要先會(huì)搭建環(huán)境和會(huì)創(chuàng)建出打印出“Hello,world"等的基礎(chǔ)功能）
用Nodejs在VScode中創(chuàng)建一個(gè)簡(jiǎn)單的REACTJS應(yīng)用?
用HBuilder了解渲染，添加元素到div中，刷新元素，計(jì)數(shù)器
HBuilder中用ES6語(yǔ)法（建議常常用ES6語(yǔ)法）定義組件（組件就是計(jì)數(shù)器之類的東西）?
渲染元素.html
計(jì)數(shù)器.html
定義組件.html
創(chuàng)建REACTJS程序.html
VScode中創(chuàng)建自定義名稱的組件的方法?
index.js
index.html
個(gè)人嘗試后總結(jié)的注意事項(xiàng)
單詞：
作業(yè)：
通過reactjs方式完成頁(yè)面的布局：
1、在頁(yè)面中渲染一個(gè)登錄表單，表單中包含賬號(hào)輸入框和密碼輸入框以及提交按鈕。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
let e1 =<form>
用戶名:<input type="text" placeholder="請(qǐng)輸入用戶名" />
<br/>
密碼:<input type="password" placeholder="請(qǐng)輸入用戶密碼" />
<br/>
<input type="submit" value="登錄" />
</form>;
ReactDOM.render(e1,
? ? document.getElementById('formId'));
</script>
</head>
<body>
<div id="formId"></div>
</body>
</html>
2、在頁(yè)面中渲染一個(gè)科目列表，包含語(yǔ)文數(shù)學(xué)英語(yǔ)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
let e= <ul>
? ? ? ? ? ? ?<li>語(yǔ)文</li>
? ? ? ? ? ? ?<li>數(shù)學(xué)</li>
? ? ? ? ? ? ?<li>英語(yǔ)</li>
? ? ? ? ?</ul>;;
ReactDOM.render(e,
? ? document.getElementById('divId'));
</script>
</head>
<body>
<div id="divId"></div>
</body>
</html>
3、在頁(yè)面中渲染一個(gè)表格，包含學(xué)生學(xué)號(hào)姓名和生日。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js"></script>
<script type="text/javascript" srcc="js/react-dom.js"></script>
<script type="text/javascript" srcc="js/browser.js"></script>
<script type="text/babel">
let e1= <table border="1">
<tr><th>學(xué)號(hào)姓名</th>
<th>生日</th>
</tr>
<tr><td>詩(shī)書畫唱1</td>
<td>2020</td>
</tr>
<tr><td>詩(shī)書畫唱2</td>
<td>2021</td>
</tr></table>
;
ReactDOM.render(e1,document.getElementById('Id1'));
// let e2=?
// <tbody border="1px"><tr>詩(shī)書畫唱</tr>
// <tr>2020</tr>
// </tbody>;?
//
// ReactDOM.render(e2,document.getElementById('Id2'))
</script>
</head>
<body>
<!--<table id="Id1" border="1px" >
</table>-->
<div id="Id1" border="1px" >
</div>
</body>
</html>
4、在頁(yè)面渲染一個(gè)下拉框，顯示學(xué)歷。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js"></script>
<script type="text/javascript" srcc="js/react-dom.js"></script>
<script type="text/javascript" srcc="js/browser.js"></script>
<script type="text/babel">
let e1=?
<select>
<option>高中
</option>
<option>大學(xué)
</option></select>;
ReactDOM.render(e1,document.getElementById('Id1'));
</script>
</head>
<body>
<div id="Id1" border="1px" >
</div>
</body>
</html>
5、在頁(yè)面渲染顯示一張圖片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js"></script>
<script type="text/javascript" srcc="js/react-dom.js"></script>
<script type="text/javascript" srcc="js/browser.js"></script>
<script type="text/babel">
let e1= <img srcc="img/1.jpg"></img>;
//<img srcc="img/1.jpg"/>
ReactDOM.render(e1,document.getElementById('Id1'));
</script>
</head>
<body>
<div id="Id1" >
<div>
</body>
</html>
通過兩種方式自定義以下組件，并顯示在頁(yè)面上
1、愛好多選框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//定義組件方法一(ES5語(yǔ)法)：
// 組件的首字母必須大寫
function ZuJianName1(){
return (<div><input type="checkbox" name="one" value="給詩(shī)書畫唱點(diǎn)贊!" />給詩(shī)書畫唱點(diǎn)贊!
<input type="checkbox" name="two" value="給詩(shī)書畫唱投幣!" />給詩(shī)書畫唱投幣!</div>);}
? ? ? ? ? ? ? ? ReactDOM.render(<ZuJianName1 />,
? ? document.getElementById('div1'));
//定義組件方法二(ES6語(yǔ)法)：
class ZuJianName2 extends React.Component {
render(){
return (<div><input type="checkbox" name="one" value="給詩(shī)書畫唱點(diǎn)贊!"></input>給詩(shī)書畫唱點(diǎn)贊!
<input type="checkbox" name="two" value="給詩(shī)書畫唱投幣!"></input>給詩(shī)書畫唱投幣!</div>);
}
}
ReactDOM.render(<ZuJianName2 />,
? ? document.getElementById('div2'));
</script>
</head>
<body>
定義組件方法一(ES5語(yǔ)法)：
<div id="div1"></div>
定義組件方法二(ES6語(yǔ)法)：
<div id="div2"></div>
</body>
</html>
2、每隔一秒鐘就減一的計(jì)數(shù)器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//定義組件方法一(ES5語(yǔ)法)：
//組件的首字母必須大寫
function ZuJianName1(){
return (<div>
? ? ? ? ? ? <h1>計(jì)數(shù)器</h1>
? ? ? ? ? ? <h2>{num1 --}</h2>
? ? ? ? ? ? </div>);}
function f1(){
ReactDOM.render(<ZuJianName1 />,
? ? document.getElementById('div1'));
}
let num1 = 0;
setInterval(f1,1000);
//定義組件方法二(ES6語(yǔ)法)：
class ZuJianName2 extends React.Component {
render(){
return (<div>
? ? ? ? ? ? <h1>計(jì)數(shù)器</h1>
? ? ? ? ? ? <h2>{num2 --}</h2>
? ? ? ? ? ? </div>);
}
}
function f2(){
ReactDOM.render(<ZuJianName2 />,
? ? document.getElementById('div2'));
}
let num2 = 0;
setInterval(f2,1000);
</script>
</head>
<body>
定義組件方法一(ES5語(yǔ)法)：
<div id="div1"></div>
定義組件方法二(ES6語(yǔ)法)：
<div id="div2"></div>
</body>
</html>
3、登錄組件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//定義組件方法一(ES5語(yǔ)法)：
// 組件的首字母必須大寫
function ZuJianName1(){
return (<form>
用戶名:<input type="text" placeholder="請(qǐng)輸入用戶名" />
密碼:<input type="password" placeholder="請(qǐng)輸入用戶密碼"? />
<input type="submit" value="登錄" />
</form>);}
? ? ? ? ? ? ? ? ReactDOM.render(<ZuJianName1 />,
? ? document.getElementById('div1'));
//定義組件方法二(ES6語(yǔ)法)：
class ZuJianName2 extends React.Component {
render(){
return (<form>
用戶名:<input type="text" placeholder="請(qǐng)輸入用戶名" />
密碼:<input type="password" placeholder="請(qǐng)輸入用戶密碼"? />
<input type="submit" value="登錄" />
</form>);
}
}
ReactDOM.render(<ZuJianName2 />,
? ? document.getElementById('div2'));
</script>
</head>
<body>
定義組件方法一(ES5語(yǔ)法)：
<div id="div1"></div>
定義組件方法二(ES6語(yǔ)法)：
<div id="div2"></div>
</body>
</html>
4、友情贊助組件。（可以跳轉(zhuǎn)到贊助單位的主頁(yè)去）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//定義組件方法一(ES5語(yǔ)法)：
// 組件的首字母必須大寫
function ZuJianName1(){
return (<div>友情贊助:<a href="https://space.bilibili.com/434918741";>詩(shī)書畫唱</a></div>);}
? ? ? ? ? ? ? ? ReactDOM.render(<ZuJianName1 />,
? ? document.getElementById('div1'));
//定義組件方法二(ES6語(yǔ)法)：
class ZuJianName2 extends React.Component {
render(){
return (<div>友情贊助:<a href="https://space.bilibili.com/434918741";>詩(shī)書畫唱</a></div>);
}
}
ReactDOM.render(<ZuJianName2 />,
? ? document.getElementById('div2'));
</script>
</head>
<body>
定義組件方法一(ES5語(yǔ)法)：
<div id="div1"></div>
定義組件方法二(ES6語(yǔ)法)：
<div id="div2"></div>
</body>
</html>
個(gè)人嘗試后總結(jié)的注意事項(xiàng)：
<img src="img/1.jpg"/>或<img src="img/1.jpg"></img>的寫法都可以，
在HTML中的寫可能是因?yàn)槭侨跽Z(yǔ)言，一些簡(jiǎn)寫的方法沒有關(guān)系,比如<img src="img/1.jpg"/>寫成<img src="img/1.jpg">，<input type="password" placeholder="請(qǐng)輸入用戶密碼" />寫成<input type="password" placeholder="請(qǐng)輸入用戶密碼" >等等都不會(huì)報(bào)錯(cuò)，但是在JSX中會(huì)變嚴(yán)格,斜杠是不可以少的，同時(shí)<table><th><td><tr>等的標(biāo)簽在JSX中要寫在一起，比如
let e1= <table border="1">
<tr><th>學(xué)號(hào)姓名</th>
<th>生日</th>
</tr>
<tr><td>詩(shī)書畫唱1</td>
<td>2020</td>
</tr>
<tr><td>詩(shī)書畫唱2</td>
<td>2021</td>
</tr></table>;
這里不寫<table>標(biāo)簽是會(huì)報(bào)錯(cuò)的。同時(shí)組件的首字母必須大寫：
function ZuJianName1(){
return (<form>
用戶名:<input type="text" placeholder="請(qǐng)輸入用戶名" />
密碼:<input type="password" placeholder="請(qǐng)輸入用戶密碼"? />
<input type="submit" value="登錄" />
</form>);}
不然調(diào)用組件的時(shí)候也會(huì)報(bào)錯(cuò)。
目前在VScode中使用reactjs項(xiàng)目時(shí)，啟動(dòng)方法是在終端中輸入npm start的cmd命令后按回車鍵，默認(rèn)跳轉(zhuǎn)到public文件夾中的index.html，是單頁(yè)面模式的開發(fā)，有時(shí)幾乎不用寫很多的html文件。HBuilder的是混合模式的開發(fā)。后面如果想指定界面跳轉(zhuǎn)的話可能要使用express，路由......。
而組件的話是寫在自己創(chuàng)建的comp文件夾中的（當(dāng)然，文件夾的名字自自定義，記得項(xiàng)目目錄下的index.js中的路徑寫對(duì)就行。
http://127.0.0.1:3000/是默認(rèn)的VScode的reactjs項(xiàng)目的npm start 的cmd命令啟動(dòng)后的訪問路徑。
講義
NODEJS：后臺(tái)程序
前端JS：REACTJS，VUEJS
微信小程序
創(chuàng)建項(xiàng)目：
1、Hbuilder中創(chuàng)建項(xiàng)目
2、VSCODE中創(chuàng)建項(xiàng)目（單頁(yè)面開發(fā)）
定義組件（自定義標(biāo)簽）
視頻學(xué)習(xí)記錄
REACTJS的安裝包，可在官方網(wǎng)站下載。
運(yùn)行REACTJS的js文件清單如下：
? ?react.js：REACTJS核心庫(kù)（下載地址：https://unpkg.com/react@16/umd/react.development.js）
? ?react-dom.js：提供與 DOM 相關(guān)的功能（下載地址：https://unpkg.com/react-dom@16/umd/react-dom.development.js）
? ?browser.js：將JSX語(yǔ)法轉(zhuǎn)為JavaScript語(yǔ)法，這一步很消耗時(shí)間，應(yīng)該將它放到服務(wù)器完成，也就是在服務(wù)器端轉(zhuǎn)換成js腳本以后引入。（下載地址：https://unpkg.com/babel-standalone@6.15.0/babel.min.js）
一個(gè)簡(jiǎn)單的reactjs的項(xiàng)目搭建：網(wǎng)頁(yè)上打印出“Hello,world"（每學(xué)個(gè)內(nèi)容其實(shí)都要先會(huì)搭建環(huán)境和會(huì)創(chuàng)建出打印出“Hello,world"等的基礎(chǔ)功能） START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 腳本引入的順序不能改變 -->
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<!-- 做JSX語(yǔ)法轉(zhuǎn)換的腳本 -->
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//ReactDOM是Reactjs框架的核心對(duì)象
//html代碼不需要使用引號(hào)引起來
ReactDOM.render(<h1>Hello,world</h1>,
document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
一個(gè)簡(jiǎn)單的reactjs的項(xiàng)目搭建：網(wǎng)頁(yè)上打印出“Hello,world"（每學(xué)個(gè)內(nèi)容其實(shí)都要先會(huì)搭建環(huán)境和會(huì)創(chuàng)建出打印出“Hello,world"等的基礎(chǔ)功能）?END
用Nodejs在VScode中創(chuàng)建一個(gè)簡(jiǎn)單的REACTJS應(yīng)用（含個(gè)人嘗試）START
在終端執(zhí)行npx?create-react-app?myapp的cmd命令
【個(gè)人對(duì)這個(gè)cmd命令的理解創(chuàng)建名為myapp的reactjs項(xiàng)目
npx?create-react-app 項(xiàng)目名】
在終端中輸入npm start
終端輸入npm start后自動(dòng)跳轉(zhuǎn)到其運(yùn)行結(jié)果的界面：
用Nodejs在VScode中創(chuàng)建一個(gè)簡(jiǎn)單的REACTJS應(yīng)用? END
用HBuilder了解渲染，添加元素到div中，刷新元素，計(jì)數(shù)器?START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//定義一個(gè)元素
let e1 = <h1>Hello Kitty</h1>;
let e2 = <input type="button" value="點(diǎn)擊" />;
let e3 = <ul>
? ? ? ? ? ? ?<li>語(yǔ)文</li>
? ? ? ? ? ? ?<li>數(shù)學(xué)</li>
? ? ? ? ? ? ?<li>英語(yǔ)</li>
? ? ? ? ?</ul>;
//定義的元素的最外層必須只有一個(gè)根元素
let e4 = <div><input type="text" name="act"/>
? ? ? ? ?<button>點(diǎn)擊</button></div>;
let e5 = <tbody><tr></tr><tr></tr><tr></tr></tbody>;
ReactDOM.render(e1,
document.getElementById('title'));
? ? ReactDOM.render(e2,
? ? document.getElementById('click'));
? ? ReactDOM.render(e3,
? ? document.getElementById('subject'));
</script>
</head>
<body>
<div id="title"></div>
<div id="click"></div>
<div id="subject"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
function add(){
const ele = (<div>
? ? ? ? ? ? ?<h1>計(jì)數(shù)器演示</h1>
? ? ? ? ? ? ?<h2>{num ++}</h2>
? ? ? ? ? ? ?</div>);
ReactDOM.render(ele
,document.getElementById('exp'));
}
let num = 0;
setInterval(add,1000);
</script>
</head>
<body>
<div id="exp"></div>
</body>
</html>
用HBuilder了解渲染，添加元素到div中，刷新元素，計(jì)數(shù)器 END
HBuilder中用ES6語(yǔ)法（建議常常用ES6語(yǔ)法）定義組件（組件就是計(jì)數(shù)器之類的東西） START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/react.js" ></script>
<script type="text/javascript" srcc="js/react-dom.js" ></script>
<script type="text/javascript" srcc="js/browser.js" ></script>
<script type="text/babel">
//定義組件方法一：
//組件的首字母必須大寫
// function Counter(){
// return (<div>
// ? ? ? ? ? ? ? ? <h1>計(jì)數(shù)器演示</h1>
// ? ? ? ? ? ? ? ? <h2>{num ++}</h2>
// ? ? ? ? ? ? ? ? </div>);
// }
//定義組件方法二：
class Counter extends React.Component {
render(){
return (<div>
? ? ? ? ? ? <h1>計(jì)數(shù)器演示</h1>
? ? ? ? ? ? <h2>{num ++}</h2>
? ? ? ? ? ? </div>);
}
}
function add(){
ReactDOM.render(<Counter />,
? ? document.getElementById('app'));
}
let num = 0;
setInterval(add,1000);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
HBuilder中用ES6語(yǔ)法（建議常常用ES6語(yǔ)法）定義組件（組件就是計(jì)數(shù)器之類的東西） END
VScode中創(chuàng)建自定義名稱的組件的方法 START
import?React?from?'react';
import?ReactDOM?from?'react-dom';
import?'./index.css';
import?App?from?'./App';
//導(dǎo)入Hello組件
import?Hello?from?'./comp/Hello';
import?reportWebVitals?from?'./reportWebVitals';
ReactDOM.render(
??<Hello?/>,
??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();
//src/comp/Hello.js
//引入react.js文件
import?React?from?"react";
//方法一：
//?function?Hello(){
//?????return?(<h1>Hello?world</h1>);
//?}
//方法二：
class?Hello?extends?React.Component{
????render(){
????????return?(<h1>我的第一個(gè)組件</h1>);?
????}
}
export?default?Hello;
<!DOCTYPE?html>
<html?lang="en">
??<head>
????<meta?charset="utf-8"?/>
????<link?rel="icon"?href="%PUBLIC_URL%/favicon.ico"?/>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1"?/>
????<meta?name="theme-color"?content="#000000"?/>
????<meta
??????name="description"
??????content="Web?site?created?using?create-react-app"
????/>
????<link?rel="apple-touch-icon"?href="%PUBLIC_URL%/logo192.png"?/>
????<!--
??????manifest.json?provides?metadata?used?when?your?web?app?is?installed?on?a
??????user's?mobile?device?or?desktop.?See?https://developers.google.com/web/fundamentals/web-app-manifest/
????-->
????<link?rel="manifest"?href="%PUBLIC_URL%/manifest.json"?/>
????<!--
??????Notice?the?use?of?%PUBLIC_URL%?in?the?tags?above.
??????It?will?be?replaced?with?the?URL?of?the?`public`?folder?during?the?build.
??????Only?files?inside?the?`public`?folder?can?be?referenced?from?the?HTML.
??????Unlike?"/favicon.ico"?or?"favicon.ico",?"%PUBLIC_URL%/favicon.ico"?will
??????work?correctly?both?with?client-side?routing?and?a?non-root?public?URL.
??????Learn?how?to?configure?a?non-root?public?URL?by?running?`npm?run?build`.
????-->
????<title>React?App</title>
??</head>
??<body>
????<noscript>You?need?to?enable?JavaScript?to?run?this?app.</noscript>
????<div?id="root"></div>
????<!--
??????This?HTML?file?is?a?template.
??????If?you?open?it?directly?in?the?browser,?you?will?see?an?empty?page.
??????You?can?add?webfonts,?meta?tags,?or?analytics?to?this?file.
??????The?build?step?will?place?the?bundled?scripts?into?the?<body>?tag.
??????To?begin?the?development,?run?`npm?start`?or?`yarn?start`.
??????To?create?a?production?bundle,?use?`npm?run?build`?or?`yarn?build`.
????-->
??</body>
</html>
VScode中創(chuàng)建自定義名稱的組件的方法? END
