Рубрики
Без рубрики

Строительство Pokedex с реагированием

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

Автор оригинала: Bhargav.

Что если покемон были реальными? Как ребенок, растущий в 90-х годах, мы все удивлялись об этом; Покисляя покемонов, сражающуюся в спортивные залы и используя этот крутой покедекс, чтобы дать нам необходимую информацию. Очевидно, нет покемонов в реальной жизни ( Pokémon Go – самая близкая вещь, которую мы можем добраться до «реального»), но это не значит, что у нас не может быть крутой покедекс, верно?

Итак, давайте построим наш собственный покедекс, используя React!

(Прочитанная статья: Что делать, если языки программирования были покемонами? )

React.js Библиотека

Facebook придумал библиотеку RACT, которая потрясла передний мир с его проницательностью. Его возможности рендеринга являются довольно фантастическими, а упрощенный синтаксис JSX делает вещи еще лучше. Давайте проверим, как мы можем построить действительно крутой покедекс с реагированием и несколькими инструментами NPM.

Прежде чем мы пойдем дальше, пожалуйста, убедитесь, что у вас есть Node.js и NPM на вашем компьютере. Если вы начинающий, вот гид Чтобы помочь вам быть знакомы с средой реагирования.

Давайте начнем!

1. Установка зависимостей

Создайте папку для вашего проекта и откройте терминал в корне папки. Чтобы инициализировать ваш проект, введите:

npm init

Вам может потребоваться нажать клавишу Enter в несколько раз, чтобы настроить свой Package.json

Теперь запустите:

npm install --save-dev babel-cli babel-loader babel-plugin-add-module-exports babel-plugin-transform-runtime babel-preset-es2015 babel-preset-react babel-preset-stage-2 isomorphic-fetch react react-dom react-hot-loader webpack webpack-dev-server

Это будет установить реагирование в ваш проект, а также несколько плагинов и предустановок BABEL, которые пригодятся в эксплуатации (конвертации) нашего React Code ES6 +, в JavaScript ES5, чтобы браузеры могли запускать его. Помните, Не все браузеры могут запускать ES6 еще.

2. Настройка Pokémon Monster Sprites

  1. Создать папку с именем публичный В корне вашего проекта.
  2. Загрузите этот ZIP-файл из здесь Отказ
  3. Извлеките этот ZIP-файл в вашу общую папку.
  4. Убедитесь, что ваша структура папки так далеко выглядит так.
покедекс

3. УБПАК и BABEL Конфигурация

WebPack – это инструмент, который позволяет нам подключить все наши файлы JavaScript в ES5, используя плагины Babel. Итак, все, что мы делаем, это запустить наш код в React, и ES6 и WebPack помогат нам мгновенно преобразовать его в стандарты ES5. Давайте добавим webpack.config.js файл нашего проекта.

var path = require('path');
var webpack = require('webpack');
var assetsPath = path.join(__dirname, 'src');

module.exports = {
    entry :  {
        bundle :  ['webpack-dev-server/client?http://0.0.0.0:8080', 
            'webpack/hot/only-dev-server',
           path.resolve(assetsPath,'index.js')],
    },
    output: {
        chunkFilename: '[name].js',
        filename: '[name].js', //
        path: path.join(assetsPath ,"dist/js/"),
        publicPath: 'http://localhost:8080/assets/'
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /.jsx?$/,
                loaders: ['react-hot-loader/webpack','babel'],
                include: [path.resolve(assetsPath)]
           }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devtool : '#source-map',

    plugins: [
     new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"development"'
      }
    }),
    new webpack.HotModuleReplacementPlugin()
    ]
};

3.1 Понимание конфигурации WebPack

  1. Вход – Это где WebPack ищет как отправная точка для расслоения. index.js внутри SRC Папка нашего проекта – это то, где приложение Pokedex React находится в. Мы создадим это в ближайшее время.
  2. Выход – PercingPath Ключ имеет решающее значение в этой конфигурации. Это означает, что наш JavaScript будет подан в http://localhost: 8080/Активы/bundle.js Отказ
  3. Погрузчики – Это говорит WebPack, как он должен рендер файлы с определенным расширением. В нашем случае все файлы с расширением .js или .jsx рассматриваются как файлы, которые необходимо преобразовать в ES5, используя Babel и React погрузчики.

Вы также можете узнать больше о WebPack в этом руководстве.

Создайте файл .babelrc в корневой папке проекта и имейте это как его содержание.

{
  "presets" : ["es2015", "stage-2", "react"],
  "plugins" : ["add-module-exports","transform-runtime"]
}

Этот файл говорит, что Babel это, когда WebPack загружает Babel-Loader , он должен трансать его до ES6 и реагировать с использованием этих предустановок и плагинов. Вы можете прочитать больше о них здесь Отказ

4. index.html и style.css

Создать index.html Файл в корневой папке проекта, который должен выглядеть так:




  
    
    Pokedex | React

Добавим несколько стилей, чтобы наше приложение выглядеть лучше. Создать still.css Файл в корневой папке проекта с помощью этого CSS.

HTML, body{
  font-family : sans-serif;
  background: #e2e1e0;
    text-align : center;
}
.pokeapp{
    padding : 16px;
}
.pokemon--species--list{
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    -ms-flex-wrap : wrap;
        flex-wrap : wrap;
    padding : 16px 0;
}
.pokemon--species{
    -ms-flex-preferred-size : 25%;
        flex-basis : 25%;
    padding : 8px;
    box-sizing: border-box;

}
.pokemon--species--container{
    padding : 8px;
    background : white;
    cursor : pointer;
 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

5. Леса на леспе.

Создать папку с именем SRC , если вы еще этого не сделали. Создать файл index.js в папке SRC.

Давайте сначала создать Актуальный компонент назван Покайпп Отказ Этот компонент будет корневым компонентом этого проекта. Также в нашем index.html Мы создали Div с ID приложение помнить? Давайте монтировать наши Покайпп на div # приложение Отказ

//This is the root component
import {render} from 'react-dom';
import React, {Component} from 'react';

class PokeApp extends Component{
  render(){
    return 

      
 The Kanto PokeDex! 

    
;
  }
}
render(,document.getElementById('app'))

Прямо сейчас наше приложение ничего не делают, кроме давайте продолжим и запустите его с WebPack и посмотрим, что мы имеем до сих пор. Все, что нам нужно сделать, это запустить:

node_modules/webpack-dev-server/bin/webpack-dev-server.js

В Терминал В корневой папке проекта. Также открыть http://localhost: 8080. Вы должны увидеть это на вашем экране.

Предварительный просмотр

6. Выбор Pokedex из API PokeAPI

Пол Халлтт был очень добр, чтобы построить убийцу API, чтобы помочь разработчикам построить приложения на Pokémon. Вы можете прочитать больше об этом здесь Отказ

Давайте усилим наш index.js и добавить пару компонентов. Мы создадим компонент с именем Покемон Для отображения отдельных покемонов и создадим другой компонент с именем Покемонов Чтобы получить данные Pokédex и отобразить список Покемон составные части.

5.1 Pokémon Компонент

Покемон Компонент должен быть довольно простым компонентом, который принимает два реквизита, ID а также покемон Отказ ID Является ли идентификатор покемонов на покедекс. Например: Charmander имеет ID – 4 Отказ И Чармандер покемон Объект будет выглядеть так.

{
url: "http://pokeapi.co/api/v2/pokemon/4/",
name: "charmander"
}

Итак, давайте пойдем вперед и создадим это.

//The Pokemon component will show an individual Pokemon monster
// It shows an image of the Pokemon and
// shows the name of it as well.
class Pokemon extends Component{
  render(){
    const {pokemon,id} = this.props;
    return 

            

              

                
              

              
 {pokemon.name} 

            

          
;
    }
}

5.2 Компонент PokemonList

Компонент Pokemonlist отвечает за получение данных покемонов из PokeAPI. Это должно выглядеть что-то вроде этого.

//The PokemonList component shows nothing when it mounts for the first time. 
//But right before it mounts on to the DOM, it makes an 
//API call to fetch the first 151 Pokemon from the API and 
//then displays them using the Pokemon Component

class PokemonList extends Component{
  constructor(props){
    super(props);
    this.state = {
      species : [],
      fetched : false,
      loading : false,
    };
  }
  componentWillMount(){
    this.setState({
      loading : true
    });
    fetch('http://pokeapi.co/api/v2/pokemon?limit=151').then(res=>res.json())
    .then(response=>{
      this.setState({
        species : response.results,
        loading : true,
        fetched : true
      });
    });
  }

  render(){
    const {fetched, loading, species} = this.state;
    let content ;
    if(fetched){
      content = 
{species.map((pokemon,index)=>)}
;
    }else if(loading && !fetched){
        content = 
 Loading ...
;
    }
    else{
      content = 
;
    }
    return  

      {content}
    
;
  }
}

Это начинается с Государство где Вид Массив пуст и забрал Boolean установлен на ложь Отказ Это говорит о компоненте, что когда он находится в этом состоянии, у него нет много, чтобы показать пользователю.

Однако, когда компонент должен гореть, однако Загрузка Boolean установлен на правда который позволяет нам показывать хороший Загрузка ... Текст на нашем экране пока изоморфно-выборки Библиотека извлекает данные Pokedex из API, преобразует его на JSON и загружает его в Вид множество. На данный момент Загрузка установлен на ложь и забрал установлен на правда Отказ Это означает, что приложение теперь имеет все покемон, загруженные в его состоянии.

Теперь все, что нам нужно сделать, – это повторять все покемонов в массиве вида и для каждого из покемона визуализации Покемон компонент с ID (Поскольку индекс на основе 0, ID + 1 ) и покемон реквизит устанавливается соответственно.

Вот и все!

Теперь, когда у нас есть наши компоненты готовы. Давайте пойдем вперед и добавьте их в наш компонент PokeApp. Итак, наше index.js Файл должен выглядеть так.

import {render} from 'react-dom';
import React, {Component} from 'react';
import fetch from 'isomorphic-fetch';


//The Pokemon component will show an individual Pokemon monster
// It shows an image of the Pokemon and
// shows the name of it as well.
class Pokemon extends Component{
  render(){
    const {pokemon,id} = this.props;
    return 

            

              

                
              

              
 {pokemon.name} 

            

          
;
    }
}


//The PokemonList component shows nothing when it mounts for the first time. 
//But right before it mounts on to the DOM, it makes an 
//API call to fetch the first 151 Pokemon from the API and 
//then displays them using the Pokemon Component

class PokemonList extends Component{
  constructor(props){
    super(props);
    this.state = {
      species : [],
      fetched : false,
      loading : false,
    };
  }
  componentWillMount(){
    this.setState({
      loading : true
    });
    fetch('http://pokeapi.co/api/v2/pokemon?limit=151').then(res=>res.json())
    .then(response=>{
      this.setState({
        species : response.results,
        loading : true,
        fetched : true
      });
    });
  }

  render(){
    const {fetched, loading, species} = this.state;
    let content ;
    if(fetched){
      content = 
{species.map((pokemon,index)=>)}
;
    }else if(loading && !fetched){
        content = 
 Loading ...
;
    }
    else{
      content = 
;
    }
    return  

      {content}
    
;
  }
}


//This is the root component
class PokeApp extends Component{
  render(){
    return 

      
 The Kanto PokeDex! 

      
    
;
  }
}

render(,document.getElementById('app'))

Давайте посмотрим на наше приложение сейчас. БАМ !!

Покедекс

Я надеюсь, что у вас было веселое время, построенное это приложение со мной. Не стесняйтесь пинг мне на вопросы и да, вы можете скачать источник здесь Отказ Просто беги NPM установить и NPM начать Чтобы начать приложение.

Читайте ещё по теме: