React

React的Hello World

//html文件
<div id="root"></div>
//js文件
ReactDOM.render(
  <h1>Hello, world!</h1>
  document.getElementById('root')
);

也可以使用JSX语法实现

const name = 'world！';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX特定属性

• 使用引号，来将属性值指定为字符串字面量
  const element = <div tableIndex="0"></div>;
• 使用大括号，插入一个变量或表达式
  const element = <img src={user.avatarUrl}></img>
• 标签里没有内容，可以使用/>来闭合标签
• 通过将输入内容转义成字符串，有效防止XSS(跨站脚本)攻击
• Babel会把JSX转译为一个名为React.createElement()函数调用

const element = (<h1 className="greeting">Hello</h1>);
//等于
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello'
);

每秒调用ReactDOM.render()的定时器例子

function tick() {
  const element = (
    <div>
      <h1>Hello</h1>
      <h2>Now {new Date().toLocaleTimeString()}</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000)

组件

• 单一组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}
const element = <Welcome name="Sara"/>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

• 组合组件

//输出多行文字信息
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

类组件

每次组件更新时 render 方法都会被调用，但只要在相同的 DOM 节点中渲染 <Clock /> ，就仅有一个 Clock 组件的 class 实例被创建使用。这就使得我们可以使用如 state 或生命周期方法等很多其他特性

class Clock extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}</h2>
      </div>
    );
  }
}
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}
setInterval(tick, 1000);

使用State实现,内部变量

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

---

快速创建React App

npx create-react-app test
cd test
npm start

Tic Tac Toe (codepen.io)在线编码
nodjs下载地址
创建新的 React 应用 – React (docschina.org)