Skip to content

Instantly share code, notes, and snippets.

View REST_API_template.adoc

Method Title

Table of Contents

Description

Additional information about your API call.

  • URL

View brc-button-touch.js
// touch.blocks/Button/Button.js
import { decl } from 'bem-react-core';
export default decl({
block : 'Button',
willInit() {
this.state = {};
this.onPointerpress = this.onPointerpress.bind(this);
this.onPointerrelease = this.onPointerrelease.bind(this);
View BEM for beginners.md

BEM for beginners. Why you need BEM

BEM is a hero in frontend world. It brings a system approach in you project and keeps it from the mess. ©

BEM makes your code scalable and reusable, thus increasing productivity and facilitating teamwork. Even if you are the only member of the team, BEM can be useful for you. Nevertheles many developers believe that such a systematic approach like BEM puts additional boundaries on their project and makes your project overloaded, cumbersome and slow.

Is BEM a Hero or a Villain? It's up to you! But first read the article.

BEMBatman

View dist.md

Подключаем BEM React Core ссылками с CDN

Документ описывает, как подключать предсобранные файлы библиотеки bem-react-core с CDN и как работать с библиотекой, не используя сборку.


Подключение библиотеки

Чтобы подключить библиотеку bem-react-core, создайде локально HTML-файл и скопируйте следующие ссылки в HTML-код страницы:

View ClientBemReactCore.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<script src="https://unpkg.com/bem-react-core@1.0.0-rc.8/umd/react.js"></script>
</head>
View client.react.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<script src="https://unpkg.com/bem-react-core@1.0.0-rc.8/umd/react.js"></script>
</head>
View hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem-components as a library</title>
</head>
<body>
<!-- Блок hello для создания формы приветствия -->
<form class="hello i-bem" data-bem='{ "hello": {} }'>
<div class="hello__greeting">Hello, %user name%!</div>
View head.html
```language-diff
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem-components as a library</title>
+<link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
+<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js"></script>
</head>
</html>
View hello.css
.hello {
color: green;
padding: 10%;
}
.hello__greeting {
margin-bottom: 12px;
}
View index-6.bemjson.js
module.exports = {
block: 'page',
title: 'Title of the page',
favicon: '/favicon.ico',
head: [
{ elem: 'meta', attrs: { name: 'description', content: '' }},
{ elem: 'css', url: 'index.min.css' }
],
scripts: [{ elem: 'js', url: 'index.min.js' }],
content: [