React 入门笔记 1

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35713752/article/details/82622421

简单的JSX示例： 

代码运行练习地址：https://codepen.io/anon/pen/oPEMrG?&editors=0010#anon-login

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);