Всплывающее окно с invectjs для джекиллового блога

Первоначально опубликовано maksimivanov.com

Когда-то (вчера) я решил, что мой блог не хватает старого старого всплывающего окна. Вы знаете, тот, который ненусно просит присоединиться к списку рассылки. Так что, если у вас есть джекиллый блог, и вы хотите знать, как создать всплывающее окно, используя Rectjs -Это пост полностью актуален.

Сначала давайте получим все прагматику и посмотрим пример того, что мы получим.

Вот эта кнопка просто изображение, перейти к maksimivanov.com Чтобы увидеть пример

В этой статье я предполагаю, что вы используете Страницы GitHub провести ваш блог Jekyll.

Давайте грязным

Чтобы быть в состоянии компилировать .jsx код – сначала нам нужно настроить WebPack Отказ

Начните с создания Package.json В вашем корневом каталоге.

➜ npm init

После ответа на все необходимые вопросы и убирая ненужные вещи, вы должны оказаться с чем-то вроде этого:

{
  "name": "satansdeer.github.com",
  "version": "1.0.0",
  "description": "Maksim Ivanov jekyll blog",
  "author": "Maksim Ivanov",
  "license": "ISC",
  "devDependencies": {
  }
}

Теперь давайте установим требуемые зависимости:

➜ npm install webpack babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom babel-plugin-transform-class-properties --save-dev

Создать .babelrc С пресетами конфигурации:

➜ echo '{ "presets": ["react", "es2015"] }' > .babelrc

Настройте WebPack, поместите это в свой webpack.config.js :

const path = require('path');

module.exports = {
  entry: "./front/entry.js",
  output: {
    path: path.join(__dirname, "/assets/javascripts"),
    filename: "bundle.js"
  },
  module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: "babel-loader",
      query: {
        plugins: ['transform-class-properties']
      }
    }
    ]
  }
};

Тестовый забег

Сделать спереди папка:

➜ mkdir front

И создать файл intry.js Там с некоторым консольным выходом для тестирования.

➜ echo 'console.log("It works!")' > front/entry.js

Запустите WebPack, он должен построить свой bundle.js внутри /Активы/Javascripts папка.

➜ webpack

Теперь добавьте эту строку в свой макет. Я не знаю, может быть, на вашем нижнем колонтитуле или только внизу вашего _layouts/default.html :

Откройте свой сайт. Вы должны увидеть Оно работает! в JavaScript Console. Если нет – двойной проверьте конфигурацию WebPack и убедитесь, что bundle.js был построен.

Добавить реакцию

Создать Компоненты папка:

➜ mkdir front/components

И добавить App.js там со следующим содержанием:

import React, { Component } from 'react';
import Popup from './Popup';
import SubscriptionForm from './SubscriptionForm';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };
  }

  openPopup = () => {
    this.setState({
      isOpen: true
    });
  }

  closePopup = () => {
    this.setState({
      isOpen: false
    });
  }

  render() {
    return (
      
        

        
          
        
      
    );
  }
}

export default App;

Вот каждый раз, когда мы называем OpenPopup или Крупным планом Мы вызываем SetState Функция, которая вызывает перенастройку с обновленными isopen значение.

Тогда мы проходим isopen Значение для Всплывающее окно составная часть. Создать Popup.js со следующим кодом:

import React from 'react';

class Popup extends React.Component {
  render() {
    if(!this.props.show) {
      return null;
    }

    return (
      
        
          
          {this.props.children}
        
      
    );
  }
}

export default Popup;

Это возвращает null И ничего не делает, если мы пройдем ложь или оказываем нашу всплывающую макет, если мы передам правду.

Мы также прошли Крупным планом как стоимость включен пропры И теперь мы вызываем это как OnClick Обратный вызов кнопки закрытия.

{this.proops.children} Разговор позволил нам пройти вложенный компонент Подписка что в основном содержит форму «Отказ», предоставленную MailChimp.

Я только что изменил входы Чтобы использовать закрытый тег и изменил некоторые атрибуты на их версии React. Как Класс / классное значение , для / HTMLFOR Отказ

Вот мой Подписка :

import React from 'react';
import PropTypes from 'prop-types';

class SubscriptionForm extends React.Component {
  render() {
    return (
      
        
          
            Subscribe to my mailing list
            
              Name:
                
              
            
            
              Email:
                
              
            
            
              
              
            
            
            
          
        
      
    );
  }
}

export default SubscriptionForm;

Это временное решение, позже я планирую переключиться на Mail-for-Good Это использует AWS, чтобы отправить объемные электронные письма и переписать эту форму подписки.

Резюме

Это оно. Мы использовали WebPack построить и расставлять наш JavaScript. Мы добавили простой всплывающий компонент и форму отказа.

В следующей статье мы добавим тесты и узнаем о некоторых инструментах, которые мы имеем для тестирования приложений React.

Давайте грязным

Тестовый забег

Добавить реакцию

Subscribe to my mailing list

Резюме

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