React с нуля. Начинаем кодить.

картинка из интернетов

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

Сразу предостерегу опытных разработчиков— далее идет лютый говнокод, жесть и бесовщина, но мне нужно пройти через это, чтобы прийти именно с низов к необходимому мне уровню.


Цель, которую выполнил на сегодняшний день: “пощупать” Babel.

Что сделано на данный момент

  • Настроен git. Это оказалось сложным занятием, т.к. до этого я просто использовал “черепашку” Turtoisegit, и проблем не возникало, но зато столкнувшись с консольной работой — огреб кучу непонятных проблем (неспроста ругают windows, есть грешки)
  • Проклят VS Code. Оказалось, он некорректно работает с git-репозиториями при доступе с помощью запароленных ssh-ключей ( использую вот это решение). В остальном — софт хороший, рекомендую.
  • Создан тестовый проект с babel

Что используется:

  • git
  • npm
  • Gulp
  • Babel
  • Sass
  • Необязательные мелкие плюшки (ниже чуть подробнее)

Собственно, код

package.json

{
"name": "ReactTests",
"version": "1.0.0",
"description": "This is react test",
"repository": {
"type": "git",
"url": ""
},
"license": "SEE LICENSE IN LICENSE FILE",
"devDependencies": {
"babel-preset-env": "^1.2.2",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-concat": "^2.6.1",
"gulp-csscomb": "^3.0.7",
"gulp-group-css-media-queries": "^1.1.0",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^2.4.1"
}
}

gulp-autoprefixer, gulp-csscomb, gulp-group-css-media-queries — плюшки для CSS;
gulp-concat — объединялка файлов для JS;
babel-preset-env — базовый презет для babel, необходимый для пробы

gulpfile.js

var gulp = require('gulp'),
sass = require('gulp-sass'),
csscomb = require('gulp-csscomb'),
autoprefixer = require('gulp-autoprefixer'),
gcmq = require('gulp-group-css-media-queries');
sourcemaps = require("gulp-sourcemaps");
babel = require("gulp-babel");
concat = require("gulp-concat");
var path = {
watch: {// за чем следить
js: 'src/js/**/*.js',
styles: 'src/scss/**/*.scss'
},
src: {// что брать
styles: 'src/scss/main.scss',
js: 'src/js/app.js'
},
build: {// куда складывать
js: 'build/js/',
styles: 'build/css/'
}
};
gulp.task('styles', function() {
return gulp.src(path.src.styles)
.pipe(sass({outputStyle: 'expanded', indentType: 'tab', indentWidth: 1}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Safari >= 8'],
cascade: false
}))
.pipe(gcmq())
.pipe(csscomb())
.pipe(gulp.dest(path.build.styles));
});
gulp.task('scripts', function() {
return gulp.src("src/js/app.js")
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat("app.js"))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(path.build.js));
});
gulp.task('default', function() {
gulp.watch(path.watch.styles, ['styles']);
gulp.watch(path.watch.js, ['scripts']);
});

Что тут: нам для начала необходимо генерировать JS и CSS из наших исходников на Babel и SCSS соответственно. Для этого написаны два таска, соответственно scripts и styles.
scripts — берет Babel-код (ES6 уж) из файла src/js/app.js, компилит его в JS и собирает в директорию /build/js/, попутно сохраняя маппинг.
styles — берет SCSS код из /src/scss/main.scss, конвертит в CSS, пропускает через автопрефиксер, объединяет медиа-css, “причесывает” полученный код и сохраняет в /build/css/main.css
Таск default просто запускает “слежение” за исходниками scss и js.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello world</title>
<link rel="stylesheet" href="build/css/main.css">
</head>
<body>
<script src="build/js/app.js"></script>
</body>
</html>

Тут даже расписывать нечего :) пока пусто.

.babelrc

{
"presets": ["env"]
}

Обязательный файл, который указывает Babel, что мы используем конкретный презет.

Итак, тест.

Запускаем gulp командой gulp, ждем пока запустятся таски, и пишем в src/js/app.js (код взят из примера на главной странице проекта Babel):

[1,2,3].map(n => n + 1);

И на выходе в /build/js/app.js видим:

"use strict";
[1, 2, 3].map(function (n) {
return n + 1;
});
//# sourceMappingURL=app.js.map

Работает!


Что я намеренно упускаю:

  • Все, что касается git
  • Все, что касается npm
  • Все, что касается Gulp

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

Что дальше?

Дальше буду подключать ReactJS и пробовать несложный код из статей, пора уже!

Like what you read? Give Artur Valeyev a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.