kebab-case Шашлычная нотация - что это в программировании. Разделение слов дефисами

kebab-case (Шашлычная нотация) - подход, когда для разделения слов в составных названиях используют дефисы, например название типа "самая главная кнопка", в
это нотации будет записано как:

самая-главная-кнопка

Почему "шашлычная" в принципе понятно: слова как бы нанизаны на ось линии, которую можно построить если объединить все дефисы (как бы видимые части шампура)) между ними одной чертой.

material ui footer center example Футер по центру пример

Неплохой заменой Container с его непонятно как управляемым maxWidth:

javascript Объявление переменных, констант в скобках - фигурные и квадратные, какая разница

В чем разница фигурных (объектных) и квадратных скобок массов:

 // получение в константе classes свойства   props.classes
const { classes, bit1: bit2 } = props;

// получение первых двух элементов myArr в переменных value и value2 соответственно.
const [value, value2] = myArr;

react router redirect from Переадресация с корня (/)

Сработает решение вроде:

import {
   BrowserRouter as Router,
   Route,
   Switch, 
   Redirect,
} from "react-router-dom";

<Router>             
   <Switch>
      <Redirect exact from="/" to='/index'} />
      <Route path='login' component={Login2} />
   </Switch>
</Router>

-- для того чтобы работал from нужно:

webpack encore Настройка пседонима пути для файлов javascript

В Symfony 4.3 можно использовать вызов (webpack.config.js):

Encore
    .addAliases({ // псевдонимы путей для более удобной загрузки 
// вне зависимости от уровня вложенности файл в приложении
        '@universal': path.resolve(__dirname, 'assets/js/react/components/universal'),
      },
    );

После чего вместо путей типа:

import FormSection from '../../../universal/form/FormSection'

использовать:

react Пример компонента с закрывающим тегом

Например (в стиле хуков):

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';


const styles = theme => ({
    formSection: {
        'margin-top': '20px',
    }
});

function FormSection(props) {
    const { classes } = props;

    return (
        <div className={classes.formSection}>
            {props.children} 
        </div>
    );
}

FormSection.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(FormSection);

react hooks Хуки и connect() (redux)


import { makeStyles } from '@material-ui/core/styles';
//............


const useStyles = makeStyles(theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

material-ui Установка npm

Как минимум потребуются:

npm install @material-ui/core
npm install @material-ui/icons

Pages

Subscribe to fkn+antitotal RSS