Советы и рекомендации для сложной части React

Я нашел React чрезвычайно сложным, когда только начинал. Теперь, когда это было объяснено, становится совершенно понятным, почему кто-то захочет его использовать.

React был создан несколькими инженерами Facebook несколько лет назад. Это действительно полезно, потому что разделяет все движущиеся части внешнего интерфейса ванильного JavaScript и делает его более эффективным.

Итак, каковы сложные части? ПРИМЕЧАНИЕ. ЭТО ПРЕДНАЗНАЧЕНО ТОЛЬКО ДЛЯ НАЧИНАЮЩИХ ЛЮДЕЙ. Я НЕ БУДУ РАССКАЗЫВАТЬ ОСНОВЫ НАСТРОЙКИ, ТОЛЬКО НЕМНОГО О СОСТОЯНИИ, ПРОПСАХ И КОМПОНЕНТАХ.

Давайте вместе создадим простое приложение, которое пройдёт сложные части React. Моя падчерица Рамона и я прошли через то, что, по ее мнению, было самой сложной лабораторией для работы. Она учится в школе Флэтайрон. Мы вместе провели лабораторную работу под названием «Акции».

По сути, вы хотите, чтобы ваш App.js выглядел так:

import React, { Component } from ‘react’; 
import Header from ‘./components/Header’
import MainContainer from ‘./containers/MainContainer’ 
class App extends Component { 
   render() { 
      return ( 
         <div> 
            <Header/> 
            <MainContainer/> 
         </div> 
      ); 
     }
   } 

export default App;

Это показывает, что MainContainer находится в папке контейнера и является компонентом App.js.

Теперь, когда App.js говорит, что ему нужен MainContainer.js, давайте настроим его.

import React, { Component } from ‘react’;
import StockContainer from ‘./StockContainer’;
import PortfolioContainer from ‘./PortfolioContainer’;
import SearchBar from ‘../components/SearchBar’
class MainContainer extends Component {
   constructor(){
      super()
      this.state = {
         stocks: [],
         displayStocks: [],
         portfolioStocks: []
      }
   }
   componentDidMount(){
      fetch(“http://localhost:3000/stocks")
      .then(res => res.json())
      .then(data => { // check data
         this.setState({
            stocks: data,
            displayStocks: data
         })
      })
   }
   addPortfolio = (stock) => {
      this.setState({
         portfolioStocks: […this.state.portfolioStocks, stock]
      })
   }
   
   removeStock = (stock) => {
      this.setState({
         portfolioStocks: this.state.portfolioStocks.filter(s => s !== stock)
         })
   }
   filterStocks = (type) => {
      if(type !== “All”){
         this.setState({
            displayStocks: this.state.stocks.filter(stock => stock.type === type)
         })
      }else{
         this.setState({
            displayStocks: this.state.stocks
         })
      }
   }
   sortStocks = (sortBy) => {
      let arr = []
      switch(sortBy){
         case “Alphabetically”:
            arr = this.state.displayStocks.sort((a,b) => a.name > b.name ? 1 : -1)
            break;
         case “Price”:
            arr = this.state.displayStocks.sort((a,b) => a.price > b.price ? 1 : -1)
            break;
         default:
            console.log(“Wrong choice”)
      }
      this.setState({
         displayStocks: arr
      })
   }
render() {
   return (
      <div>
         <SearchBar filterStocks={this.filterStocks} sortStocks={this.sortStocks}/>
         <div className=”row”>
         <div className=”col-8">
         <StockContainer stocks={this.state.displayStocks} addPortfolio={this.addPortfolio}/>
      </div>
         <div className=”col-4">
            <PortfolioContainer stocks={this.state.portfolioStocks} removeStock={this.removeStock}/>
         </div>
      </div>
   </div>
   );
 }
}
export default MainContainer;

Здесь говорится, что в MainContainer есть другие контейнеры, такие как StockContainer и PortfolioContainer. В нем также есть панель поиска! Давайте сосредоточимся на поиске в последнюю очередь, так как это будет немного сложно, поскольку включает сортировку и фильтрацию.

Сначала это PortfolioContainer, потому что, как видно из приведенной выше гифки, в портфелях много акций!

import React, { Component } from ‘react’;
import Stock from ‘../components/Stock’
class PortfolioContainer extends Component {
   render() {
      return (
         <div>
            <h2>My Portfolio</h2>
            {this.props.stocks.map(stock => <Stock stock={stock} removeStock={this.props.removeStock}/> )
             }
        </div>
      );
   }
}
export default PortfolioContainer;

Хороший! Теперь покажем StockContainer:

import React, { Component } from ‘react’;
import Stock from ‘../components/Stock’
class StockContainer extends Component {
   
   render() {
      let stocks = this.props.stocks
         return (
            <div>
               <h2>Stocks</h2>
                    {stocks.map(stock => <Stock stock={stock} addPortfolio={this.props.addPortfolio} /> )}
           </div>
         );
      }
   }
export default StockContainer;

Мы ВСЕ ЕЩЕ не будем касаться поиска, пока не закончим с остальными компонентами. Просто поверь мне! Важно поддерживать организованность.

Теперь займемся Header.js. Это в компонентах

import React, { Component } from ‘react’;
class Header extends Component {
   render() {
      return (
         <header>
         <h1 className=”text-center”>Flatiron Stock Exchange</h1>
         </header>
      );
   }
}
export default Header;

Хороший! Теперь давайте сделаем Stock.js, который также находится в папке компонентов. Это ФУНКЦИОНАЛЬНЫЙ КОМПОНЕНТ. Это означает, что это не внутри класса:

import React from ‘react’
const Stock = (props) => (
   <div>
      <div className=”card” onClick={() => props.addPortfolio ? props.addPortfolio(props.stock) : props.removeStock(props.stock)}>
         <div className=”card-body”>
            <h5 className=”card-title”>{
               props.stock.name
            }</h5>
            <p className=”card-text”>{
            props.stock.ticker + “ “ + props.stock.price
            }</p>
         </div>
      </div>
   </div>
);
export default Stock

Хорошо… все выглядит хорошо! Теперь давайте настроим наш поиск. Это также в компонентах, но это компонент MainContainer, а не другой предок контейнера. Еще один функциональный компонент!

import React from ‘react’;
const SearchBar = (props) => {
   return (
      <div>
         <strong>Sort by:</strong>
         <label>
            <input type=”radio” value=”Alphabetically” name=”sort” checked={null} onChange={(e) => props.sortStocks(e.target.value)}/>
            Alphabetically
         </label>
         <label>
            <input type=”radio” value=”Price” name=”sort” checked={null} onChange={(e) => props.sortStocks(e.target.value)}/>
            Price
         </label>

<br/>
         <label>
            <strong>Filter:</strong>
            <select onChange={(e)=>props.filterStocks(e.target.value)}>
               <option value=”All”>All</option>
               <option value=”Tech”>Tech</option>
               <option value=”Sportswear”>Sportswear</option>
               <option value=”Finance”>Finance</option>
            </select>
         </label>
      </div>
   );
}
export default SearchBar;

Надеюсь, это поможет! Комментарий ниже и дайте мне знать, если вы нашли это полезным. Как всегда, удачного дня!