搜尋
首頁web前端html教學开始使用React和JSX_html/css_WEB-ITnose

React是一个用来创建用户界面的一个开源库。它可以让你轻松的创建与底层数据模块保持一致的UI。这篇文章主要针对初学者,包括了React的基本知识和JSX语法。

开始使用React

或许,开始使用React最简单的方法就是从CDN中引入一个库(文中的例子是这样做的)。或者你可以使用 npm 来安装 或者从官方网站 下载React 运行所需要的文件。

首先项目创建一个目录,目录中包含一个 index.html 的文件:

mkdir react-test && cd react-testtouch index.html

使用你顺手的编辑器打开 index.html 文件,并添加下面的示例代码:

<!DOCTYPE html><html lang="en">  <head>    <title>My First React Example</title>  </head>  <body>    <div id="greeting-div"></div>    <script src="https://fb.me/react-15.0.0.js"></script>    <script src="https://fb.me/react-dom-15.0.0.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>    <script type="text/babel">      var Greeting = React.createClass({        render: function() {          return (            <p>Hello, Universe</p>          )        }      });      ReactDOM.render(        <Greeting/>,        document.getElementById('greeting-div')      );    </script>  </body></html>

我们看看上面的代码做了些什么:

  • React遵循面向组件开发。总的想法就是让整个UI当作一个组件。在这个示例中,把这个组件命名为 Greeting 。在React中,通过 React.createClass() 创建这个组件。每个组件都有一个 render() 方法,用来渲染结构。在上面这个示例中,只返回了

    Hello Universe

    ,然后在视图(view)中显示。
  • 一个组件直到它渲染前是不做任何事情。通过 ReactDOM.render() 来渲染一个组件,这个函数有两个参数,第一个参数是组件名(比如示例中的 Greeting );第二个参数就是你想组件放到HTML中哪个元素中(比如示例中,将组件放在了一个 ID 名为 greeting-div 的 div 元素内)。
  • 你可能想知道 到底是什么?这种语法称为 JSX (JavaScript XML),允许你构建类似于HTML语法的DOM节点。JSX完全是可选的,你不需要为了使用React而使用它,不过它有很多很好的功能,你也没有理由不去利用它。
  • 因为浏览器本身是不懂JSX的,所以我们首要做的是通过JavaScript来编译它。在文件开头引入一个 browser.js 文件。Babel会通过 在浏览器中识得JSX,并将其转换成JavaScript。在整个开发过程中,JSX在浏览器中工作得很好。然而,你将JS部署到生产环境之前,需要先预编译JSX,这样你的应用会渲染得更快。稍后会介绍如何做到。

现在浏览器打开 index.html ,你可以在屏幕中看到“Hello Univers”这段文本。(是不是有点小激动)。

引入属性

React依赖于单向数据流。这意味着数据流发生只在一个方向,比如通过下个属性从父元素传给子元素。在JSX中这些属性是通过属性传递给子组件。在组件内部可以通过组件的 props 属性来访问组件的属性。属性改变时,确保呈现的UI是最新的数据模型。我们修改前面的代码,让文本每两秒随机显示。

var Greeting = React.createClass({  render: function() {    return (      <p>{this.props.message}</p>    );  }});setInterval(function() {  var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe'];  var randomMessage = messages[Math.floor((Math.random() * 3))];  ReactDOM.render(    <Greeting message={randomMessage}/>,    document.getElementById('greeting-div')  );}, 2000);

上面的代码每两秒从数组中选择一个随机的消息渲染到组件 Greeting 中。选择传递消息的这个属性称为 message 。需要用一对大括号 {} 来调用变量。现在在访问 Greeting 组件时通过 this.props.message 访问传递的值。

运行上面的代码,它将每两秒显示一个随机消息。

注意,已经被传递的 props 是不可变的。你只是通过 props 访问组件的属性。在组件内部,从来都不写 this.props 。这样保证数据是单向流和让整个应用程序更容易理解数据变化,以及如何影响整应用程序。

引入状态和事件

在React中的每个组件如何有状态都可以封装和维护自己的状态。有状态的组件可以存储一个值,并且可以通过 props 将其传递给它的子组件。这样可以确保当一个组件的状态改变时, props 也相应的会改变。因此,子组件依赖于这些 props 自动重新渲染自己。

为了能更好的加强这个概念,我们来修改上面的示例代码。当你点击按钮后随机显示一个消息。这里将包含两个组件:

  • RandomMessage : 这是父组件,其状态是保持选择一个随机的信息
  • MessageView : 这是一个子组件,处理显示随机选择的信息

我们一起来看看每个组件的细节:

RandomMessage

var RandomMessage = React.createClass({  getInitialState: function() {    return { message: 'Hello, Universe' };  },  onClick: function() {    var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe'];    var randomMessage = messages[Math.floor((Math.random() * 3))];    this.setState({ message: randomMessage });  },  render: function() {    return (      <div>        <MessageView message={ this.state.message }/>        <p><input type="button" onClick={ this.onClick } value="Change Message"/></p>      </div>    );  }});

RandomMessage 组件的状态维护一个 message 属性。每个React组件都有一个 getInitialState 函数设置组件的初始状态。在上面的示例中, message 属性的初始值设置为"Hello, Universe"。

接下来,需要显示一个按钮,点击按钮时, message 的属性值会得到一个新的值,下面的是组件返回的HTML标签:

<div>  <MessageView message={ this.state.message }/>  <p><input type="button" onClick={ this.onClick } value="Change Message"/></p></div>

正如你看到的,该组件渲染的是 MessageView 和一个 input 按钮。要注意的是,在JSX语法中,组件 message 属性的状态是通过子组件的 attribute 来传递。组件还给按钮添加了一个单击事件的监听器 this.onClick 。注要,要写成驼峰形式。在HTML中事件名称是用小写,即 onclick ,但是在JSX中事件名称需要使用驼峰形式。

click 事件处理选择一个随机的消息和更新组件状态:

this.setState({ message:randomMessage });

setState 函数在React中主要是用来通知一个数据的变化。这种方法用来更新组件的当前状态,然后重新渲染。结果也需要通过 props 重新计算以及子组件也需要依赖 props 重新渲染自己。

MessageView

var MessageView = React.createClass({  render: function() {    return (      <p>{ this.props.message }</p>    );  }});

这个组件通过 message 属性传递给UI。你应该注意,这是一个无状态的组件和一个 RandomMessage 组件有状态的渲染。

现在我们已经创建好了所需的组件,是时候将 RandomMessage 组件渲染出来:

ReactDOM.render (    <RandomMessage />,    document.getElementById('greeting-div'));

就是这样!每次点击按钮,你会看到一个不同的消息。

保持独立的JSX

直到现在我们一直在HTML中写JSX脚本。为了保持你的APP结构清晰,应该让每个组件有一个自己的 .jsx 文件。这意味着我们可以把上面的代码放在一个 random-message.jsx 文件中,并且按下面的方式将其引入到HTML中:

<script type="text/babel" src="src/random-message.jsx"></script>

新的HTML结构如下:

      My First React Example        
<script type="text/babel" src="src/random-message.jsx"></script>

这样做意味着你现在需要一个服务器来查看页面。好在可以通过 npm 来安装一个 http-server :

npm install -g http-server

然后在你项目的根目录下运行下面的命令:

http-server

你的页面可以在 http://127.0.0.1:8080/ 访问。

预编译JSX

正如我们前面提到的,运用到生产之前最好先预编译JSX。可以使用 npm 来安装 babel-cli 。Babel(版本6)默认情况下不包含任何转换器(transforms),额外的包必须得通过安装。

npm init -ynpm install --save-dev babel-clinpm install --save-dev babel-preset-es2015 babel-preset-react

然后在根目录下创建一个 dist 目录:

mkdir dist

并且运行:

babel --presets es2015,react --watch src/ --out-dir dist

JSX文件将被编译,并且编译出来的同名JavaScript文件将放到 dist 目录中。编译后的JavaScript文件可以直接放到你的页面,这也意味着,页面不再需要加载 browser.js 。同时要是你的JSX做了任何修改,Babel会监控 src 目录下所有的JSX文件,然后编译后放到 dist 目录中。

注意:在我们的示例中实际上并没有使用ES2015的语法,但我们已经包括了ES2015 Preset。

Virtual DOM

React非常的快,那是因为使用了一个Virtual DOM的技术。在内存中表示一个DOM,但从来不会直接访问真正的DOM。组件的渲染函数会在任何给定的时间内很快的告诉DOM应该是一个什么样子。你已经看到组件渲染函数返回HTML元素,但并不产生真正的DOM。相反,它只是一个DOM的描述。

扩展阅读

本文简单的介绍了React和JSX。除了丰富的视图(View)技术,React还有许多其他的好处, 你可以在这里阅读到很多 。

如果你想了解React更多的信息,你可以 阅读这里的文章 ,这是一些很优秀的教程。如果你不想在React中使用JSX,你可以像这篇文章中介绍的内容一样,使用 Raw React 。如果你想继续学习一些先进的技术,你可以阅读前面我写的教程: 使用React和Flux创建一个Note Taking APP 。

感谢你的阅读,如果你有任何问题或建议,欢迎在下面的评论中留言。

本文根据 @Sandeep Panda 的《 Getting Started with React and JSX 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://www.sitepoint.com/getting-started-react-jsx/ 。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
什麼是自我關閉標籤?舉一個例子。什麼是自我關閉標籤?舉一個例子。Apr 27, 2025 am 12:04 AM

self-closingtagsinhtmlandxmlaretagsthatclosethem hexptneedneedingAseparateClosingTag,SightifyingmarkupStrupupStrupureAndenHancingCodingsigy.1)shemesessientInsentialInxmlforelementswithcontentsswithcontent content content content content content content content content contentcontent,確保wellwell-formedDocuments.2)Inhtmlible5,inhtmlibut forfix

超越HTML:網絡開發的基本技術超越HTML:網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站,僅靠HTML是不夠的,還需要以下技術:JavaScript賦予網頁動態和交互性,通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局,提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular,提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼?舉一些例子。HTML中的布爾屬性是什麼?舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性,不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為,如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性,高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值,正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔,合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具