0
点赞
收藏
分享

微信扫一扫

React.js -- Getting Started

以沫的窝 2022-01-24 阅读 57

Contents:

  • What is react?
  • React element
  • React component
  • render()

Initialize React App

npx create-react-app my-app
cd my-app
npm start

App structure

  • manifest.json 指定了开始页面

  • index.html,一切都从这里开始,这个是代码执行的源头。

  • src/index.js 是一个入口文件

React.Component

class ShoppingList extends React.Component {
    render(){
        return(
            //...
        )
    }
}

React element

render()

  • A method that returns a description of what you want to see on the screen
    • The description is called a react element
    • React display the view using the react elements returned

将React元素render到DOM root

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

function封装react element

// function that return JSX.element
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

// function that renders element
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}

// repeatedly calling the rendering function -- 每秒钟调用一次
setInterval(tick, 1000);

Component封装element

React.component

class Clock extends React.Component {
    render(){
        return(
           ...
           <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
           ... 
        )
    }
}

function tick() {
...
}

setInterval(tick, 1000);
  • ShoppingList: React component class
  • Responsibility:
    • A component takes in parameters, called props 
    • Returns a hierarchy of views
    • Display via the render method
举报

相关推荐

0 条评论