Используя gulp-template, мы увеличиваем скорость разработки, просто создавая шаблоны компонентов и контейнеров. По сути, это повторное использование одних и тех же блоков кода с помощью одной команды.
В этом руководстве вы узнаете, как использовать gulp-template, чтобы избежать создания пустых файлов для каждого нового контейнера и компонента. Этот учебник предназначен только для react-native, однако этот метод можно использовать с любой структурой по выбору.
Кроме того, этот метод очень полезен, если применяется к устаревшей кодовой базе с различными кодовыми блоками, которые сформировали шаблоны.
Начиная.
Сначала создайте проект React Native.
react-native init AwesomeApp
Установите gulp.
npm install --save-dev gulp
Установите другие библиотеки для команды gulp
npm install --save-dev yargs gulp-template gulp-rename
Создайте каталог компонентов и контейнеров.
Составление шаблонов.
Для создания шаблонов gulp-template использует разделители интерполяции.
function <%= functionName %>() {
//Do Something generic
}
Должен быть каталог, в котором хранятся все файлы шаблонов. Итак, создайте в корневом каталоге папку с именем templates.
Шаблоны контейнеров
В основном наши контейнеры обрабатывают большую нагрузку на компоненты, такие вещи, как запрос данных или получение сохраненных в автономном режиме изображений, обрабатываются контейнером.
import React, { Component } from ‘react’;
import {
View,
Text
} from ‘react-native’;
class <%= upCaseName %>Container extends Component {
constructor(props) {
super(props);
}
render () {
return (
<<%= containerComponentName %>>
</<%= containerComponentName %>>
);
}
}
export default <%= upCaseName %>Container;
Поскольку наш контейнер будет подключен к внешнему ресурсу, важно добавить в контейнер индикатор активности для хорошего UX.
import React, { Component } from ‘react’;
import {
View,
fetch,
ActivityIndicator,
ToastAndroid
} from ‘react-native’;
class <%= upCaseName %>Container extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
data: []
}
}
componentDidMount() {
this._loadData();
}
_loadData() {
this.setState({ isLoading: true });
fetch(“//SOME_API”)
.then(( data )=> {
this.setState({ data });
})
.catch(()=> {
ToastAndroid.show(“Cannot Load Data”,ToastAndroid.SHORT);
});
}
_renderIndicator() {
if (this.state.isLoading) {
return (
<ActivityIndicator />
)
}
}
render() {
return(
<View>
{this._renderIndicator()}
<<%= containerComponentName%> data={this.state.data} />
</View>
)
}
}
export default <%= upCaseName %>Container;
Шаблон компонента
В зависимости от дизайна приложения наше представление компонентов может быть простым списком или списком карточек. Интересно то, что если нам нужно реализовать этот список, мы можем использовать команду gulp для его создания.
import React, { Component } from ‘react’;
import {
View,
Text
} from ‘react-native’;
class <%= upCaseName %> extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
{this.props.data.map((item, i)=> {
return (<Text key={i}>{item}</Text>)
})}
</View>
)
}
}
export default <%= upCaseName%>;
Создание команды gulp
Создайте Gulpfile.js. В нем мы определяем путь для шаблонов и целевые каталоги для скомпилированных файлов.
Кроме того, с помощью библиотеки yargs мы можем получить аргументы, переданные задаче gulp.
Наконец, мы будем использовать библиотеку gulp-template для создания скомпилированной версии файлов шаблонов и перемещения их в соответствующие каталоги.
var gulp = require(‘gulp’);
var path = require(‘path’);
var yargs = require(‘yargs’).argv;
var tpl = require(‘gulp-template’);
var rename = require(‘gulp-rename’);
var paths = {
container: ‘templates/container.js’,
component: ‘templates/component.js’
}
var dest = {
container: ‘containers’,
component: ‘components’
}
gulp.task(‘create’, function(){
var cap = function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
};
var name = yargs.name;
var type = yargs.type || ‘component’;
var destPath = dest[type];
return gulp.src(paths[type])
.pipe(tpl({
name: name,
upCaseName: cap(name)
}))
.pipe(rename(function(path){
path.basename = path.basename.replace(type, name);
}))
.pipe(gulp.dest(destPath));
});
После создания задачи gulp мы можем запустить команду create для создания новых контейнеров и компонентов.
gulp create --name Home
Это создаст новый компонент с именем home в каталоге компонентов. Также мы можем указать тип контейнера.
gulp create --name Home --type container
Это создаст контейнер в каталоге контейнера.
Вывод
Это руководство представляет собой пошаговое руководство по использованию gulp-template для повторного использования блоков кода для проектов, поддерживающих реакцию. Самая важная часть - задача gulp, которая использует библиотеки gulp-template, yargs и rename для создания скомпилированных шаблонов.
