Автор оригинала: George Muresan.
React – это отличный новый способ написать интерфейс вашего приложения. Это позволяет вам отделить каждый компонент вашего интерфейса на отдельный класс, что снижает сложность, которую вам нужно беспокоиться в любое время. Вы можете свободно вносить изменения в один компонент без необходимости беспокоиться о том, как это повлияет на любую другую часть вашего сайта.
Большинство учебных пособий по реагированию фокусируются на начала с пустой веб-страницы на своем собственном веб-сайте и добавление собственного HTML-кода для создания пользовательского интерфейса. Сегодня я покажу вам, как использовать React, чтобы добавить несколько интерфейсов на вершину текущего веб-сайта. Мы собираемся сделать это, создав Chrome расширение , что является небольшой программной программой, которая может модифицировать и улучшать функциональные возможности браузера Chrome. После этого учебника вы должны быть в состоянии легко взять то, что вы узнали, и используете реагирование на создание расширений Firefox и Safari с небольшим модификацией.
Наше расширение будет работать на вершине Craigslist. Это позволит вам делать заметки о списках, которые вы просматривали, и просматривать эти заметки, когда вы просматриваете список. Вы можете взять завершенный проект на Github Отказ
Настройка проекта
Вы собираетесь захотеть создать новую папку для вашего проекта. Для этого учебника я буду использовать следующую структуру проекта
tutorial/ app/ coffee/ craigslist_listing.coffee scss/ craigslist_listing.scss res/ manifest.json package.json Brocfile.js
Package.json.
Как и в случае любого реагирования проекта, мы будем использовать Package.json Файл Чтобы описать наш проект и управлять нашими внешними зависимостями. Давайте начнем с голого файла, а затем добавим наши зависимости после.
{ "name": "tutorial", "description": "chrome extension", "version": "0.0.1", "author": "gmuresan", "license": "ISC", "main": "", "private": true, "scripts": {}, "dependencies": {} }
Теперь давайте добавим библиотеки, которые мы будем использовать. Сначала давайте установим отреагируйте.
npm install --save-dev react react-dom
Так как мы будем использовать CoffeeScript и Jsx Для наших файлов React нам нужен способ преобразовать эти файлы в JavaScript, чтобы браузер может понять и запустить код. Для этого мы будем использовать Брокколи Отказ Чтобы установить брокколи, используйте следующие две команды в каталоге вашего проекта.
npm install -g broccoli-cli npm install --save-dev broccoli
Теперь, когда Broccoli установлена, нам также необходимо добавить все библиотеки, которые Broccoli необходимо компилировать наши файлы CoffeeScript и SASS, а также упаковать наши файлы вместе, чтобы Chrome может установить расширение.
npm install --save-dev broccoli-sass broccoli-fast-browserify broccoli-merge-trees broccoli-funnel coffee-reactify broccoli-timepiece
Файл манифеста
Манифест – это сердце любого хромированного расширения. Это говорит хром “Вот что я есть, и вот что мне нужно работать”. Наш файл будет расположен в res/mainest.json
Отказ
{ "manifest_version": 2, "name": "Craigslist Notes Extension", "description": "This Extension will allow you to write notes about different Craigslist listings and view those notes on the page", "version": "1.0", "permissions": [ "activeTab" ], "content_scripts": [ { "matches": ["*://*.craigslist.org/*.html"], "css": ["craigslist_listing.css"], "js": ["craigslist_listing.js"] } ] }
-
Разрешения
Свойство скажет Chrome, что наше расширение необходимо запускать свои скрипты на текущей активной вкладке в Chrome. -
Content__Scripts
Свойство скажет Chrome, что когда URL-адрес текущей страницы соответствует определенному шаблону, то мы хотим ввести определенные файлы JavaScript и HTML. В этом случае, когда URL является списком Craigslist, то мы хотим ввести нашиcraigslist_listing.css
иcraigslist_listing.js
файлы.
Создание проекта с брокколи
Мы собираемся использовать Brocfile.js, чтобы сказать брокколи, как мы хотим, чтобы наш проект был построен. Брокколи будет компилировать наши файлы SASS в CSS, он возьмет наши файлы CJSX и преобразует их в обычные файлы CoffeeScript, а затем превращает эти файлы CoffeeScript в файлы JavaScript, и, наконец, он будет скопировать эти компиляционные файлы вместе с любыми статическими файлами, которые мы имеем в Наш выходной каталог.
// Import some Broccoli plugins var compileSass = require('broccoli-sass'); var mergeTrees = require('broccoli-merge-trees'); var Funnel = require('broccoli-funnel'); var browserify = require('broccoli-fast-browserify') // Specify the Sass and Coffeescript directories var sassDir = 'app/scss'; var coffeeDir = 'app/coffee'; var manifest = 'manifest.json'; var resources = 'res' // Tell Broccoli how we want the assets to be compiled var clListingStyle = compileSass([sassDir], 'craigslist_listing.scss', 'craigslist_listing.css'); var scripts = browserify(coffeeDir, { bundles: { "load_craigslist_listing.js": { transform: [ require('coffee-reactify') ], entryPoints: ['load_craigslist_listing.coffee'] }, "load_craigslist.js": { transform: [ require('coffee-reactify') ], entryPoints: ['load_craigslist.coffee'] } } }); var resourceFiles = new Funnel(resources, { //destDir: resources }); // Merge the compiled styles and scripts into one output directory. module.exports = mergeTrees([clListingStyle, scripts, resourceFiles]);
Содержание скриптов
Теперь мы собираемся создать наши файлы CoffeeScript и Sass, которые содержат фактические функциональные возможности нашего расширения Chrome. Первый craigslist_listing.coffee
:
ReactDOM = require 'react-dom' React = require 'react' CLNotes = React.createClass({ displayName: 'CLNotes' getInitialState: -> notes: [] render: ->saveNote: (note) -> notes = @state.notes notes.push(note) @setState notes: notes }) NoteInput = React.createClass({ displayName: 'NoteInput' getInitialState: -> note: '' render: -> noteChanged: (event) -> note = event.target.value @setState note: note saveNote: -> @props.saveNote(@state.note) @setState note: '' }) NotesDisplay = React.createClass({ displayName: 'NotesDisplay' render: ->{ @props.notes.map (note, i) ->}) # Here we find the 'mapAndAttr' div, we insert our own div as one of it's children, # then we render our React component inside the new div attrsDiv = window.document.getElementsByClassName('mapAndAttrs')?[0] if attrsDiv notesDiv = document.createElement('div') notesDiv.id='clNotes' attrsDiv.appendChild(notesDiv) ReactDOM.render({note}}document.getElementById('clNotes') )
Мы начинаем с нашим верхним уровнем реагировать компонент «CLNETES». Это содержит два дочерних компонента, один для отображения наших заметок и один для ввода новых заметок. Далее приходите наши входные и отображаемые компоненты и логика для сохранения нот и отображения всех наших текущих заметок.
В нижней части файла после компонентов реагирования у нас есть код, который выполняется, когда страница загружена. Здесь мы вставляем новый Div внутри страницы списка, а затем мы визуализируем наш компонент React Intover в этом новом Div.
Наше craigslist_listing.scsss
Файл очень прост. Мы просто добавим некоторую стайлинг, чтобы сделать фон серого, а установить размеры наших компонентов.
#clNotes { width: 300px; height: 300px; background-color: lightgrey; padding:15px; } #notesDisplay { width:270px; height: 230px; background-color: white; overflow-y: scroll; }
Установка и запуск нашего хромированного расширения
Сначала нам нужно скомпилировать наши файлы, используя брокколи. Внутри каталога проекта в терминале вы запускаете
broccoli-timepiece dist/
Эта команда будет составлять наш проект в Dist/
каталог, и он будет автоматически перекомпилировать проект, если вы внесите какие-либо будущие изменения.
После этой команды преуспевает, откройте Chrome и перейдите к Chrome://Расширения
Отказ В правом верхнем углу убедитесь, что «Режим разработчика» выбран, затем нажмите «Загрузить распакованный расширение …». Перейти к нашему Dist/
Папка, выберите ее и нажмите ОК.
Теперь откройте список Craigslist (например, https://sfbay.craigslist.org/scz/rue/5295933277.html ). Вы должны увидеть серый ящик справа от изображений, где вы можете ввести текст, а затем отображать в списке, нажав кнопку Сохранить.
Следующие шаги
Это расширение сейчас не очень полезно. Примечания не сохранят, если вы перемещаетесь от страницы. Как дальнейшее обучение, попробуйте сохранить свои заметки на сервере, например Разбор и загрузить их на страницу, когда страница загружает.
Если вы собираетесь создать большее расширение со многими компонентами реагирования, я бы также смотрел в механизм хранения состояния, такими как Redux Отказ