Задать вопрос
nakree

nakree

Fullstack Developer
Ответы пользователя по тегу React

  • Авторизация в React?

    nakree
    @nakree
    Fullstack Developer
    1. Добавить статус авторизации в redux. В компоненте если статус === REQUEST, то показывать заглушку, если процес авторизации завершился, то при статусе SUCCESS/FAILURE сделать редирект куда нужно.
    2. Этот вопрос так же решается статусом. Так же нужно в момент инициализации приложения отправить запрос на авторизацию если есть токен в localStorage.

    P.S. Для проверки логина пользователя на определенном роуте можно сделать враппер или HOC который будет чекать статус, показывать прелоадер или нужный роут.
    Ответ написан
    2 комментария
    2 комментария

  • Как подключить React в рабочую папку, и что все работало?

    nakree
    @nakree
    Fullstack Developer
    Создайте новый проект через create-react-app в пустой папке, затем выполните npm run eject (выплюнет все конфиги), затем перенесите в папку src старый проект. Если проекта нет, просто создайте проект через create react app, и в папке src создавайте файлы, затем подключите его в index.js так как это точка входа для вебпака.

    И что имеется ввиду под рабочей папкой?
    Ответ написан
    2 комментария
    2 комментария

  • Организация проекта на React?

    nakree
    @nakree
    Fullstack Developer
    Футер, хедер и меню - 3 разных компонента, их можно вставить в один компонент Wrapper, который будет рендерить сhildren'ов (основной контент). Стили можно подключить 1 раз в index.js. Если настроите вебпак, то он сможет вам собирать стили в один сss. В Сreate React App уже все настроено для sass, и можно без конфигов сразу подключить. Если трудно разобраться, то можете билдить стили, и этот файл подключать в реакту 1 раз. Если хотите добиться модульности, и переиспользовать компоненты в других проектах, то лучше стили писать к каждому компоненту. Еще можно посмотреть на styled-components (сss in js).

    Примеров структур проектов в интернете много. Я, например, разбиваю страницы по папкам, в которых лежит сам компонент, редюсер, экшен\сага и подпапка для дополнительных компонентов. Можно хранить отдельно редюсеры, отдельно экшены, отдельно компоненты.

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

  • Как присвоить className="active" для li?

    nakree
    @nakree
    Fullstack Developer
    NavLink

    import {NavLink} from 'react-router-dom';
<li>
  <NavLink to="/" activeClassName="active">
    <u>Главная</u>
  </NavLink>
</li>
<li>
  <NavLink to="/about" activeClassName="active">
    <u>О нас</u>
  </NavLink>
</li>
    Ответ написан
    4 комментария
    4 комментария

  • Как установить react?

    nakree
    @nakree
    Fullstack Developer
    Так же как и любую библиотеку. Можно через cdn подключить, можно через npm.
    Можно использовать готовый бойлерплейт сreate-react-app

    Думаю для Вас подойдет вот такая последовательность команд:
    npm init react-app my-app
npm run eject


    Для старта dev сервера:
    npm run start

    Для билда:
    npm run build

    И можно использовать реакт.
    Ответ написан
    6 комментариев
    6 комментариев

  • Почему не работают ссылки React в продакшн?

    nakree
    @nakree
    Fullstack Developer
    Потому что нужно настроить роутинг на сервере. Когда идет обращение типа hostname.сom/admin, то ресурс admin ищется на сервере, и он не существует, потому что ваши клиентские роуты существуют только в js, и доступны они только после того как загрузится html по адресу hostname.com, скачается и обработается js файл.
    Ответ написан
    2 комментария
    2 комментария

  • Как реализовать обращение к api?

    nakree
    @nakree
    Fullstack Developer
    Ответ:
    https://github.com/axios/axios#interceptors

    Реализация:
    https://stackoverflow.com/questions/46759321/redux...
    Ответ написан
    Комментировать
    Комментировать

  • Как открыть модальное окно в React?

    nakree
    @nakree
    Fullstack Developer 
    class Container extends React.Component {
  state = {
   showModal: false
  }

  handleModal = () => {
    this.setState({showModal: !this.state.showModal});
  }
render() {
  return (
    <Fragment>
      { this.state.showModal && <MyModal handleModal={this.handleModal}/> }
      <button onClick={this.handleModal}> Show modal </button>
    </Fragment>
   )
}


    Можно открывать из вне, и закрывать модалку в самой модалке.
    Аналогично можно добавить еще поля в стейте и пару хендлеров, чтобы получить сколько угодно модалок в одном компоненте.
    Ответ написан
    Комментировать
    Комментировать

  • А какая архитектура reactjs/redux приложения у вас?

    nakree
    @nakree
    Fullstack Developer
    src/
    --utils/
    --config/
    --css/
    --img/
    --components/
    ----User/
    ------User.jsx
    ------UserContainer.js
    ------UserReducer.js
    ------UserActions.js
    Ответ написан
    2 комментария
    2 комментария

  • Что такое mapDispatchToProps?

    nakree
    @nakree
    Fullstack Developer
    Сам недавно разбирался с этим, и пришел к такому пониманию (возможно оно не верное):
    Компонент изначально ничего не знает про redux, редюсеры и экшены. Потому мы не можем просто вызвать dispatch с каким то экшеном (будет ошибка мол такая функция неопределенна)
    Чтобы мы получили эту возможность, мы просим редакс через mapDispatchToProps, прислать нам эту функцию в виде колбека через пропсы. То есть мы получаем возможность сделать диспатч, а доступ к этой функции у нас есть через пропсы.
    Ответ написан
    Комментировать
    Комментировать