一文梳理React的核心概念

文章目錄

一文梳理React的核心概念
前言
一、React的安裝和配置
二、專案實戰——體育用品倉庫系統
- 1.設計UI
- 2.用React創建一個靜態版本
- 3.加入動態元素
- 4.添加反向資料流
三、總結

前言

React 是一個用于構建用戶界面的 JavaScript 庫

一、React的安裝和配置

1.點擊進入網站安裝Node.js（為了運行 create-react-app）
安裝Node.js
2.在終端打開Node.js的根目錄并且運行

 npx create-react-app moz-todo-react

這句命令創建了一個名為 moz-todo-react 的檔案夾，并在此檔案夾里做了如下作業：

為你的應用程式安裝了一些 npm 包；
寫入 react 應用啟動所需要的腳本檔案；
創建一系列結構化的子檔案夾和檔案，奠定應用程式的基礎架構；
如果你的電腦上安裝了 git 的話，順便幫你把 git 倉庫也建好，

3.處理完成之后，你可以 cd 到 moz-todo-react 檔案夾下，然后鍵入 npm start 命令并回車，先前由 create-react-app 創建的腳本會啟動一個地服務 localhost:3000，并打開你的默認瀏覽器來訪問這個服務，成功啟動瀏覽器的話，你的瀏覽器上會顯示如下畫面：

這樣，React就安裝好啦！

接下來，我會用一個專案來介紹 React的核心概念，在這個程序中可以對React的用法有更深的理解，不過前提是你必須有Web的基礎：HTML、CSS、JavaScript

二、專案實戰——體育用品倉庫系統

1.設計UI

React提供了組件化的設計方式，因此，我們需要將實作的功能進行組件化，將每部分看作是一個組件，并對這一系列的組件進行設計和層次分級，
我們將要實作下圖這樣一個體育用品倉庫系統
在這里插入圖片描述
將各個組件進行標示：
FilterableProductTable (橙色): 是整個示例應用的整體
SearchBar (藍色): 接受所有的用戶輸入
ProductTable (綠色): 展示資料內容并根據用戶輸入篩選結果
ProductCategoryRow (天藍色): 為每一個產品類別展示標題
ProductRow (紅色): 每一行展示一個產品

根據功能進行層級劃分：

FilterableProductTable
- SearchBar
- ProductTable
  - ProductCategoryRow
  - ProductRow

2.用React創建一個靜態版本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sporting Goods</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
    /* th{
        font-size: 50px;
    } */
</style>
<body>
    <div id='root'></div>
    <script type='text/babel'>
    class ProductRow extends React.Component{
         render(){
             const product = this.props.product;
             const name = product.stocked?product.name:<span style={{color:'red'}}>{product.name}</span>;
             return(
                    <tr>
                        <td>{name}</td>
                        <td>{product.price}</td>
                    </tr>
             );
         }
    }
    class ProductCategoryRow extends React.Component{
        render(){
            const category = this.props.category;
            return(
                <tr>
                <th>{category}</th>
                </tr>
            )
        }
    }
    class ProductTable extends React.Component{
        render(){
            const rows = [];
            let lastcategoty = null;
                this.props.products.forEach((product) => {
                    if(product.category !==lastcategoty)
                    {
                        rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
                    } 
                    rows.push(<ProductRow product={product} key={product.name}/>);
                    lastcategoty = product.category;
                })
            return(
                <table>
                    <thead>
                    <tr>
                        <th >Name</th> <th>Price</th>
                    </tr>
                   </thead>
                   <tbody>{rows}</tbody>
                </table>
            )
        }
    }
    class SearchBar extends React.Component{
        render(){
           return(
               <form>
                <input type='text' placeholder = " Enter to search..."/>
                <p>
                    <input type='checkbox'/>
                    Only show products in stock
                </p>
                </form>
           )
        }
    }
    class FilterableProductTable extends React.Component{
        render(){
            return(
                <div>
                    <SearchBar/>
                    <ProductTable products={this.props.products}/>
                </div>
            );
        }
    }
  
    const PRODUCTS =[
    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
    {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
    {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
    {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
    ];
    ReactDOM.render(
        <FilterableProductTable products={PRODUCTS}/>,
        document.getElementById('root')
    );
    
    </script>
</body>
</html>

3.加入動態元素

這一步設計到的知識點比較多，同時也是React當中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sporting Goods</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
    /* th{
        font-size: 50px;
    } */
</style>
<body>
    <div id='root'></div>
    <script type='text/babel'>
    class ProductRow extends React.Component{
         render(){
             const product = this.props.product;
             const name = product.stocked?product.name:<span style={{color:'red'}}>{product.name}</span>;
             return(
                    <tr>
                        <td>{name}</td>
                        <td>{product.price}</td>
                    </tr>
             );
         }
    }
    class ProductCategoryRow extends React.Component{
        render(){
            const category = this.props.category;
            return(
                <tr>
                <th colSpan='2'>{category}</th>
                </tr>
            )
        }
    }
    class ProductTable extends React.Component{
        render(){
            const filtertext =  this.props.filtertext;
            const instockonly = this.props.instockonly;

            const rows = [];
            let lastcategoty = null;

                this.props.products.forEach((product) => {
                    if(product.name.indexOf(filtertext) === -1){
                        return;
                    }//如果找不到該filtertext就return
                    if(instockonly&&!product.stocked){
                        return;
                    }//勾選項instockonly 但是沒有stocked
                    if(product.category !==lastcategoty)
                    {
                        rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
                    } 
                    rows.push(<ProductRow product={product} key={product.name}/>);
                    lastcategoty = product.category;
                })
            return(
                <table>
                    <thead>
                    <tr>
                        <th >Name</th> <th>Price</th>
                    </tr>
                   </thead>
                   <tbody>{rows}</tbody>
                </table>
            )
        }
    }
    class SearchBar extends React.Component{
        render(){
            const filtertext = this.props.filtertext;
            const instockonly = this.props.instockonly;

           return(
               <form>
                <input 
                    type='text'
                    placeholder = " Enter to search..."
                    value={filtertext}
                />
                <p>
                    <input type='checkbox' checked={instockonly}/>
                    {' Only show products in stock '}
           
                </p>
                </form>
           )
        }
    }
    class FilterableProductTable extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                filtertext:'',
                instockonly:false
            };
        }
        render(){
            return(
                <div>
                    <SearchBar
                    filtertext={this.state.filtertext}
                    instockonly={this.state.instockonly}
                    />
                    <ProductTable 
                    products={this.props.products}
                    filtertext={this.state.filtertext}
                    instockonly={this.state.instockonly}
                    />
                </div>
            );
        }
    }
  
    const PRODUCTS =[
    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
    {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
    {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
    {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
    ];
    ReactDOM.render(
        <FilterableProductTable products={PRODUCTS}/>,
        document.getElementById('root')
    );
    
    </script>
</body>
</html>

4.添加反向資料流

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sporting Goods</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<style>
    /* th{
        font-size: 50px;
    } */
</style>
<body>
    <div id='root'></div>
    <script type='text/babel'>
    class ProductRow extends React.Component{
         render(){
             const product = this.props.product;
             const name = product.stocked?product.name:<span style={{color:'red'}}>{product.name}</span>;
             return(
                    <tr>
                        <td>{name}</td>
                        <td>{product.price}</td>
                    </tr>
             );
         }
    }
    class ProductCategoryRow extends React.Component{
        render(){
            const category = this.props.category;
            return(
                <tr>
                <th colSpan='2'>{category}</th>
                </tr>
            )
        }
    }
    class ProductTable extends React.Component{
        render(){
            const filtertext =  this.props.filtertext;
            const instockonly = this.props.instockonly;

            const rows = [];
            let lastcategoty = null;

                this.props.products.forEach((product) => {
                    if(product.name.indexOf(filtertext) === -1){
                        return;
                    }//如果找不到該filtertext就return
                    if(instockonly&&!product.stocked){
                        return;
                    }//勾選項instockonly 但是沒有stocked
                    if(product.category !==lastcategoty)
                    {
                        rows.push(<ProductCategoryRow category={product.category} key={product.category}/>);
                    } 
                    rows.push(<ProductRow product={product} key={product.name}/>);
                    lastcategoty = product.category;
                })
            return(
                <table>
                    <thead>
                    <tr>
                        <th >Name</th> <th>Price</th>
                    </tr>
                   </thead>
                   <tbody>{rows}</tbody>
                </table>
            )
        }
    }
    class SearchBar extends React.Component{
        constructor(props){
            super(props);
            this.handleFilterchange = this.handleFilterchange.bind(this);
            this.handleInstockchange = this.handleInstockchange.bind(this);
        }
        handleFilterchange(e){
            this.props.onFiltertextchange(e.target.value);
        }
        handleInstockchange(e){
            this.props.onInStockChange(e.target.checked);
        }
        render(){
            const filtertext = this.props.filtertext;
            const instockonly = this.props.instockonly;

           return(
               <form>
                <input 
                    type='text'
                    placeholder = " Enter to search..."
                    value={this.props.filtertext}
                    onChange={this.handleFilterchange}
                />
                <p>
                    <input type='checkbox' 
                    checked={this.props.instockonly}
                    onChange={this.handleInstockchange}
                    />
                    {' Only show products in stock '}
           
                </p>
                </form>
           )
        }
    }
    class FilterableProductTable extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                filtertext:'',
                instockonly:false
            };
            this.handleFilterchange = this.handleFilterchange.bind(this);
            this.handleInstockchange = this.handleInstockchange.bind(this);
        }
        handleFilterchange(filtertext){
            this.setState(
                {filtertext:filtertext}
            );
        }
        handleInstockchange(instockonly){
            this.setState(
                {instockonly:instockonly}
            );
        }
        render(){
            return(
                <div>
                    <SearchBar
                    filtertext={this.state.filtertext}
                    instockonly={this.state.instockonly}
                    onFiltertextchange={this.handleFilterchange}
                    onInStockChange={this.handleInstockchange}
                    />
                    <ProductTable 
                    products={this.props.products}
                    filtertext={this.state.filtertext}
                    instockonly={this.state.instockonly}
                    />
                </div>
            );
        }
    }
  
    const PRODUCTS =[
    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
    {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
    {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
    {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
    ];
    ReactDOM.render(
        <FilterableProductTable products={PRODUCTS}/>,
        document.getElementById('root')
    );
    
    </script>
</body>
</html>

三、總結

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295195.html

標籤：其他

上一篇：Jquery select2 資料回傳后，select2樣式沒有應用上去

下一篇：4.事件及影片

（更新中）一文詳解React的核心概念（包括配置和安裝方法）——入門專案實戰