学习React[一]
生活随笔
收集整理的這篇文章主要介紹了
学习React[一]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
前言
一、React是什么？
二、使用原生的方法實現來實現 點擊按鈕改變文本
三、使用React實現來實現 點擊按鈕改變文本
總結
??????
前言
React是Facebook在2011年開發的前端js庫，當時FB對市場上的mvc框架都不滿意，于是乎自己寫了一套，用來架構Instagram，直到2013年開源。React是基于組件，構建可復用的UI組件。
一、React是什么？
? ?React.js 簡單地理解為，React.js 將幫助我們將界面分成了各個獨立的小塊，每一個塊就是組件，這些組件之間可以組合、嵌套，就成了我們的頁面。
React.js 不是一個框架，它只是一個庫。它只提供 UI 層面的解決方案。在實際的項目當中，它并不能解決我們所有的問題，需要結合其它的庫，例如 Redux、React-router 等來協助提供完整的解決方法。
二、使用原生的方法實現來實現 點擊按鈕改變文本
<body>// 文本<h2 class="title"></h2>// 點擊按鈕 改變文本<button class="btn">改變文本</button><script>let message = "Hello World";// 通過getElementsByClassName 獲取title元素const titleEl = document.getElementsByClassName('title')[0];// innerHTML 來改變文本titleEl.innerHTML = message;// 通過getElementsByClassName 獲取button元素const btnEl = document.getElementsByClassName('btn')[0];// 添加點擊事件來改變 titlebtnEl.addEventListener('click', (e) => {message = "Hello React";titleEl.innerHTML = message;})</script></body>
三、使用React實現來實現 點擊按鈕改變文本
<!-- 添加React的依賴 --> <script src="../../react插件/react.development.js"></script> <script src="../../react插件/react-dom.development.js"></script> <script src="../../react插件/babel.min.js"></script><body><div id="app">app</div><script type="text/babel">// 使用React的類組件，需要有constructor() {super()}class App extends React.PureComponent {constructor() {super();// state是保存數據的this.state = {message: "Hello World"}}render() {return (<div>// {} 是jsx語法<h2>{this.state.message}</h2><button onClick={e => this.changeText()}>改變文本</button></div>)}changeText() {// setState()是為了修改state里面的數據this.setState({message: "Hello React"})}}// 把這個組件定義到我要的位置ReactDOM.render(<App/>, document.getElementById('app'));</script></body>總結
我們已經進入到React的學習了，ReactJs是基于組件化開發的，一個頁面可以通過多個小組件組合而成，復用性高。
總結
以上是生活随笔為你收集整理的学习React[一]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： silverlight解决字体=显示黑白
- 下一篇： 论文阅读-Learning Deep C