一个简单的react界面例子,单网页的
编辑时间:2021-10-13 作者:金满斗 浏览量:1220 来源:原创

在这个网站https://chinese.freecodecamp.org/学着玩,发现还有一些不懂得。

搞个简单的完整例子吧。

哎。本来是想儿子学的,也不晓得我学这个有啥用,哈哈哈,有始有终吧。react应该也是编译在部署吧,不然这样相当于直接发布源码,有点亏哦。

说实话,uniapp就够用了,主要我不需要专业。

这个例子涵盖的知识点有事件绑定啊,props传输啊,style绑定啊之类吧。

就是玩。

说实话3个js拉下来,整个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">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>react简单完成例子</title>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
  const inputStyle = {width: 235, height:30, margin: 5};
class Presentational extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        input: '',
        messages: []
      }
      this.handleChange = this.handleChange.bind(this);
      this.submitMessage = this.submitMessage.bind(this);
      this.handleKeyPress = this.handleKeyPress.bind(this);
    }
    handleChange(event) {    
      this.setState({
        input: event.target.value
      });
    }
    submitMessage() {
      this.setState((state) => {
        const currentMessage = state.input;
        return (currentMessage!='') && {
          input: '',
          messages: state.messages.concat(currentMessage)
        };
      });
    }
    handleKeyPress(event) {
      if (event.keyCode === 13) {
        this.submitMessage();
      }
    }
     // 添加事件监听器
      componentDidMount() {
        document.addEventListener("keydown", this.handleKeyPress);
      }
      //移除
      componentWillUnmount() {
        document.removeEventListener("keydown", this.handleKeyPress);
      }
    render() {
      return (
        <div>
          <h2>react的简单完整例子</h2>
          <h3>这里记录输入:按钮提交或者回车均可</h3>
          <input
            value={this.state.input}
            onChange={this.handleChange} style={inputStyle}     /><br/>
          <button onClick={this.submitMessage}>提交</button>
          <ul>
            {this.state.messages.map( (message, idx) => {
                return (
                   <li key={idx}>{message}</li>
                )
              })
            }
          </ul>
        </div>
      );
    }
  };
  ReactDOM.render(
    React.createElement(Presentational),
    document.getElementById('root')
  );

</script>
   
</body>

</html>


这个只是做演示,当然真实的不会这样,看了下网站,有个jsx的自动监听编译环境。在src文件夹里写jsx,能自动监听并直接编译成js


将 JSX 添加到项目

将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上,添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js

在终端上跳转到你的项目文件夹,然后粘贴这两个命令:

  1. 步骤 1: 执行 npm init -y (如果失败,这是修复办法
  2. 步骤 2: 执行 npm install babel-cli@6 babel-preset-react-app@3
  3. 创建一个名为 src 的文件夹并执行这个终端命令:npx babel --watch src --out-dir . --presets react-app/prod


这样的话,上面的例子把那段jsx提取出来,放到src文件夹改名为1.js,会自动在本地生成一个1.js。刚才的例子可以改成这样。

<!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">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <title>react简单完成例子</title>
</head>
<body>
<div id="root"></div>
<script src="./1.js"></script>
   
</body>
</html>


来说两句吧