База знаний

React

let newMessage = React.createRef()

let addMessage = () => {
    alert(newMessage.current.value)
    newMessage.current.value = '';
}

<textarea ref={newMessage}></textarea>
<button onClick={addMessage}>Добавить сообщение</button>

BrowserRouter

npm install react-router-dom

import {BrowserRouter, Route} from "react-router-dom";
import React from "react";

const App = (props) => {


    return (

        <BrowserRouter>
            <div className="app-wrapper">
                <Header/>
                <Navbar/>
                <div className="app-wrapper-content">
                    <Route path="/dialogs" render={ () => <Dialogs state={props.appState.dialogsPage}/>}/>
                    <Route path="/profile" render={ () => <Profile state={props.appState.profilePage}/>}/>
                    <Route path="/music" render={ () => <Music/>}/>
                    <Route path="/news" render={ () => <News/>}/>
                    <Route path="/settings" render={ () => <Settings/>}/>
                </div>
            </div>
        </BrowserRouter>
    );
}


export default App;

NavLink

import {NavLink} from 'react-router-dom';


const Navbar = () => {
    return (
        <nav className={classes.nav}>
            <div className={classes.item}><NavLink to="/profile" activeClassName={classes.active}>Profile</NavLink></div>
            <div className={`${classes.item}`}><NavLink to="/dialogs" activeClassName={classes.active}>Messenges</NavLink></div>
            <div className={classes.item}><NavLink to="/news" activeClassName={classes.active}>News</NavLink></div>
            <div className={classes.item}><NavLink to="/music" activeClassName={classes.active}>Music</NavLink></div>
            <div className={classes.item}><NavLink to="/settings" activeClassName={classes.active}>Settings</NavLink></div>
        </nav>
    )
}

state Example


let postData = [
    {id: 1, message: 'Hi? how are you', likecount: 20},
    {id: 2, message: 'Hoy are bithc', likecount: 20},
    {id: 3, message: 'Learn now', likecount: 20},
];


let dialogs   = [
    {id: 1, name: 'Diva'},
    {id: 2, name: 'Brand'},
    {id: 3, name: 'Her'},
    {id: 4, name: 'Dhe'},
    {id: 5, name: 'Path'}
];


let messagesData   = [
    {id: 1, message: 'Hi'},
    {id: 2, message: 'Hoy are you'},
    {id: 3, message: 'yo'},
    {id: 4, message: 'yo'},
    {id: 5, message: 'yo'}
];

let state = {
    profilePage: {
        postData: postData,

    },
    dialogsPage:{
        dialogs: dialogs,
        messagesData: messagesData
    }
}

export default state;

CSS

CSS sets

20 Amazing Pure CSS Animated Buttons

JS

GetCheckOnId

function getChekedOnId(id) {
    var need = id + ' input:checkbox:checked';
    var needSpectr = [];
    $(need).each(function() {
        needSpectr.push($(this).val());
    });
    return needSpectr;
};

Render option

// text number date

function renderInput(arg) {

return `<input type=»${arg.type}» id=»${arg.id}» placeholder=»${arg.placeholder}»`;

}

// textarea

function renderTextarea(arg) {

return `<textarea placeholder=»${arg.placeholder}» id=»${arg.id}»/></textarea>`;

}

// checkbox

function renderCheckbox(arg) {

return `<label><input type=»${arg.type}» id=»${arg.id}» />${arg.placeholder}</label>`;

}

// select

function renderSelect(arg) {

let render = `<select id=»${arg.id}»>`;

for (let i of arg.data) {

render += `<option>${i}</option>`

}

render += `</select>`;

return render;

}

function searchAndFilter(searchTerm, id) {
    id = id + ' label'
        // variable = #prescriptSelectForm
    $(id).hide()
    if (searchTerm.length == '') {
        $(id).show();
    } else {
        $(id).each(function() {
            var currentText = $(this).text();
            currentText = currentText.toUpperCase();
            searchTerm = searchTerm.toUpperCase();
            if (currentText.indexOf(searchTerm) >= 0) {
                $(this).show();
            }
        });
    }
}

delete double

avalibleGroup = avalibleGroup.filter(function(elem, pos) {
    return avalibleGroup.indexOf(elem) == pos;
});

PHP

SAVE & GET MySQL JSON

<?php
header(‘Access-Control-Allow-Origin: *’);

$data = $_POST[‘data’];
$id= $_POST[‘id’];
$action= $_POST[‘action’];

$link = mysqli_connect(«localhost», «u0414722_tes», «A8c4D7f9», «u0414722_tes»);

if ($link == false){
echo ‘Ошибка: Невозможно подключиться к MySQL’;
}
else {
if($action == ‘save’){
// UPDATE `data` SET `json` = » WHERE `data`.`id` = 1
$sql = «UPDATE `data` SET `json` = ‘$data’ WHERE `data`.`id` = $id»;
mysqli_query($link, $sql);
//echo mysqli_query($link, $sql);

} else if($action == ‘set’){

// $query = ‘SELECT `json` FROM `data` WHERE `id` = 1’;
// SELECT * FROM `u0414722_tes`.`data` WHERE `data`.`json` =

$query = «SELECT `json` FROM `u0414722_tes`.`data` WHERE `data`.`id` = $id»;
$result = mysqli_query($link, $query);
//$data = mysqli_fetch_object($result);
$row = $result->fetch_array(MYSQLI_ASSOC);
echo $row[‘json’];

}

//$sql = ‘UPDATE `data` SET `json` = $data WHERE `data`.`id` = $id’;
//mysqli_query($link, $sql);
//echo ‘update’;
}

mysqli_close($link);