专业编程基础技术教程

网站首页 > 基础教程 正文

React 教程安装—JSX—组件=集成所有教程—facebook跨平台框架

ccvgpt 2024-10-11 11:35:39 基础教程 11 ℃

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 教程安装—JSX—组件=集成所有教程—facebook跨平台框架

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React 特点

  • 1.声明式设计 ?React采用声明范式，可以轻松描述应用。

  • 2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。

  • 3.灵活 ?React可以与已知的库或框架很好地配合。

  • 4.JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

  • 5.组件 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

  • 6.单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

阅读本教程前，您需要了解的知识：

在开始学习 React 之前，您需要具备以下基础知识：

  • HTML5

  • CSS

  • JavaScript

React 第一个实例

在每个章节中，您可以在线编辑实例，然后点击按钮查看结果。

本教程使用了 React 的版本为 15.4.2，你可以在官网 http://facebook.github.io/react/ 下载最新版。

React 实例

<divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );</script>

React 安装

React 可以直接下载使用，下载包中也提供了很多学习的实例。

本教程使用了 React 的版本为 15.4.2，你可以在官网 http://facebook.github.io/react/ 下载最新版。

你也可以直接使用 BootCDN 的 React CDN 库，地址如下：

<scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

使用实例

以下实例输出了 Hello, world!

React 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>Hello React!</title><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body><divid="example"></div><scripttype="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script></body></html>

实例解析：

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

  • react.min.js - React 的核心库

  • react-dom.min.js - 提供与 DOM 相关的功能

  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

以上代码将一个 h1 标题，插入 id="example" 节点中。

注意：

如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

通过 npm 使用 React

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。

我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

Bash
$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

Bash
$ cnpm install [name]

更多信息可以查阅：http://npm.taobao.org/。

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

Bash
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/$ npm start

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

项目的目录结构如下：

my-app/

Bash
 README.md
 node_modules/
 package.json .gitignore public/
 favicon.ico
 index.html
 src/
 App.css App.js App.test.js
 index.css
 index.js
 logo.svg

尝试修改 src/App.js 文件代码：

src/App.js

importReact, {Component}from'react';importlogofrom'./logo.svg';import'./App.css'; classAppextendsComponent{render(){return( <divclassName="App"> <divclassName="App-header"> <imgsrc={logo}className="App-logo"alt="logo" /> <h2>欢迎来到菜鸟教程</h2> </div> <pclassName="App-intro"> 你可以在 <code>src/App.js</code> 文件中修改。 </p> </div> ); }}exportdefaultApp;

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：

React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

  • JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

  • 它是类型安全的，在编译过程中就能发现错误。

  • 使用 JSX 编写模板更加简单快速。

使用 JSX

JSX 看起来类似 HTML ，我们可以看下实例:

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

React 实例

ReactDOM.render( <div> <h1>菜鸟教程</h1> <h2>欢迎学习 React</h2> <pdata-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p> </div> , document.getElementById('example'));

独立文件

你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

然后在 HTML 文件中引入该 JS 文件：

React 实例

<body><divid="example"></div><scripttype="text/babel"src="helloworld_react.js"></script></body>

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

React 实例

ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example'));

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

React 实例

ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example'));

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

React 实例

varmyStyle = {fontSize: 100, color: '#FF0000'};ReactDOM.render( <h1style = {myStyle}>H5混合开发</h1>, document.getElementById('example'));

注释

注释需要写在花括号中，实例如下：

React 实例

ReactDOM.render( <div> <h1>菜鸟教程</h1> {/*注释...*/} </div>, document.getElementById('example'));

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

React 实例

vararr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术，更是梦想！</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));

HTML 标签 vs. React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

varmyDivElement = <divclassName="foo" />;ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

varMyComponent = React.createClass({/*...*/});varmyElement = <MyComponentsomeProperty={true} />;ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

注意:由于 JSX 就是 JavaScript，一些标识符像 class和 for不建议作为 XML 属性名。作为替代，React DOM 使用 className和 htmlFor 来做对应的属性。

React 组件

本章节我们将讨论如何使用组件使得我们的应用更容易来管理。

接下来我们封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：

React 实例

varHelloMessage = React.createClass({render: function(){return <h1>HelloWorld！</h1>; }}); ReactDOM.render( <HelloMessage />, document.getElementById('example'));

实例解析：

React.createClass 方法用于生成一个组件类 HelloMessage。

<HelloMessage /> 实例组件类并输出信息。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：

React 实例

varHelloMessage = React.createClass({render: function(){return <h1>Hello{this.props.name}</h1>; }}); ReactDOM.render( <HelloMessagename="Runoob" />, document.getElementById('example'));

以上实例中 name 属性通过 this.props.name 来获取。

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

复合组件

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件：

React 实例

varWebSite = React.createClass({render: function(){return( <div> <Namename={this.props.name} /> <Linksite={this.props.site} /> </div> ); }}); varName = React.createClass({render: function(){return( <h1>{this.props.name}</h1> ); }}); varLink = React.createClass({render: function(){return( <ahref={this.props.site}> {this.props.site} </a> ); }}); ReactDOM.render( <WebSitename="菜鸟教程"site=" http://www.runoob.com" />, document.getElementById('example'));

实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，也就是说 WebSite 拥有 Name 和 Link 的实例。

Tags：

猜你喜欢

最近发表
标签列表