Автор оригинала: Oyeniyi Abiola.
В последнем посте Что нужно знать в JavaScript Я говорил о некоторых необходимых знаниях JavaScript для производительности в кодовой базе RECT. Сегодня мы собираемся начать наше путешествие в использование inventjs, чтобы построить простую и доступную каталог продукции. Этот пример был извлечен из документации RACT, Думать в реакции Отказ
Прежде чем мы начнем строить наше приложение, нам нужно настроить все необходимые библиотеки.
Простой макет проекта выглядит так:
index.html.
My First React Application
index.js.
const MyApp = createReactClass ({
render(){
return Hello from React {React.version}
}
})
ReactDOM.render(
Нам нужно обеспечить, чтобы оба файла были в одной папке. Я предполагаю, что наши файлы в папке с именем Первое реактивное приложение Отказ
Нам также необходимо убедиться, что этот проект работает на фактическом веб-сервере. Есть много способов раскрутить веб-сервер, но давайте пойдем с простым подходом – предполагая, что у нас установлен Python.
В нашем клемме/командной строке введите следующие команды:
# Assumming python 2 cd first-react-app # the name of our project python -m SimpleHTTPServer # Assumming python 3 cd first-react-app python -m http.server
Мы должны получить следующее, когда мы посещаем http://localhost: 8000 (8000 – порт по умолчанию, если мы ничего не указываем)
С вышеупомянутым работой мы можем начать процесс построения нашего фактического применения. Я пройду через мыслительный процесс и объяснил новые конструкции, в которые мы столкнулись, а также строительные блоки нашего приложения.
Добавление тегов скрипта на нашу HTML-страницу гарантирует, что Реагировать, реагировать и создавать метрактКакласс Глобально доступны для всех наших файлов JavaScript.
В нашем index.js мы бежим в специальную конструкцию Здравствуйте, от React {Rect.Version} Отказ Это известно как Jsx Отказ Мы можем думать об этом как HTML в нашем файле JavaScript. Сценарии Babel включают https://unpkg.com/babel-standalone @ 6.24.2/babel.min.js Отказ Это помогает преобразовать JSX в реальные объекты JavaScript. Мы будем использовать JSX, потому что он очень похож на HTML.
Я бы начну с начала с конечного результата и работаю назад.
Я удалю все в нашем index.js и заменить его следующим.
const React = window.React;
const ReactDOM = window.ReactDOM;
const createReactClass = window.createReactClass;
const MyApp = createReactClass({
render() {
return (
Name
Price
Sporting Goods
Football
$49.99
Baseball
$9.99
Basketball
$29.99
Electronics
Ipod Touch
$99.99
Iphone 5
$399.99
Nexus 7
$199.99
);
}
});
ReactDOM.render(Это статическая реализация того, что мы пытаемся построить. Мы еще ничего не делаем, и большинство вещей все еще будут выглядеть благодаря нам.
MyApp известен как Актуальный компонент Отказ Мы могли бы подумать об этом как о нашем собственном пользовательском HTML-теге, который знает, как реализовать конкретную функциональность, как и любой инфукторский тег HTML.
В конце файла мы вводим наш компонент в DOM. Если мы посмотрим на наш HTML-файл, есть пустой элемент div с идентификатором корень Отказ Мы можем получить доступ к этому элементу HTML/DOM через JavaScript, используя Inbuilt DOM API Документ. GteletelementbyId и указав идентификатор элемента в качестве параметра.
Мы можем поэкспериментировать на вкладке консоли в браузере, запущенном нашим скриптом, чтобы убедиться, что это работает.
Предполагая, что мы более знакомы с Jquery И более комфортно, используя его, чтобы запросить элементы из DOM, то последняя строка становится этим: Reactom.runder ( Отказ Мы хотим ограничить наше использование jQuery, потому что RegiveS является более мощной альтернативой.
Reactom.runder Является ли то, что отвечает за наличие нашего компонента в домо. Принимает два параметра, компонент (в нашем случае MyApp ) и узел DOM.
Мы будем использовать карта Чтобы уменьшить нашу бойную статическую реализацию.
Давайте изменим реализацию MyApp к коду ниже.
const MyApp = createReactClass({
render() {
const items = [
{ name: "Football", price: "$49.99" },
{ name: "Baseball", price: "$9.99" },
{ name: "Basketball", price: "$29.99" },
{ name: "Ipod Touch", price: "$99.99" },
{ name: "Iphone 5", price: "$399.99" },
{ name: "Nexus 7", price: "$199.99" }
];
const first3Items = items.slice(0, 3);
const last3Items = items.slice(3, items.length);
return (
Name
Price
Sporting Goods
{first3Items.map((item, index) =>
{item.name}
{item.price}
)}
Electronics
{last3Items.map((item, index) =>
{item.name}
{item.price}
)}
);
}
});
В приведенном выше реализации я извлекил фактические данные в виде массива объектов JavaScript. Затем я решил разделить массив на две массивы. Это временное решение, которое мы решим позже, но сейчас легко следовать. Используя карта Метод на объектах массива я затем преобразовал каждый объект в массиве в представление JSX. При создании массива объектов JSX React требует добавления параметра ключа на узел, который должен быть уникальным, следовательно, наш пользовательский ключ атрибут.
Если мы внимательно посмотрим на нашу текущую реализацию, я все еще дублирую код ниже:
{item.name} {item.price}
Мы можем упростить это, извлечение этого дубликата и созданию из него компонента реагирования, как показано ниже:
const Row = item => {
return (
{item.name}
{item.price}
);
};
MyApp Компонент сейчас становится:
Рисунок Б.
const MyApp = createReactClass({
render() {
const items = [
{ name: "Football", price: "$49.99" },
{ name: "Baseball", price: "$9.99" },
{ name: "Basketball", price: "$29.99" },
{ name: "Ipod Touch", price: "$99.99" },
{ name: "Iphone 5", price: "$399.99" },
{ name: "Nexus 7", price: "$199.99" }
];
const first3Items = items.slice(0, 3);
const last3Items = items.slice(3, items.length);
return (
Name
Price
Sporting Goods
{first3Items.map((item, index) =>
|
)}
Electronics
{last3Items.map((item, index) =>
|
)}
);
}
});
Я создал новый компонент под названием Ряд Используя Altenative Syntax для создания компонента в реакцию, что буквально просто функция. Эта функция принимает объект, который представляет то, что мы хотим ввести в этом случае, Имя и Цена Отказ
Мы можем полностью удалить потребность в разделении оригинального массива, выполнив следующие
const Category = item => {
return (
{item.category}
);
};
const MyApp = createReactClass({
render() {
const items = [
{ name: "Football", price: "$49.99", category: "Sporting Goods" },
{ name: "Baseball", price: "$9.99", category: "Sporting Goods" },
{ name: "Basketball", price: "$29.99", category: "Sporting Goods" },
{ name: "Ipod Touch", price: "$99.99", category: "Electronics" },
{ name: "Iphone 5", price: "$399.99", category: "Electronics" },
{ name: "Nexus 7", price: "$199.99", category: "Electronics" }
];
let rows = [];
let lastCategory = null;
items.forEach((item, index) => {
if (item.category !== lastCategory) {
rows.push(|
);
lastCategory = item.category;
});
return (
Name
Price
{rows}
);
}
});
Хорошо, что только что произошло? Ну, это на самом деле довольно просто. Я объясню все, что происходит.
Я извлек разделы категории в компонент под названием Категория Отказ Предполагая, что мы работали с Рисунок B Реализация После создания этого компонента, раздел Render в нашем MyApp Компонент выглядит так:
return (
Name
Price
{|
)}
|
)}}
)
Так как все элементы внутри Тобб Теги рядом друг с другом, я
Приведенное выше можно представить как массив меток JSX, если мы помним, как добавить ключ Атрибут каждому из них – REVENTJS требует этого при работе с массивом меток JSX. Мы могли бы переписать наш метод Render в MyApp в дальнейшем:
render(){
...
const rows = [
|
,
|
,
|
,
|
,
|
,
|
,
]
return (
Name
Price
{rows}
)
}
JSX – это просто JavaScript, поэтому мы можем манипулировать им так, как мы делаем для регулярных объектов JavaScript.
Конечная вещь – выяснить, как трансформироваться:
const items = [
{ name: "Football", price: "$49.99" },
{ name: "Baseball", price: "$9.99" },
{ name: "Basketball", price: "$29.99" },
{ name: "Ipod Touch", price: "$99.99" },
{ name: "Iphone 5", price: "$399.99" },
{ name: "Nexus 7", price: "$199.99" }
];
в
[, ,
,
,
, ,
,
, ]
Первое, что я сделал, я добавил дополнительный категория Поле к каждому объекту в массиве, который дал это:
const items = [
{ name: "Football", price: "$49.99", category: "Sporting Goods" },
{ name: "Baseball", price: "$9.99", category: "Sporting Goods" },
{ name: "Basketball", price: "$29.99", category: "Sporting Goods" },
{ name: "Ipod Touch", price: "$99.99", category: "Electronics" },
{ name: "Iphone 5", price: "$399.99", category: "Electronics" },
{ name: "Nexus 7", price: "$199.99", category: "Electronics" }
];
Затем я создал переменную под названием Ряды и инициализировал его как пустой массив. Это где мы в конечном итоге сбрасываем трансформированные предметы.
Я также создал переменную LastCategory Удерживать значение текущей категории.
Затем я использовал использование foreach Метод доступен для массивов JavaScript для цикла через каждый из элементов Предметы и заполнить Ряды множество.
let rows = [];
let lastCategory = null;
/* Going through each item in the items array*/
items.forEach((item, index) => {
/* I am checking if the category of the first item is equal to the lastCategory.
If not, then I add a Category component to the rows array. */
if (item.category !== lastCategory) {
rows.push(|
);
/*I finally updated the value of lastCategory` to the value of the current item category in the loop.*/
lastCategory = item.category;
});
И именно то, как я прибыл в упрощенное решение.
index.js.
const React = window.React;
const ReactDOM = window.ReactDOM;
const createReactClass = window.createReactClass;
const Row = item => {
return (
{item.name}
{item.price}
);
};
const Category = item => {
return (
{item.category}
);
};
const MyApp = createReactClass({
render() {
const items = [
{ name: "Football", price: "$49.99", category: "Sporting Goods" },
{ name: "Baseball", price: "$9.99", category: "Sporting Goods" },
{ name: "Basketball", price: "$29.99", category: "Sporting Goods" },
{ name: "Ipod Touch", price: "$99.99", category: "Electronics" },
{ name: "Iphone 5", price: "$399.99", category: "Electronics" },
{ name: "Nexus 7", price: "$199.99", category: "Electronics" }
];
let rows = [];
let lastCategory = null;
items.forEach((item, index) => {
if (item.category !== lastCategory) {
rows.push(|
);
lastCategory = item.category;
});
return (
Name
Price
{rows}
);
}
});
ReactDOM.render(Надеюсь, это намотало наши ноги в захватывающий мир реагирования! Рейс охватывает гораздо больше, чем то, что я могу упомянуть в этом руководстве, но с тем, что мы узнали в этом руководстве, более чем достаточно для дизайнеров, чтобы начать строительные компоненты в реакции.
Чтобы узнать больше о реагировании, посетить Документация И пройдите через ссылки на боковой панели.
GO Создайте некоторые компоненты реагирования !!