前端面试宝典

React是基于组件进行开发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>createClass</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      //创建一个组件(类), 显示Hello world!
      //1.组件名字, 以大写字母开头
      //2.使用class 组件名 extends React.Component创建组件
      //3.组件必须实现render方法

      //创建组件
      class HelloWorld extends React.Component {
        //定义render方法, 当组件渲染时触发
        render() {
          return <h1>Hello world!</h1>;
        }
      }

      //使用组件
      //方式1: 双标签
      ReactDOM.render(
        <HelloWorld></HelloWorld>,
        document.getElementById("example")
      );

      //方式2: 单标签
      ReactDOM.render(<HelloWorld />, document.getElementById("example"));
    </script>
  </body>
</html>

props对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>props对象</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      //给组件赋属性值, 都会被记录在this.props的对象中,
      //对象的属性和组件的属性一一对应
      class HelloWho extends React.Component {
        render() {
          return <h1>Hello {this.props.name}!</h1>;
        }
      }

      ReactDOM.render(
        <HelloWho name="帅哥"></HelloWho>,
        document.getElementById("example")
      );
      /**
       * 练习:
       * 定义组件Link, 用于展示一个超链接,
       * 例如<a href="http://www.baidu.com">百度</a>, 其中链接地址和链接标题可以进行设置
       * 答案见03-component.html
       **/
    </script>
  </body>
</html>

组件案列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>demo</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      //练习: 定义组件Link, 用于展示一个超链接, 例如<a href="http://www.baidu.com">百度</a>, 其中链接地址和链接标题可以进行设置

      class Link extends React.Component {
        render() {
          return <a href={this.props.url}>{this.props.title}</a>;
        }
      }

      ReactDOM.render(
        <Link url="http://baidu.com" title="百度" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

组件样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>componentStyle</title>
    <style>
      .title {
        text-align: center;
        color: #cc52ff;
      }
    </style>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      //为组件添加样式
      //1.内联样式, 比如div
      //2.选择器样式, 比如h1
      //3.对象样式, 比如p

      //注: 对象样式或内联样式
      //1.样式的值为对象
      //2.对象的属性用驼峰法命名
      //3.如果值为12px, 可以省略单位px

      var pStyle = {
        backgroundColor: "green",
        fontSize: 20,
      };

      class Message extends React.Component {
        render() {
          return (
            <div
              style={{
                backgroundColor: "yellow",
                borderWidth: 3,
                borderColor: "black",
                borderStyle: "solid",
              }}
            >
              <h1 className="title">{this.props.title}</h1>
              <p style={pStyle}>{this.props.content}</p>
            </div>
          );
        }
      }

      ReactDOM.render(
        <Message
          title="干了这碗鸡汤"
          content="如果你得罪了老板，失去的只是一份工作；如果你得罪了客户，失去的不过是一份订单；是的，世上只有一个人可以得罪：你给她脸色看，你冲她发牢骚，你大声顶撞她，甚至当 着她的面摔碗，她都不会记恨你，原因很简单，因为她是你的母亲。"
        ></Message>,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

多组件组合

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>componentCompact</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      //多个组件组合成一个组件
      class ListTitle extends React.Component {
        render() {
          return <h1>{this.props.title}</h1>;
        }
      }

      class ListContent extends React.Component {
        render() {
          return <p>{this.props.content}</p>;
        }
      }

      class List extends React.Component {
        render() {
          return (
            <div>
              <ListTitle title={this.props.t} />
              <ListContent content={this.props.c} />
            </div>
          );
        }
      }

      ReactDOM.render(
        <List t="我真帅!" c="这是一个真理!" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

综合案列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .title {
        text-align: center;
        color: #cc52ff;
      }
    </style>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      //React是基于组件进行开发

      //创建一个组件(类), 显示Hello world!
      //1.组件名字, 以大写字母开头
      //2.使用class 组件名 extends React.Component创建组件
      //3.组件必须实现render方法
      class HelloWorld extends React.Component {
        //定义render方法, 当组件渲染时触发
        render() {
          return <h1>Hello world!</h1>;
        }
      }

      //使用组件
      //方式1: 双标签
      ReactDOM.render(
        <HelloWorld></HelloWorld>,
        document.getElementById("example")
      );

      //方式2: 单标签
      ReactDOM.render(<HelloWorld />, document.getElementById("example"));

      //给组件赋属性值, 都会被记录在this.props的对象中, 对象的属性和组件的属性一一对应
      class HelloWho extends React.Component {
        render() {
          return <h1>Hello {this.props.name}!</h1>;
        }
      }

      ReactDOM.render(
        <HelloWho name="帅哥"></HelloWho>,
        document.getElementById("example")
      );

      //练习: 定义组件Link, 用于展示一个超链接, 例如<a href="http://www.baidu.com">百度</a>, 其中链接地址和链接标题可以进行设置

      class Link extends React.Component {
        render() {
          return <a href={this.props.url}>{this.props.title}</a>;
        }
      }

      ReactDOM.render(
        <Link url="http://baidu.com" title="百度" />,
        document.getElementById("example")
      );

      //为组件添加样式
      //1.内联样式, 比如div
      //2.选择器样式, 比如h1
      //3.对象样式, 比如p

      //注: 对象样式或内联样式
      //1.样式的值为对象
      //2.对象的属性用驼峰法命名
      //3.如果值为12px, 可以省略单位px

      var pStyle = {
        backgroundColor: "green",
        fontSize: 20,
      };

      class Message extends React.Component {
        render() {
          return (
            <div
              style={{
                backgroundColor: "yellow",
                borderWidth: 5,
                borderColor: "black",
                borderStyle: "solid",
              }}
            >
              <h1 className="title">{this.props.title}</h1>
              <p style={pStyle}>{this.props.content}</p>
            </div>
          );
        }
      }

      ReactDOM.render(
        <Message
          title="干了这碗鸡汤"
          content="如果你得罪了老板，失去的只是一份工作；如果你得罪了客户，失去的不过是一份订单；是的，世上只有一个人可以得罪：你给她脸色看，你冲她发牢骚，你大声顶撞她，甚至当 着她的面摔碗，她都不会记恨你，原因很简单，因为她是你的母亲。"
        ></Message>,
        document.getElementById("example")
      );

      //多个组件组合成一个组件
      class ListTitle extends React.Component {
        render() {
          return <h1>{this.props.title}</h1>;
        }
      }

      class ListContent extends React.Component {
        render() {
          return <p>{this.props.content}</p>;
        }
      }

      class List extends React.Component {
        render() {
          return (
            <div>
              <ListTitle title={this.props.t} />
              <ListContent content={this.props.c} />
            </div>
          );
        }
      }

      ReactDOM.render(
        <List t="我真帅!" c="这是一个真理!" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>