React 系列一:Hello React

快来加入我们吧!

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

"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!

前言

这节我们将教你如何导入 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

第二步:导入 React 依赖



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

这一步将使用到后面需要学习的 JSX 语法和组件写法,暂时你不需要理解这些代码的含义,我们将很快带你学习。

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

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

ReactDOM.render(, document.getElementById('app'))

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



  
    
    Title
  
  
    

接下来让我们来看看效果:

这是点击前的页面

React 系列一:Hello React_第1张图片

这是点击后的页面

React 系列一:Hello React_第2张图片

恭喜你已经完成了一个简单的 React demo 了。

你可能感兴趣的:(React 系列一:Hello React)