Автор оригинала: Usheninte Dangana.
Люди любят смотреть на изменение мира как большую задачу. Я считаю, что изменение мира может быть сделано в маленьких шагах.
Ключ определяет проблему и принимает небольшой шаг.
Мое путешествие началось в пятницу, 7 сентября 2018 Отказ Это был день, когда я решил построить React Plugin для Test Suite FreeCodecamp. Я заметил проблему, и я принял меры.
Есть Рабочая версия Для установки на реестр менеджера по узлам пакета. Это этама для меня, так как проект является моим первым вкладом с открытым исходным кодом.
Я использовал определенные ключевые технологии для создания проекта, например, WebPack, React, NPM и Node.js. Мне было много веселья, зная его, и я тоже многому научился.
Я несколько раз пробовал (на самом деле день), прежде чем я даже удался сделать работу плагина.
После того, как он работал, внедрение в реактивный приложение было проблемой. Хотя я столкнулся с техническими трудностями, в конце концов, плагин работал.
Процесс
Идея проекта была проста. Все, что я хотел сделать, было найти простой способ добавить тестовый люкс FreeCodecamp для реагирования приложений.
Мой первый план состоял в том, чтобы построить его с помощью Create-React-App.
Я чувствовал, что, поскольку я мог использовать его для создания приложений React, я мог бы использовать его, чтобы построить плагин. Я был неправ.
Create-React-App был слишком тяжелым для того, что мне нужно было построить.
Я обнаружил, что для того, чтобы плагин легко экспортировать, мне понадобится дополнительная конфигурация.
Я пошел в интернет и гуглил пару раз и наступил на Убен и реактивный шлем. То, что я наткнулся, был удивительным, так и запутанным, сначала.
Тем не менее, я знал, что они были то, что мне нужно. Я продолжил искать еще немного.
Перед WebPack я пробовал экспортировать и публиковать плагин в качестве модуля без дополнительной конфигурации. Это не работает. Новичок ошибку, я знаю.
Это была большая проблема, которую я должен был преодолеть.
К счастью, мы узнаем, как расти!
Хотя я разрабатываю плагин, были постоянные порезы питания. В Нигерии силовая ситуация не очень урегулирована.
Мне пришлось работать до тех пор, пока мой ноутбук не выключен, то глубоко подумайте о том, что делать, когда возвращается сила.
Все это произошло во второй день (суббота).
Магия, красота
Используя WebPack, я начал строить плагин.
Я поместил код ядра в файл index.js. Вот код ниже:
import React from 'react';
import { Helmet } from 'react-helmet';
import './styles.css';
const ReactFCCtest = () => {
return (
react-fcctest running
);
};
export default ReactFCCtest;Код выше было всем, что мне нужно было добавить скрипт к тегу головки любого приложения raction i.
Я наткнулся на Статья о среднем Это была большая помощь для меня.
Это помогло мне понять, как использовать WebPack для создания модуля узла, который я мог бы успешно опубликовать реестр менеджера по пакетам узла.
Я следовал инструкциям в этой статье. После внесения некоторых изменений я построил следующее webpack.config.js файл:
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "demo/src/index.html"),
filename: "./index.html"
});
module.exports = {
entry: path.join(__dirname, "demo/src/index.js"),
output: {
path: path.join(__dirname, "demo/dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [htmlWebpackPlugin],
resolve: {
extensions: [".js", ".jsx"]
},
devServer: {
port: 3001
}
};Позвольте мне объяснить, что делает этот файл:
>> Во-первых, он использует HTMLWebPackPlugin, чтобы создать HTML-файл для обслуживания моего пакета WebPack.
>> Затем он экспортирует плагин, который я создал в виде модуля узла.
>> Это говорит, что точка входа в мою плагин находится в месте Demo/SRC/index.js Отказ Это означает, что именно здесь будет привлечен код.
>> Далее говорят, что выходной каталог моего плагина Демо/св . В этом каталоге React-Fcctest Плагин будет экспортирован в файл с именем bundle.js Отказ
>> Затем он вводит набор правил для файла, который должен быть экспортирован.
>> Правила, сообщите файлу делать две вещи. Один, используйте Babel-Loader при работе с .js и .jsx файлы и не включают node_modules. папка. Два, используйте стиль-погрузчик и CSS-погрузчик при работе с .css файлы.
>> Разрешение и расширения часть файла позволили мне уйти из .js и .jsx. С конца моих файлов при импорте их.
>> Наконец, мой сервер развития был на порту 3001. Этот порт мог быть любым другим из моих выбора.
Я добавил WebPack к проекту в воскресенье, а затем работал плагин!
С этим я смог создать модуль, который может быть легко экспортирован. Этот модуль был Reactfccctest. .
Я не могу сказать, сколько Подробнее – спросите Методология помогла мне по всему проекту.
Вот Демо готового плагина. Это было очень весело построить.
Я проверил его в проекте FreeCodecamp, и он отлично работал.
Я создал Github Repository Это содержит весь открытый исходный код для проекта.
Как установить и использовать «React-Fccctest»
Беги NPM I Rect-FCCTEST или пряжа добавьте реактивный FCCTEST Чтобы установить React Plugin.
Место Импортировать ReactFCCTEST от «реагирования на FCCTEST»; В вашем приложении.
import React, { Component } from 'react';
import ReactFCCtest from 'react-fcctest';
class App extends Component {
render() {
return (
Это все, что есть к этому!
Финальные ноты
Мой 2018 до сих пор был удивительным.
Теперь я являюсь студенческим клубом разработчика для моего университета, в программе, работающей на Google Developers в южном сахаре Африке.
Я стремлюсь к величию, в космосе – возможно, я мог бы просто приземлиться на луну. Следуй за мной в моем путешествии.
Оригинал: “https://www.freecodecamp.org/news/change-the-world-one-line-of-code-at-a-time-5162b229f35e/”