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

Простое приложение калькулятора с использованием React и Node

Подробное пошаговое руководство по созданию простого приложения калькулятора с использованием реагирования и узла.

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

Около 5 месяцев назад я оказался в ситуации, когда мне нужно было написать веб-приложение, которое я решил не упоминать, используя JavaScript в качестве языка программирования – реагировать на передний и узел для заднего конца. Было временное ограничение, поэтому мне пришлось подняться и учиться так же быстро, как я мог бы реагировать в кратчайшие сроки.

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

Вывод проекта – простой калькулятор

Давайте кратко поговорим о библиотеках/каркасах и инструментах, которые мы будем использовать и как они все связывают вместе.

  • Реагировать: Реагировать Является ли библиотека JavaScript для построения пользовательских интерфейсов. Это похоже на угловой. Если вы знакомы с помощью JavaScript, вы должны быть хорошими с реагированием. С этим сказанным, _ Обратите внимание, что с реакцией вы будете писать HTML и CSS прямо в вашем JavaScript_.
  • Узел: Узел Это среда выполнения JavaScript Server Side. Клиентская сторона JavaScript среда выполнения среды выполнения проживает в браузере, но узел позволяет записывать свой серверный код с помощью JavaScript.
  • Гит: Гит это инструмент управления версиями. Git позволяет отслеживать изменения, которые вы сделали в файлах, взяв снимки этих файлов в разные точки во времени. Это позволяет проверить состояние ваших файлов в разные точки во времени.
  • Github: Github Позволяет вам проводить/держать свой исходный код в безопасности где-то в сети, используя git. Итак, вы можете отслеживать ваши файлы, используя git, и вы можете сохранить папку/каталог, содержащий все ваши исходные файлы на github.
  • Бабел: Бабел Является ли библиотека JavaScript, которая позволяет вам написать JavaScript следующего поколения (ES2015/ES6 и выше) и транспортировки/преобразовывать код JavaScript вашего следующего поколения вниз к версии, который понимает, что узел и ваш браузер. Мы также бы использовали Babel, чтобы преобразовать наш React Code в простой JavaScript, понятый браузером.
  • [ WebPack: WebPack это еще один инструмент JavaScript, который помогает вам объединить все ресурсы, необходимые, которые вы ссылаетесь в ваш файл HTML.

Простой!

Это может быть много, чтобы проглотить, поэтому давайте суммируемся. Мы пишем простое приложение калькулятора, которое будет доступно нам в нашем браузере. Наш язык выбора будет некоторыми вариациями JavaScript (JSX и ES6), который будет использоваться на сервере, так и на стороне клиента. Эти вариации JavaScript будут преобразованы в обычный JavaScript, понятый браузером и Узел Использование Бабел Отказ Мы отслеживаем наш прогресс, используя Git и сохранить наши файлы проекта на GitHub.

Да, это должно быть все, что нам нужно было бы получить этот проект на работу. Давайте доберемся до кодировки! Прежде чем начать кодирование, обратите внимание, что Для вас было бы лучше набрать любую команду, которая необходима вместо того, чтобы просто копировать и вставлять их в терминал Отказ Это поможет вам избежать проблем. Также $ Символ – это просто приглашение с моего терминала/оболочки и не является частью команд Отказ

Это сказано, уволить редактор кода, я буду использовать VSCode (У него есть встроенный терминал, из которого я могу войти в команды).

На вашем терминале введите следующую команду для создания наших Реагистрационный калькулятор каталог и перейдите в созданный каталог.

$ mkdir react-calculator && cd react-calculator

Далее мы инициализируем наш каталог для Git (обратите внимание, что вы должны иметь правильно Установленные git ), запустив команду ниже. (Обратите внимание, что все остальные команды будут введены с предположением, что вы находитесь в корневом каталоге вашего проекта, если вы не закрываете текущую вкладку на свой терминал, вы должны быть просто в порядке) Отказ

$ git init

Далее мы создадим наше Package.json Файл в этом каталоге (наши проекты Coot Directory), запустив команду ниже.

$ touch package.json

Да, это создает файл! Теперь откройте его в своем любимом редакторе (я использую VSCode, поскольку он имеет встроенный терминал, вы можете включить/выключить на MAC, нажав кнопку Control и ~ вместе).

Наше Package.json Файл используется для описания метаданных о нашем проекте. Откройте его в редакторе и введите следующее:

{
  "name": "react-calculator",
  "version": "0.1.0",
  "author": {
    "name": "Azeez Olaniran"
  },
  "scripts": {
    "start": "babel-node ./server/server.js"
  },
  "dependencies": {
    "babel-cli": "^6.24.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^2.4.1"
  }
}

Да, теперь у нас есть краткие метаданные для нашего приложения. Я буду кратко объяснить разные узлы, которые вы видите (хотя они вполне уверены в себе).

  1. Имя Описывает имя приложения.

  2. Версия Описывает версию приложения.

  3. Автор Описывает информацию о авторе приложения.

  4. Сценарии Давайте описываем сценарии для выполнения их Имя Использование NPM (диспетчер пакетов узла) в командной строке (NPM поставляется в комплекте с узлом). Начать Команда будет использоваться для запуска нашего сервера приложений, используя Бабел-узел , что является частью Babel-Cli Пакет, преобразуя нашу ES6 написано server.js Файл в обычный JavaScript в памяти и используя узел для выполнения файла.

  5. зависимости Опишите/список других модулей наше приложение будет зависеть от.

  6. Dev-зависимости Опишите/перечислять другие модули/инструменты, которые будут необходимы во время разработки. Babel-Preset-ES2015 и Babel-Preset-React Dev-зависимости являются Бабел Плагины используются при преобразовании нашего кода, который имеет ES6 и/или jsx синтаксис.

Больше метаданных можно добавить в наше приложение. Если вы заинтересованы, вы могли бы сделать немного больше исследований на этом.

Хорошо! Теперь нам нужно настроить файл конфигурации, который рассказывает Babel, что ему нужно будет преобразовать наш код. Этот файл называется .babel.rc Файл, и он помещен в корневой каталог нашего проекта. Давайте создадим этот файл:

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

Команда выше создает наши .babelrc Файл конфигурации и списки наших предустановок/плагинов Babel – ES2015 и реагировать Отказ Это рассказывает Babel, плагины, что использовать при преобразовании нашего кода JavaScript, который содержит ES6 и реагировать jsx синтаксис. Помните, что мы перечислили эти модули плагинов в нашем разделе DEV-зависимости нашего Package.json файла.

Возможно, вы заметили, что из нашей команды начать, у нас нет папки для серверов, содержащей A server.js Файл еще пока, так что давайте создадим это. Вернитесь к вашему терминалу (перейдите в наш каталог проекта) и запустите следующую команду:

$ mkdir server && touch .server/server.js

Вышеуказанная команда создает каталог серверов и создает server.js Файл внутри каталога сервера. Далее откройте server.js Файл в своем редакторе и введите следующий код:

import http from 'http';
import fs from 'fs';
import url from 'url';
import path from 'path';

/**
 * Function to be used as a callback to our http.createServer method
 * It handles incoming requests and sends the response
 */
function requestHandler(request, response) {
  // resolve the path to the requested resource and assign it to a variable
  let requestedResource = path.join(
    __dirname, // current directory where server.js is found
    '../public', // step out of this directory into the public directory
    url.parse(request.url).pathname // path to resource requested by client
  );

  // use the exists method of the fs module to check if the requestedResource 
  // exists.
  fs.exists(requestedResource, function(exists) {
    // check if file does't exist and return a 404 status (File not found)
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    // Check if the reqested resource is a directory. If it is, just set our
    // index.html page as the requested resource.
    if (fs.statSync(requestedResource).isDirectory()) {
      requestedResource += '/index.html';
    }
    
    // Finally, we read the requested file (asynchronously) and send it's 
    // content to the client
    fs.readFile(
      requestedResource, // path to requested resource
      "binary", // read the requested resource as a binary file
      function(err, file) { // call back function to handle end of file reading

      // If an error occured while reading the file, send the error message 
      // with a status code of 500 (Internal server error)
      if (err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      // Helper object to map requested content types (extension) to response 
      // mime types
      const contentTypesByExtension = {
        '.html': "text/html",
        '.css':  "text/css",
        '.js':   "text/javascript"
      };

      // Helper object to hold our headers
      const headers = {};
      // get the content type using the requested resource file extension
      const contentType = contentTypesByExtension[
        path.extname(requestedResource)
      ];

      // if the requested resource maps to any of our content type extension, 
      // then set the Content-Type field for our response headers.
      if (contentType) {
        headers["Content-Type"] = contentType;
      }

      response.writeHead(200, headers); // write response header (if any)
      response.write(file, "binary"); // write content of read file (binary format)
      response.end(); // send response and close request
    });

  });
}

// create an instance of our httpServer and passing in our request handler callback
const server = http.createServer(requestHandler);
// declare our port noumber
const portNumber = 3030;
// setup our server to start listening on the port we specified
server.listen(portNumber, function () {
  // log to our console, so we know our server is up and running.
  console.log(`Server listening on port ${portNumber}`);
});

Объяснение кода в server.js Файл следует ниже:

Линии 1-4 Импортируйте наши модули зависимости от пакета сердечника узла. 1. http: Чтобы создать HTTP-сервер/клиент. В этом случае мы будем использовать его для создания сервера. 2. ФС: Модуль файловой системы, чтобы помочь нам с операциями, связанными с файлами/папками 3. URL: Универсный модуль локатор ресурсов, чтобы помочь нам с операциями, связанными с URL 4. Путь: Модуль файловых системных путей, чтобы помочь нам с операциями, связанными с PATH.

Линии 10-73 Объявляет нашу функцию, которая будет использоваться в качестве обратного вызова для обработки клиентских запросов на HTTP-сервере. Кодекс был сильно прокомментирован, и я советую, чтобы вы прочитали комментарии, чтобы лучше понять, что мы делаем.

Линии 80-88 Создайте наш HTTP-сервер, пройдите в наш обратный вызов, чтобы обработать запросы клиентов, и, наконец, запустите наш сервер, чтобы прослушать указанный порт.

Итак, если вы осторожно проходите через код, вы бы заметили, что мы объявили общую папку и файл index.html, который мы хотим служить, если клиент запрашивает нашу корневую папку. Мы еще не создали нашу общую папку или файл index.html. Давайте сделаем это сейчас;

$ mkdir public && touch public/index.html

Вышеуказанная команда создает наш публичный каталог в корневой папке нашей проекта и создает наш файл index.html в общественном каталоге.

Давайте введем несколько минимальных HTML в нашем файле index.html сейчас и проверьте наш сервер, чтобы увидеть, работает ли он.

Откройте файл index.html в своем редакторе и введите следующий HTML-код:




  
  
  
    
Welcome to react calculator

Да, пришло время попробовать наш сервер. Введите следующую команду в вашем терминале/оболочке

$ npm start

Вы должны увидеть Сервер запущен на порту 3030 напечатано на вашу консоль/терминал. Далее откройте браузер и посетите http://localhost: 3030 И вы должны увидеть Добро пожаловать на реактивный калькулятор напечатано на экране.

Таким образом, у нас есть наш базовый сервер, настроенный! Это хорошее время для использования Git, чтобы сделать снимок нашего проекта, поэтому у нас есть версия этого этапа нашего приложения. На вашем терминале введите следующую команду GIT:

статус $ Git.

Это будет распечатать состояние всех файлов в нашем каталоге проекта. Нам нужно будет отслеживать все файлы, постановка их.

Правда в том, что у нас есть наш node_modules Папка среди непродовольственных файлов, и нам действительно не нужно отслеживать файлы в нашем node_modules Папка, поскольку она содержит только наши проекты. Зависимости и DEV-зависимости, оба из которых мы всегда можем пройти через NPM установить на терминале.

Итак, нам нужно сказать Git, чтобы игнорировать эту папку. Откройте свой терминал и введите команду:

$ echo node_modules >> .gitignore

Это создает .gitignore Файл (так как он еще не существует) и записывает текст Node_Modules к .gitignore файл. Попробуйте работает Статус Git Опять же в вашей командной строке, вы заметите, что наша node_modules Папка больше не доступна в нашем списке неподанных файлов.

Чтобы поставить все файлы (добавить файлы в постановку,) Введите эту команду в свой терминал:

$ Git Add.

Это будет настроить все ваши файлы, что делает их готовыми к совершенству (Snapshoted). Чтобы убедиться, что файлы были поставлены, вы можете ввести Статус Git снова в ваш терминал.

Давайте посвятим поэтапные файлы и добавьте сообщение Commit. Сделайте это с этой командой:

$ Git Compry -M ‘Настройка Basic Server и Page.html Page.

Чтобы просмотреть наш снимок/коммитацию в журнале всех наших коммитов, просто введите эту команду в свой терминал:

Журнал Git.

Теперь вы должны увидеть ваше самое первое сообщение Commit, да!

Наконец, нам пора создать вид на наш калькулятор, используя Реагировать Отказ

Во-первых, что мы собираемся сделать, – это создать нашу конфигурацию для WebPack (запомнить WebPack Right). Конфигурация – это простой объект JavaScript с различными свойствами, которые делают его высоко настраиваемым. Существует четыре основных настраиваемых свойства для объекта –

  1. Вход: Это описывает точку входа для WebPack в нашем приложении. Для этого у нас будет наш index.js Файл в корневом каталоге нашей клиентской папки. Это будет отправная точка переднего конца нашего приложения.
  2. Выход: Это описывает наш выходной каталог и имя нашего выходного файла JavaScript. После того, как WEBPack сделан пакет, он выплющится в комплектных файлах в этот каталог вместе с одним подключенным файлом JavaScript, который мы бы дали имя.
  3. Погрузчики: WebPack на своем собственном понимает простой JavaScript. Но файлы, которые мы будем объединяться, будут включать; .jsx Файлы, написанные в ES6 Отказ Это где Погрузчики Войдите, WebPack позволяет нам указывать определенные погрузчики для разных типов файлов. Так как мы будем писать ES6 Синтаксис, смешанный с jsx Мы будем включать загрузчик для обработки ES6 Синтаксис и другой загрузчик для обработки jsx синтаксис.
  4. Плагины: Плагины похожи на погрузчики. Мы не будем использовать их в этом руководстве, но если вы хотите узнать больше о них, вы можете проверить документацию WebPack на их Сайт Отказ

Хорошо, теперь, когда мы знаем, что все это делает, давайте создадим наш файл конфигурации WebPack в корне нашего проекта. Откройте свой терминал и введите следующую команду, чтобы создать файл WebPack.config.js.

$ touch webpack.config.js.

После создания файла конфигурации WebPack откройте его в редакторе и введите следующее:

const path = require('path'); // import Node.js path module for path related operations
// create our config object
const config = {
  entry: path.join(__dirname, '/client/index.js'), // Abosolute path to our entry file
  output: { // our output configuration
    path: path.join(__dirname, './public/'), // output path (directory/folder)
    filename: 'bundle.js' // output bundled file name
  },
  module: { // define our loaders here
    rules: [ // array of rules to handle different file types
      {
        test: /\.(js|jsx)$/, // check for .js and .jsx files (uses Regex)
        loader: 'babel-loader' // use these loaders for .js and .jsx files found
      }
    ]
  }
};

// export our config object.
// You may have noticed we are using es5 syntax here. This is because Webpack, which would be using this
// file, expects es5 syntax
module.exports = config;

Так что там у нас есть наш webpack.config.js Файл, который в основном определяет и экспортирует объект JavaScript. Он намеренно сильно прокомментирован, чтобы вы могли легко понять, что там происходит.

Обратите внимание, что мы заявили загрузчик (строка 13), чтобы справиться с нашими .js и .jsx файлы. Этот погрузчик является внешним модулем, который WebPack постарается искать при попытке подключить наш файл. Мы добавим его к нашим dev-зависимым в нашем Package.json файл. Для этого просто откройте терминал и введите команду $ npm установить --save-dev babel-loader Отказ Чтобы установить загрузчик и обновить раздел зависимости нашего Package.json файл.

Также обратите внимание, что мы упомянули клиентскую папку (строку 4) в нашем файле конфигурации. Эта папка будет держать наши jsx Файлы для нашего клиента калькулятора. Давайте создадим эту папку вместе с нашими index.js файл.

$ mkdir Client && Touch Client/index.js

Вышеуказанная команда создаст наш клиентский каталог в корневой папке нашего проекта, а также создает наш файл index.js внутри нашего справедливого созданного клиентского каталога. Далее мы напишем наше первое jsx файл.

Чтобы писать компоненты реагирования и монтировать их в DOM, мы будем в зависимости от некоторых пакетов RACT:

  1. Реагировать: Это основной пакет React Package и будет содержать многие модули, которые нам нужны.
  2. Реагировать: Этот пакет содержит методы DOM конкретных методов, которые помогут нам установить наш компонент ACT-приложения в DOM.

Чтобы использовать Thess два пакета, нам нужно будет установить их и добавить их в наши проектные зависимости (в нашем файле Package.json). Введите команду ниже для установки и сохранения обеих пакетов на наши проектные зависимости.

$ npm Установка – ASAVE RACT REVECT-DOM

Теперь, когда у нас есть обе пакеты, мы можем открыть наш файл index.js (в нашей клиентской папке) и записывать и устанавливать наш первый компонент реагирования.

Откройте файл index.js и вставьте в него следующий код. Я постараюсь дать подробное объяснение как в комментариях в файле, так и здесь.

import React from 'react'; // import React package
import ReactDOM from 'react-dom'; // import ReactDOM package

// using the render method, we will mount this node into our DOM (html file) on the element with 
// id of 'app'
ReactDOM.render(
  
 Hello World
, 
  document.getElementById('app')
);

Так что в основном, что делает этот файл, это тянет в наших модулях, связанных с реагированием. Этот файл будет включен в комплект с использованием WebPack, а полученный в результате подключенный файл будет помещен в нашу общую папку, которая уже содержит наш файл index.html.

Линии 1 и 2 Импорт реагировать и React-Dom модули, которые мы еще не имеем доступны. Мы добавим их в наш проект DEV-зависимости, а также потяните их в наш проект. Просто введите эту команду в свой терминал, чтобы обновить наш раздел Package.json DEV-зависимость и загрузить модули: $ npm Установка --save-dev Rect React-Dom

Линии 4-7 Мы используем метод пакета взаимодействия реагирования для монтажа узла в наше DOM.

Узел, который будет установлен, это

Hello World
найдено в строке 5. В строке 6 мы имеем в виду элемент, в который мы хотим реагировать для вставки нашего компонента реагирования. Идентификатор элемента – приложение Отказ Если вы помните, у нас нет элемента с ID « » приложение «В нашем файле index.html (в нашем публичном каталоге). Нам нужно добавить это сейчас вместе с тегом сценария, указывающей на нашу bundle.js файл. Просто обновите свой файл index.html с тем, что у вас есть ниже:

Да, вот и все. Нам нужно добавить команду в раздел сценариев нашего package.json file, который позволит нам вызвать WebPack, чтобы объединить наши файлы, используя webpack.config.js файл. Откройте свой Package.json Файл и добавить: «WebPack»: «WebPack.config.js чуть ниже команды запуска в разделе скриптов (не забудьте добавить запятую после команды скрипта и перед командой WebPack).

Это добавляет команду WebPack в рамках нашей доступной команды сценариев. Мы будем использовать команду, чтобы вызвать WebPack и пропустите его файл конфигурации.

Ваш файл package.json теперь должен выглядеть следующим ниже:

{
  "name": "react-calculator",
  "version": "0.1.0",
  "author": {
    "name": "Azeez Olaniran"
  },
  "scripts": {
    "start": "babel-node ./server/server.js",
    "webpack": "webpack --config=webpack.config.js"
  },
  "dependencies": {
    "babel-cli": "^6.24.1"
  },
  "devDependencies": {
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^2.4.1"
  }
}

Да, теперь, когда у нас есть WebPack, мы можем генерировать наш первый bundle.js и проверьте его на нашем сервере.

Откройте свой терминал и введите команду ниже, чтобы вызвать WebPack для создания нашего bundle.js Файл в общественном каталоге:

$ npm запустить webpack

После запуска вышеуказанной команды вы можете проверить нашу общую папку и нашу bundle.js файл должен был быть сгенерирован.

Также в командной строке давайте начнем наш сервер с помощью команды ниже:

Запуск $ NPM

Наш сервер должен быть запущен и работает. Откройте свой браузер и посетите http://localhost: 3030 И вы должны увидеть наши Здравствуйте, мир Сообщение отображается в браузере. YAY, мы настроили WebPack и подключили его с реагированием и бабелом. Давайте сделаем наш второй коммит:

Сначала мы проигнорируем наш файл bundle.js в общедоступной папке, потому что он всегда генерируется WebPack (это мое предпочтение). Откройте терминал и введите команду ниже, чтобы добавить наш файл Bundle.js в список наших GIT игнорируемых файлов/папок:

$ echo ‘\ npublic/bundle.js >> .gitignore

Затем – $ Git Add.

Чтобы добавить/сценировать все наши измененные файлы и $ Git Compry -M 'Настройка WebPack и Test Bundle.js файл' сделать наш второй коммит вместе с его описательным сообщением.

YAY, мы успешно проводли ворсит WebPack с Babel.

Для этого приложения мы будем использовать листы внешних стилей (вы можете записать листы встроенных стилей в компонентах React Components), поэтому нам придется пересмотреть наш конфигурацию WebPack и рассказать ему, как обрабатывать наши стильные файлы (файлы .css). Также в нашей клиентской папке мы создадим подпапку под названием стилей и создать файл main.css там.

Давайте создадим наш файл стилей, откройте терминал и введите следующую команду, чтобы создать наш стиль файла:

$ mkdir Client/Styles && Touch Client/Styles/Main.css

Это должно создать наш файл Main.css в папке наших стилей в нашей папке клиента. Откройте main.csss Файл и давайте установим фоном нашей страницы к черному, введя код ниже:

body {
  background-color: black;
}

Далее мы импортируем нашу main.csss Файл в нашу index.js Файл (точка входа в наше приложение), а ваш index.js Файл должен быть обновлен с кодом ниже:

import React from 'react'; // import React package
import ReactDOM from 'react-dom'; // import ReactDOM package
import './styles/main.css'; // import our external css file

// using the render method, we will mount this node into our DOM (html file) on the element with 
// id of 'app'
ReactDOM.render(
  
 Hello World
, 
  document.getElementById('app')
);

Вы можете увидеть импорт нашего main.csss Файл в строке 3. Теперь, когда у нас есть файлы CSS в нашем проекте, нам нужно добавить CSS-Loader и а Стиль-погрузчик в раздел модулей нашего webpack.config.js Файл, наш обновленный webpack.config.js Файл показан ниже:

const path = require('path'); // import Node.js path module for path related operations
// create our config object
const config = {
  entry: path.join(__dirname, '/client/index.js'), // Abosolute path to our entry file
  output: { // our output configuration
    path: path.join(__dirname, './public/'), // output path (directory/folder)
    filename: 'bundle.js' // output bundled file name
  },
  module: { // define our loaders here
    // array of rules to handle different file types
    rules: [
      {
        test: /\.(js|jsx)$/, // check for .js and .jsx files (uses Regex)
        loader: 'babel-loader' // use this loader for .js and .jsx files found
      },
      { 
        // check for files ending with  .css (uses Regex)
        test: /\.css$/,
         // use these loaders of .css files. 'css-loader gets run first and is 
         // used to handle the imports of our css files inside our jsx files. 
         // The style loader then mounts our css in to the DOM
        loaders: ['style-loader', 'css-loader']
      }
    ]
  },
  // set the file extensions we want webpack to resolve
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

// export our config object.
// You may have noticed we are using es5 syntax here. This is because Webpack, which would be using this
// file, expects es5 syntax
module.exports = config;

Линии 15-18 Показать наше добавление CSS-погрузчик , пока в линия 26-29 Мы настраиваем, какие типы файлов должны быть решены WebPack (с этим, нам не нужно указывать расширение при импорте .js & .jsx файлы). Далее давайте установим этот загрузчик с помощью NPM, а также обновите нашу секцию dev-зависимости от нашего файла package.json, чтобы содержать наш модуль CSS-погрузчика.

Введите команду ниже в вашем терминале:

$ npm установить –save-dev Style-loader CSS-погрузчик

Давайте снова связываем наш файл и запустите наш сервер, чтобы увидеть наши настройки стиля, отраженные:

$ npm запустить webpack && npm начать

Вышеуказанная команда создаст наш файл bundle.js и запустить наш сервер. Далее мы должны перейти к http://localhost: 3030 чтобы увидеть наши изменения, отраженные.

Хорошо, теперь, когда мы настроили наш файл конфигурации WebPack, мы можем сосредоточиться на написании наших компонентов React и подключать наш калькулятор!

Давайте создадим наш третий коммит. Запустите команды ниже в вашем терминале, чтобы поставить наши измененные файлы и совершить их:

$ Git Add. Чтобы добавить все измененные файлы в зону постановки, а $ Git Compry -M 'Setup Webpack погрузчики конфигурации' Чтобы совершить все наши изменения с коротким сообщением. Вы можете просматривать историю совершения, набрав $ Git log в вашем терминале.

Далее мы будем писать и подключить наш калькулятор, используя реагирование.

Калькулятор

Поскольку React позволяет нам писать с помощью компонентов, мы рассмотрим наш простой калькулятор и идентифицируйте компоненты, которые он будет состоять из.

  1. Рамка: Это будет кадр нашего калькулятора, и он будет держать другие детали, перечисленные ниже вместе.
  2. Экран: Мы уверены, что мы хотим, чтобы пользователь видел их входы/выходы, так что это то, что наш экран будет делать для нас – отображать ввод пользователя и вывод.
  3. Строка экрана: Наш экран будет состоит из 2 рядов. Один сверху, чтобы показать пользовательский ввод и другое внизу, чтобы показать вывод вычисления. Обратите внимание, что это означает наш экран должен быть способен удерживать два Строки экрана Отказ
  4. Кнопки: У нас будет 2 основных типа кнопок – цифровые входные кнопки (0, 1,2 3, 4, 5, 6, 7, 8, 9) и наши кнопки действия (+, -, x,/, =). Они позволили бы нашим пользователям вводить свои входы/действия.

Итак, мы смогли определить основные компоненты для нашего приложения. Далее мы создадим наше Рамка Компонент, который должен удерживать другие компоненты и стиль его соответствующим образом. Я не буду собираться в подробности укладки, просто знаю, что обновить стиль, нам придется настроить файл main.css, который мы создали ранее.

Создать Рамка Файл компонента в папке компонента в нашей клиентской папке, используя команду ниже:

$ mkdir Client/Components && Touch Client/Компоненты/Frame.jsx

Откройте новый созданный frame.jsx Файл и введите в него следующее:

import React from 'react'; // import react module

// create a class which extends react component
class Frame extends React.Component {

  // Render function to creat component to be rendered on the DOM.
  // This method must return a single parent element as you can see here. 
  // The component is wrapped around () to make it a single expression.
  render() {
    return (
      

        

          R_N Calculator
        

      

    );
  }
}

// export our frame component. To be used in our client/index.js file
export default Frame;

Таким образом, выше класс создает компонент реагирования, расширяя класс компонента из модуля React. Компоненты Render описывают, что следует отображать на экране, когда этот компонент загружен в DOM. классное значение Атрибут, найденный на элементах, см. Класс атрибуты на регулярных элементах HTML. Мы будем использовать их при стадии нашего приложения. Наконец, мы экспортируем наши Рамка составная часть. Мы будем использовать его в нашем index.js Файл в корне нашей клиентской папки.

Откройте наш index.js Файл в корне нашей папки клиента и обновить с содержимым ниже:

import React from 'react'; // import React package
import ReactDOM from 'react-dom'; // import ReactDOM package
import Frame from './components/frame'; // import our frame component
import './styles/main.css'; // import our external css file

// using the render method, we will mount this node into our DOM (html file) 
// on the element with id of 'app'
ReactDOM.render(
  , // mount our frame component
  document.getElementById('app')
);

Основные изменения здесь линия 3 , где мы импортируем нашу недавно созданную кадр компонент, а линия 9 , где мы устанавливаем наш кадр, как обычный элемент DOM.

Далее мы создаем наши Экран-ряд составная часть. Создайте файл для удержания содержимого нашего компонента экрана, введя команду ниже в терминал:

$ Touch Client/Компоненты/ScreenRow.jsx

Откройте созданные ScreenRow.jsx Файл в редакторе и обновить его, чтобы содержать содержимое ниже:

import React from 'react';

// Screen row component is written as a functional component
// it receives and displays (in an input field) a props (property) of value from
// it's parent component
const ScreenRow = (props) => {
  return (
    

      
    

  )
}

// we describe the props (property) that the parent element is required to pass
// into this component
ScreenRow.propTypes = {
  value: React.PropTypes.string.isRequired
}

export default ScreenRow;

Там у нас есть наш компонент экрана ряд выше. В отличие от нашего кадра компонента, это функциональный компонент, и мы будем использовать его для отображения информации нашим пользователям (ввод и вывод (ответы)).

Давайте давайте создадим наш компонент кнопки для ввода входов/действий.

Откройте терминал и создайте файл компонента кнопок с помощью команды ниже:

$ Touch Client/Components/Button.jsx

Откройте созданные button.jsx Файл в редакторе и обновить его, чтобы содержать, как показано ниже:

import React from 'react'; // import react module

// create our Button component as a functional component
const Button = (props) => {
  return (
    
  );
}

// describe our expected props types
Button.propTypes = {
  type: React.PropTypes.string.isRequired,
  handleClick: React.PropTypes.func.isRequired,
  label: React.PropTypes.string.isRequired
}

// export our button component.
export default Button;

Наконец, давайте создадим наше экран составная часть. Его работа состоит в том, чтобы помочь нам удерживать обе строки экрана (один, показывающий пользовательский ввод, а другой для вывода).

Откройте терминал и введите команду ниже:

$ Touch Client/Компоненты/Screen.jsx

Это создаст наш экран компонента. Откройте компонент экрана и обновите его, как показано ниже:

import React from 'react'; // Import react module
import ScreenRow from './screenRow';

// Create our screen component as a functional component.
// It would display two screen rows, 1 for questions and the other for the answer
// The value would be passed down from it's parent component as a prop
const Screen = (props) => {
  return (
    

      
      
    

  );
}

// Define our props expected from the parent component
Screen.propTypes = {
  question: React.PropTypes.string.isRequired,
  answer: React.PropTypes.string.isRequired
}

// export our component
export default Screen;

Этот компонент немного отличается от наших других компонентов, потому что он содержит 2 других компонента – Top ScreenRow Чтобы показать вопрос, в типы пользователей и нижний ScreenRow Чтобы показать ответ на вопрос, когда пользователь нажимает кнопку равной.

Теперь пришло время провести все наши компоненты вместе в нашем кадре. Я буду обновлять код для компонента кадра, а затем проводить время, объясняя максимально объяснение кода с помощью комментариев как в коде, так и здесь. Вот обновление Рамка Код компонента:

import React from 'react'; // import react module
import Screen from './screen'; // Import our screen component from this directory
import Button from './button'; // Import our button component from this directory

// create a class which extends react component
class Frame extends React.Component {
  constructor() {
    super();
    // set our default state
    this.state = {
      question: '',
      answer: ''
    }
    // Bind our handleClick method (sets 'this' explicitly to refer to this componenent)
    // We did this because 'this' would refer to the source of the click events
    this.handleClick = this.handleClick.bind(this);
  }

  // Render function to creat component to be rendered on the DOM.
  // This method must return a single parent element as you can see here. 
  // The component is wrapped around () to make it a single expression.
  render() {
    return (
      

        

          R_N Calculator
        

        
        

          
          
          
          
          
          
        

        

          
          
          
          
          
          
        

        

          
          
          
          
          
        

      

    );
  }
  // our method to handle all click events from our buttons
  handleClick(event){
    const value = event.target.value; // get the value from the target element (button)
    switch (value) {
      case '=': { // if it's an equal sign, use the eval module to evaluate the question
        // convert the answer (in number) to String
        const answer = eval(this.state.question).toString();
        // update answer in our state.
        this.setState({ answer });
        break;
      }
      case 'Cls': {
        // if it's the Cls sign, just clean our question and answer in the state
        this.setState({ question: '', answer: '' });
        break;
      }
      default: {
        // for every other commmand, update the answer in the state
        this.setState({ question: this.state.question += value})
        break;
      }
    }
  }
}

// export our frame component. To be used in our client/index.js file
export default Frame;

В линия 1 Мы импортируем наш реактивный модуль. В Линии 2-3 Мы импортировали наши пользовательские компоненты, которые нам понадобится в нашем кадре.

В Строка 7 до 17 Мы определили наш конструктор для этого компонента.

В линия 8 Мы призвали к Super Method, так что наш родительский компонент правильно инициализируется, поскольку наши компоненты распространяются из компонента React.

В линия 10-13 Мы устанавливаем начальное состояние нашего компонента. Вопрос:| Свойство проведет текущий вопрос на основе пользовательских входов, а также Ответ Свойство проведет ответ на вопрос, как только пользователь нажимает на равный знак.

В линия 16 мы устанавливаем явную установку это Значение Handleclick метод. Поскольку этот метод будет вызван в результате события, это В этом контексте будет ссылаться на событие, которое вызывает функцию.

** Lines 22-56 ** Содержать наши оказывать метод. Этот метод содержит то, что мы хотим нарисовать на экране.

В линия 28 У нас есть наш экран составная часть. Если вы проверяете файл компонента экрана, вы будете помнить, что он получает два реквизита – Вопрос:| и Ответ и передает эти реквизиты к ScreenRow составные части. Обратите внимание, что Вопрос:| и Ответ Реквиты из состояния нашего кадра компонента – в результате в любое время значения обновляются в штате, они отражают любой компонент, который их использует.

Линии 21-51 содержит несколько наших Кнопка составные части. Для каждого из них мы проходим Handleclick Метод, определенный в этом компоненте (наше рамка компонент) вниз как реквизиты. Вы также можете проверить реквизиты, необходимые для Кнопка Компонент, проверяя button.jsx Файл в нашей папке компонентов. Так что в любое время любой из наших Кнопка Компонент нажата, Handleclick метод вызывается. Мы также передаем другие необходимые реквизиты нашим Кнопка Компоненты – его этикетка Определяет значение на кнопках и A Тип Свойство различает регулярных входных кнопок ввода и кнопки действия и стиль их соответственно.

Наконец, у нас есть наш Handleclick Метод от Линия 59-80 Отказ На линия 60 мы получаем ценность от элемента, который уволил событие. На линия 61 мы проверяем ценность и используйте его для выполнения различных блоков кода.

От Линия 62-68 мы проверяем, является ли значение = знак. Если это так, мы используем функцию Eval на браузере для выполнения Вопрос:| забрал из государства как есть. Это возвращает значение, на котором мы вызываем TOSTRING метод, так что он преобразуется в Нить

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

От линия 69-73 мы проверяем, является ли значение a CLS Знак, если это так, мы просто сбрасываем вопрос и отвечайте в состояние до значения по умолчанию.

От линия 74-78 Мы обрабатываем все остальные значения в качестве входов вопросов и использовать их для обновления Вопрос:| недвижимость в штате.

Что в основном объясняет наш кадр компонент. Я намеренно добавил классное значение Во всех компонентах для всех, кто хотел бы пойти на шаг дальше и стиль нашего калькулятора, чтобы он выглядел лучше. Просто помню, Класс В обычных HTML & CSS = классное значение в реактивных компонентах.

Теперь мы можем добавить измененные файлы в зону постановки и зафиксировать их. Откройте терминал и введите команды ниже:

$ Git Add. && git commits -m ‘wire up compare кадр “

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

$ npm запустить webpack && npm начать

Бонус

Мы собираемся создать репозиторий GitHUB и поставить наш проект там. GitHub в основном является онлайн-платформой для хранения ваших репозиторий проекта. Перейти к Github и создать учетную запись.

После создания учетной записи просто нажмите кнопку + рядом с изображением профиля в правом верхнем углу и выберите «Создать репозиторий». Введите Реагистрационный калькулятор как имя хранилища и нажмите зеленый Создать репозиторий только внизу страницы.

Это приведет вас к следующей странице с несколькими вариантами, мы будем использовать второй вариант, помеченный … или нажмите существующий репозиторий из командной строки. Вы увидите необходимые команды, которые нам нужно добавить наш проект React-Calculator в Github. Введите эти команды в вашем терминале. Я перечислю их ниже: Первая команда устанавливает проект для отслеживания репозитория GitHUB, а вторая команда нажимает ваш последний код в Github.

Теперь вы должны увидеть ваш репозиторий на GitHub.

Вы также можете найти этот полный проект здесь на github.

Проект, который вы должны иметь прямо сейчас, не будет выглядеть как фантазия, как изображение в посте Отказ Я намеренно оставил стиль калькулятора, чтобы сэкономить время, а также как вызов для читателей. Вы можете найти стиль проекта на Этот филиал GitHub Отказ

Резюме

Чтобы обобщить, мы смогли создать простой калькулятор, используя библиотеку RACT, чтобы создать наш интерфейс и узел для создания нашего сервера. Мы использовали WebPack, чтобы свернуть наши .jsx Файлы для регулярных .js Файл и вписал их в общедоступную папку нашего проекта. Так как мы пишем ES6 И на основе реагирования **. JSX ** Синтаксис, мы настроили Babel для преобразования от тех синтаксиса для регулярного JavaScript, понятого браузера.

Спасибо за прилипание меня через это руководство. Если у вас есть какие-либо вопросы, вы всегда можете оставить комментарий здесь.

Этот пост был первоначально опубликован автором здесь Отказ Эта версия была отредактирована для ясности и может появиться отличаться от исходного поста.

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