React 入門筆記
阿新 • • 發佈:2018-12-09
簡單的JSX示例:
1.建立一個常量,通過{常量}鑲入標籤;
const name='jacky';
const dom = <p>hello {name}</p>
ReactDOM.render{
name,
document.getElementById('root');
}
頁面會顯示: hello jacky
2.將函式通過 {函式} 鑲入標籤;
function: text(user){ retrun user.n + " " + user.l; } const user={ n:li, l:jing } const dom={ <p> hello, {text(user)} !</p> } React.render{ dom, document.getElementById('root'); }
3.if else
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>我不認識你,哈哈</h1>; } ReactDOM.render( getGreeting(user), document.getElementById('root') );
4.這兩個例子是相同的
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
5.將元素渲染到DOM
const dom =<p>hello</p>;
ReactDOM.render(dom,document.getElementById('root'));
6.時鐘示例
function clock(){
const dom = (<p>{new Date().toLocaleTimeString()}</p>);
ReactDOM.render(dom, document.getElementById('root'));
}
setInterval(clock, 1000);