本篇文章主要講述了一個react從零開始的做一個案例的詳細步驟，我們一起來看看文章的具體內容吧
接下來我們要透過一個簡單的案例，詳細的學習React的內容
#如上圖所示，兩個按鈕，點選加號按鈕，數字加一，點選減號按鈕，數字減一
##使用create-react-app
建立一個工程，將其中的程式碼結構刪減到最簡單的模式
index.js中的程式碼就很簡單了，只要引入App元件，執行渲染即可
import React from 'react';import ReactDOM from 'react-dom';import App from './components/App'ReactDOM.render(, document.getElementById('root'));
App .js中的內容才是我們要真正實現的邏輯,我們將使用ES6的方式創建一個React的元件，步驟如下
- 引入react
import React from 'react'登入後複製
2.建立元件，並讓元件繼承React.Component
,同時實作render函數class App extends React.Component{ render(){ return () } }
登入後複製
3.為元件指定預設輸出完整程式碼如下：export default App登入後複製
import React from 'react';class App extends React.Component{ render(){ return (
) } } export default App;
React.Component是react的一個抽象基類，單獨引用它毫無意義，我們通常用其來實現子類，實現子類的時候必須要實現其render函數
return()中只能有一個頂級的標籤元素
export default指定了目前元件輸出的預設模組
#1.加號按鈕其中按鈕和文字都非常簡單，但是數字需要滑鼠點擊進行改變的，假如我們沒有學習過任何的前端框架，我們就要使用document對象，取得頁面的內容，然後將其裝換為數字，再對數字進行規劃，然後將計算結果寫入頁面。而使用react來實現，我們需要知道，react的核心目標2.減號按鈕
3.簡單文字
4.滑鼠點擊按鈕變化的數字
組件化，組件中可變換的內容稱之為狀態（想看更多就到PHP中文網React參考手冊欄位中學習）
元件中的資料來源有兩種，內部宣告和#外部傳入，分別用state和prop進行區別和表示，在es6元件中，可以透過constructor建構函式中接收外部傳來的prop和宣告內部使用的狀態數據，在在本文的範例中，我們需要用到一個在滑鼠點擊後不斷變化的數字
constructor(props){ super(props); this.state = { count:0 }}
render(){ return ( 当前点击次数 {this.state.count}
) }
- 整個內容增加上邊距和左邊距
- 按鈕、文字、數字相互之間有一定的間距
- 引入外部樣式檔案
新建
style/App.css
.box{ margin-left: 50px; margin-top: 50px;}.box *{ margin:auto 5px;}
import '../style/App.css'
render(){ return ( 当前点击次数 {this.state.count}
) }
render(){ const style={ marginLeft:'50px', marginTop:'50px' } const item = { margin:'auto 5px' } return ( 当前点击次数 {this.state.count}
) }
使用物件宣告樣式時，要使用camelCase
，也就是#駝峰式命名法
render(){ return ( 当前点击次数 {this.state.count}
) }
React表達式，內層的大括號是JavaScript物件上述三種css的書寫方式的效果是一樣的，在後續的範例中，為了讓程式碼簡單直觀，採用引入外部css檔案的方式
接下来为两个按钮增加点击事件，react中的点击事件为onClick，它与html中的onclick有一些区别，在这里不进行详细描述。我们为加号按钮增加事件处理函数increment，为减号增加事件处理函数decrement。在increment,让state中的count的值加1,在decrement中，让state中count的值减1
注意点：
事件函数绑定this
修改state的方式
import React from 'react'; import '../style/App.css'class App extends React.Component{ constructor(props){ super(props); this.state = { count:0 } this.increment = this.increment.bind(this); this.decrement = this.decrement.bind(this); } increment(){ this.setState({count:this.state.count+1}) } decrement(){ this.setState({count:this.state.count-1}) } render(){ return (当前点击次数{this.state.count}
) } } export default App;
修改state中的数据，要调用setState函数来进行设置
定义普通的的函数来处理事件，需要在构造函数中与this进行绑定，否则在函数内部，this为undefined
此时我们在页面点击按钮，就能看到效果了
在上面的代码中，我们可以看到，事件处理函数要在构造函数中调用bind函数来绑定this，在这里我们只有两个函数，在复杂引用中可能有更多的函数，要是每一个函数都要这么绑定一次，对于有强迫症或者洁癖的开发人员来说是一件非常闹心且痛苦的事情。因此我们要使用更加简洁的方式
请看代码
import React from 'react'; import '../style/App.css'class App extends React.Component{ constructor(props){ super(props); this.state = { count:0 } } increment = () => { this.setState({count:this.state.count+1}) } decrement = () => { this.setState({count:this.state.count-1}) } render(){ return (当前点击次数{this.state.count}
) } } export default App;
点击按钮效果完全一样，整个世界都干净了！
在前面我们说到，props是用来从外部传递数据的，那么它是如何传递的呢？
在index.js中我们为App标签添加属性name
ReactDOM.render(, document.getElementById('root'));
然后修改App.js中的render函数
render(){ return ( {this.props.name} {this.state.count}
) }
运行效果与之前是一样的！
到这里呢，这个简单而又覆盖到react的大部分内容的范例就说完了！上手试试，其实很简单的！
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
以上是React如何操作？ react從零開始的製作一個案例的整個過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
