React-菜鳥學習筆記（一）
阿新 • • 發佈：2019-01-02
新公司的專案前端架構用的是react.js 之前孤陋寡聞並沒聽說過，想著後期開發和維護多少要會點前端的東西，就簡單研究一下。個人的學習習慣能寫程式碼的就不寫文字，必要的地方加兩行註釋，程式碼一行行敲下去，執行過有問題及時發現，存檔當作日後小問題備查的工具。感覺前端尤如玄學，標點啥的處處要留心，一個後臺的多少懂點吧。
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> /** function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>現在是 {new Date().toLocaleTimeString()}.</h2> </div> ) ReactDOM.render( element, document.getElementById('example') ) } setInterval(tick, 1000);*/ /*自定義方法標籤 < Clock date = {new Date()} />, date為其中一引數，可理解為屬性*/ /** function Clock(props){ return( <div> <h1>Hello, world!</h1> <h2>現在是 {props.date.toLocaleTimeString()} {props.name}.</h2> </div> ) } function tick() { ReactDOM.render( <Clock date={new Date()} name='slowcity' />, document.getElementById('example') ); } setInterval(tick, 1000); */ /*自定義類標籤 < Clock date = {new Date()} />, date為類物件*/ /** class Clock extends React.Component{ render(){ return( <div> <h1>hello world </h1> <h2>現在是{ this.props.date.toLocaleTimeString()}</h2> </div> ) } } function tick(){ ReactDOM.render( < Clock date = {new Date()} />, document.getElementById('example') ) } setInterval(tick,1000) */ /*當element有多個標籤時，多個標籤放在div標籤內部 React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設定內聯樣式. React 會在指定元素數字後自動新增 px 新增myStyle內聯樣式 */ var i = 3; var myStyle = { fontSize: 20, color: '#FF0000' }; const element = ( <div> {/*註釋需要寫在花括號中... react不支援ifelse 但支援三元運算*/} <h1>Hello, world! { i==2?'ture':'false'}</h1> <h1 style = {myStyle}>Hello, world! { i==2?1+1:4}</h1> <h1>Hello, world! { i==3?'ture':'false'}</h1> </div> ) ReactDOM.render( element, document.getElementById('example') ); </script> </body> </html>