Приложение показывает страницу приветствия с изображением животного


У меня есть приложение, которое показывает страницу приветствия с изображением животного. Также, мы можем перейти на второй вид, где есть две холстины, и панель складные в котором проводятся входы управления.

Цель данного приложения будет загружать изображения на холсте, и позволяет пользователю нажать на нее, а во втором, часть будет цветной, а его имя будет написано в текстовой области.

В настоящее время я экспериментирую с реагировать, потому что я недавно сделал проект с JS на jQuery, Bootstrap и я думал, что это был беспорядок, потому что мы встроены скрипты в HTML.

Я опишу, как оно устроено, и затем я попрошу вас предложить:

index.html:

<!doctype html>

<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Atlas</title>
    <meta name="description" content="Atlas">
    <meta name="author" content="">
</head>

<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="mainApp"></div>
</body>
</html>

Как вы можете видеть, что это просто шаблон, и Bootstrap.

Мой index.js реагировать точка входа:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/react-dropdown/style.css';
import {Header} from './Header'
import {Main} from './Main'
import {BrowserRouter} from 'react-router-dom'


const App = () => {

    return (
        <div>
            <Header/>
            <Main/>
        </div>
    );
};

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>

    , document.getElementById("mainApp"));

Как вы могли видеть, я следовал образцу разделяя его на верхний и главное, использовать навигацию и реагировать маршрутизатор.

Заголовок панели навигации:

import React from 'react';
import {Link} from "react-router-dom";
import {Navbar} from 'react-bootstrap'
import NavDropdown from "react-bootstrap/es/NavDropdown";
import Nav from "react-bootstrap/es/Nav";
import MenuItem from "react-bootstrap/es/MenuItem";

const Header = () => {
    return (
        <Navbar>
            <Nav>

                <NavDropdown eventKey={3} title="Atlas" id="basic-nav-dropdown">
                    <MenuItem eventKey={3.1}><Link to='/'>Inicio</Link></MenuItem>
                    <MenuItem eventKey={3.2}>
                        <li><Link to='/caballo'>Caballo</Link></li>
                    </MenuItem>
                </NavDropdown>
            </Nav>
        </Navbar>
    );
};

export {Header}

Основа содержит контуров и компонентов для визуализации:

import React from 'react';
import {Inicio} from "./Inicio";
import {Caballo} from "./Caballo";
import Switch from "react-router-dom/es/Switch";
import Route from "react-router-dom/es/Route";

const Main = () => {
    return (
        <main>
            <Switch>
                <Route exact path='/' component={Inicio}/>
                <Route exact path='/caballo' component={Caballo}/>
            </Switch>
        </main>
    );
};

export {Main}

Начало по умолчанию ИМГ животного:

import React from 'react';
import './index.css';

const Inicio = () => {
    return (
        <img src="https://misanimales.com/wp-content/uploads/2017/09/cuarto-de-milla.jpg" alt=""/>
    );
};

export {Inicio};

И Кабаллы, где самые приложения:

import React from 'react';
import './index.css';
import Dropdown from 'react-dropdown';
import '../node_modules/react-dropdown/style.css';
import {ImageUpload} from "./ImageUpload";
import Panel from "react-bootstrap/es/Panel";
import Button from "react-bootstrap/es/Button";


class Caballo extends React.Component {
    state = {open: true};
    options = [
        'one', 'two', 'three'
    ];

    render() {
        return (
            <main>
                <header>
                    <div style={{display: "flex"}}>
                        <h3>Suba una imagen desde el ordenador, para
                            mostrarla:
                        </h3>
                        <div style={{display: "flex", justifyContent: "flex-end", width: "100%"}}>
                            <Button
                                onClick={() => {
                                    this.setState({open: !this.state.open});
                                    const divCanvas = document.getElementsByClassName("previewComponent");
                                    const innerCanvas = document.getElementsByTagName("canvas");
                                    if (divCanvas && innerCanvas) {
                                        const width = divCanvas[0].offsetWidth;
                                        if (!this.state.open) {
                                            const newWidth = width - 200 + "px";
                                            divCanvas[0].setAttribute("style", `width:${newWidth}`);
                                            divCanvas[1].setAttribute("style", `width:${newWidth}`);
                                            innerCanvas[0].setAttribute("style", `width:${newWidth}`);
                                            innerCanvas[1].setAttribute("style", `width:${newWidth}`);
                                        }
                                        if (this.state.open) {
                                            const newWidth = width + 200 + "px";
                                            divCanvas[0].setAttribute("style", `width:${newWidth}`);
                                            divCanvas[1].setAttribute("style", `width:${newWidth}`);
                                            innerCanvas[0].setAttribute("style", `width:${newWidth}`);
                                            innerCanvas[1].setAttribute("style", `width:${newWidth}`);
                                        }
                                    }
                                }
                                }>
                                Cerrar controles
                            </Button></div>
                    </div>

                </header>
                <article className="single-line-canvas-spaced-controls-row">
                    <section className="single-line-canvas-row">
                        < section className="spaced-column" style={{
                            backgroundColor: 'gray',
                        }}>
                            <ImageUpload/>
                        </section>
                        <section className="spaced-column" style={{
                            backgroundColor: 'yellow',
                        }}>
                            <ImageUpload/>
                        </section>
                    </section>
                    <div className="spaced-column" style={{
                        backgroundColor: "green"
                    }}>
                        <br/>
                        <Panel
                            id="collapsible-panel-example-1"
                            expanded={this.state.open}>
                            <Panel.Collapse>
                                <Panel.Body>
                                    <Dropdown options={this.options} onChange={this._onSelect}
                                              placeholder="Select an option"/>
                                    <div className="row">
                                        <label><input type="checkbox" id="chbox1" value="1"/>Option 1</label>
                                        <label><input type="checkbox" id="chbox2" value="2"/>Option 2</label>
                                    </div>
                                    <div className="row">
                                        <label><input type="checkbox" id="chbox3" value="3"/>Option 3</label>
                                        <label><input type="checkbox" id="chbox4" value="4"/>Option 4</label>
                                    </div>
                                    <div>
                                        <Button>1</Button>
                                        <Button>2</Button>
                                        <Button>3</Button>
                                        <Button>4</Button>
                                    </div>
                                </Panel.Body>
                            </Panel.Collapse>
                        </Panel>
                    </div>

                    <div className="line-break"></div>

                </article>
                <footer><textarea style={{width: "100%"}} value="Estructura:" readOnly name="herarchy"
                                  id="1"></textarea>
                </footer>
            </main>
        )
    }
}

export {Caballo}

И, наконец, ImageUploadявляются ДИВС и холст для изображения предварительного просмотра:

import React from 'react';


class ImageUpload extends React.Component {

    render() {

        const $imagePreview = (
            <div className="previewText">Por favor seleccione una imagen de su ordenador para visualizarla</div>);
        return (
            <div className="previewComponent">
                <div className="imgPreview">
                    {$imagePreview}
                    <canvas></canvas>
                </div>
            </div>
        )
    }
}

export {ImageUpload};

Как вы видите, это некрасиво, потому что код в Кабаллу слишком долго.

  1. Управления кнопки onClick обработчик слишком большой: целью является, чтобы изменить размер холста, когда мы закрываем управления:

    • Есть ли более простой способ сделать это изменить?
    • Этот обработчик должен быть изолирован в своем файле?
    • Это правильный способ обработки размеры полотна?
  2. УСБ названий класса

    Сначала я думал, что это лучше, чтобы описать то, что он делает, например:

    'single-line-spaced-row'
    

    Тогда я подумал, что было бы лучше, если она относится к тому, что он используется для:

    'canvas-controls'
    

    Я смешал их оба:

    'single-line-canvas-spaced-controls-row'
    

    Какой подход является правильным?

  3. В формате HTML/реагировать:

    Есть компонент реагировать называют заголовок, который находится на панели навигации, чтобы ориентироваться, и есть заголовок, где я поставил название и рядом кнопка управления.

    Как я мог бы улучшить это название?

  4. Иерархия пользовательского интерфейса:

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

    Есть ли лучший способ структурировать пользовательского интерфейса?

  5. Логика рассеян:

    Компонент Кабаллы слишком большой: заголовок название и рядом кнопка управляет; статьи/раздела холст; панель представляет входов управления; нижний колонтитул-это место, где динамично мы пишем названия животного деталей.

    Мы могли бы разделить или упростить этот компонент?

Кроме того, на странице по умолчанию выглядит:

enter image description here

Страница холст с открытия, управление:

enter image description here

Контролирует закрыты:

enter image description here



Комментарии