关于前端:React-系列一Hello-React

40次阅读

共计 2045 个字符,预计需要花费 6 分钟才能阅读完成。

“ 小和山的菜鸟们 ”,为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验,请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习,及时获取最新文章。

前言

这节咱们将教你如何导入 React 并率领你编写出一个简略的 React 页面。

本文会向你介绍以下内容:

  • React 引入办法
  • 实现 Hello React Demo

React 引入办法

React 开发必须依赖三个库,别离是:

  • react:蕴含 react 外围代码
  • react-dom:帮忙 react 在各平台渲染的外围代码
  • babel:将 JSX 转换为 React 代码的工具

React 的这三个依赖有以下几种办法进行引入:

  • 应用 CDN 引入,间接应用 script 标签引入近程的 React 外围代码库
  • 下载 React 外围代码库,应用本地导入
  • 应用脚手架工具,应用包管理工具进行我的项目搭建

React 从一开始就被设计为逐渐采纳,并且 你能够依据须要选择性地应用 React。对于初学者,咱们不倡议你间接应用 React 脚手架创立我的项目,所以在这篇教程的前几章,咱们将应用 CDN 引入的形式,缩小你对简单操作的纳闷,先学会 ReactJSX 语法。

实现 Hello React Demo

Demo 性能介绍:界面中有一个按钮和一个文本框,当你第一次点击按钮,文本框会从 hello React 变成 hello xhs-rookies

第一步:创立一个容器放入 HTML

<div id="app"></div>

第二步:导入 React 依赖

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

第三步:编写须要实现的组件

这一步将应用到前面须要学习的 JSX 语法和组件写法,临时你不须要了解这些代码的含意,咱们将很快带你学习。

<script type="text/babel">
  class App extends React.Component {constructor() {super();
      this.state = {message: 'hello React'}
    }

    render() {
      return (
          <div>
            <p>{this.state.message}</p>
            <button onClick={() => this.setState({message: 'hello xhs-rookies'})}> 点我一下 </button>
          </div>
      )
    }
  }
</script>

此处的 script 标签肯定要定义 type 为 ”text/babel“,这样 babel 将会解析咱们所写的 JSX 代码。

第四步:将所写的组件挂载到容器上

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

综上,你的代码将变成这样

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

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

    <script type="text/babel">
      class App extends React.Component {constructor() {super()
          this.state = {message: 'hello React',}
        }

        render() {
          return (
            <div>
              <p>{this.state.message}</p>
              <button onClick={() => this.setState({ message: 'hello xhs-rookies'})}>
                点我一下
              </button>
            </div>
          )
        }
      }

      ReactDOM.render(<App />, document.getElementById('app'))
    </script>
  </body>
</html>

接下来让咱们来看看成果:

这是点击前的页面

这是点击后的页面

祝贺你曾经实现了一个简略的 React demo 了。

正文完
 0