【前端知识】React基础巩固(五)——基础案例

React基础巩固(五)——基础案例

基础案例一:电影列表

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电影列表title>
  head>
  <body>
    <div id="root">div>

    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    >script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    >script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>

    <script type="text/babel">
      // 1.创建root
      const root = ReactDOM.createRoot(document.querySelector("#root"));

      // 2.封装App组件
      class App extends React.Component {
        // 组件数据
        constructor() {
          super();

          this.state = {
            movies: [
              "星际穿越",
              "流浪地球",
              "独行月球",
              "大话西游",
              "火星救援",
            ],
          };
        }

        // 渲染内容
        render() {
          // 1.对movies进行for循环
          //   const liEls = [];
          //   for (let i = 0; i < this.state.movies.length; i++) {
          //     const movie = this.state.movies[i];
          //     const liEl = 
  • {movie}
  • ;
    // liEls.push(liEl); // } // 2.movies数组 => liEls数组 // const liEls = this.state.movies.map((movie) => { // return
  • {movie}
  • ;
    // }); // 3.直接map return ( <div> <h2>电影列表</h2> <ul> {this.state.movies.map((movie) => ( <li>{movie}</li> ))} </ul> </div> ); } } // 3.渲染组件 root.render(<App />);
    script> body> html>

    基础案例二:计数器

    DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>计数器title>
      head>
      <body>
        <div id="root">div>
    
        <script
          crossorigin
          src="https://unpkg.com/react@18/umd/react.development.js"
        >script>
        <script
          crossorigin
          src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
        >script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
    
        <script type="text/babel">
          // 1.创建root
          const root = ReactDOM.createRoot(document.querySelector("#root"));
    
          // 2.封装App组件
          class App extends React.Component {
            // 组件数据
            constructor() {
              super();
    
              this.state = {
                counter: 100,
              };
    
              this.increment = this.increment.bind(this);
              this.decrement = this.decrement.bind(this);
            }
    
            // 组件方法(实例方法)
            // 加1
            increment() {
              this.setState({
                counter: this.state.counter + 1,
              });
            }
    
            // 减1
            decrement() {
              this.setState({
                counter: this.state.counter - 1,
              });
            }
    
            // 渲染内容
            render() {
              const { counter } = this.state;
    
              return (
                <div>
                  <h2>当前计数:{counter}</h2>
                  <button onClick={this.decrement}>-1</button>
                  <button onClick={this.increment}>+1</button>
                </div>
              );
            }
          }
    
          // 3.渲染组件
          root.render(<App />);
        script>
      body>
    html>
    
    

    你可能感兴趣的:(前端知识,React,前端,react.js,javascript)