Libs and packages
Opened this issue · 16 comments
Формируем список необходимых библиотек.
Называем по именам пакета - можно найти в документации, но если надо сверяемся тут https://www.npmjs.com/
Не забудьте снабдить ссылку на документацию к каждому пакету.
Те которые добавляются через create-react-app добавлять не нужно.
Формат:
- имя пакета - ссылка
- react - https://ru.reactjs.org/
1.react-router-dom - https://reactrouter.com/web/guides/quick-start
2.reactjs-input-validator
3.react-bootstrap
4.victory (может есть что-то лучше)
5.firebase
6.react-moment
Для графиков, диаграм предлагаю d3.js
https://www.npmjs.com/package/react-d3
axios - https://github.com/axios/axios
redux(react-redux + redux-thunk) - https://redux.js.org
Урок по чистому Redux, без привязки к React - https://www.youtube.com/watch?v=YdYyYMFPa44&t=1s
Урок об использовании Redux в контексте с React (начать стоит с первого урока, без привязки к React, так как там объясняется сама суть Redux, чего в этом уроке нет) - https://www.youtube.com/watch?v=G3GGXIhggGs
react-intl - https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-intl
(i18n - https://www.i18next.com)
styled-components - https://styled-components.com/docs
Я подумал и добавил еще такие:
- @reduxjs/toolkit* - https://redux-toolkit.js.org/introduction/quick-start
- reselect* - https://github.com/reduxjs/reselect
- jest* - https://jestjs.io/docs/ru/tutorial-react
- ramda - https://ramdajs.com/
- prop-types - https://ru.reactjs.org/docs/typechecking-with-proptypes.html
- redux-form - https://redux-form.com/8.3.0/
- styled-components-theme - https://github.com/erikras/styled-components-theme
*- reselect и jest устанавливаются с помощью npx create-react-app web-client --template redux и находятся внутри пакета @reduxjs/toolkit. Оставлены здесь для справки.
Кстати мы будем Typescript или все же JS?
Пакетный менеджер npm или yarn?
react-intl - https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-intl
(i18n - https://www.i18next.com)
@valyuscha Тут надо выбрать один из двух?
react-intl - https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-react-app-with-react-intl
(i18n - https://www.i18next.com)Тут надо выбрать один из двух?
Это одно и тоже. React-intl основан на системе i18n. Я скинула документацию i18n, чтобы было общее представление об этой системе
Еще специально для Firebase проекта
- react-redux-firebase - https://firebaseopensource.com/projects/prescottprue/redux-firestore/ - Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React.
- firebase - https://firebase.google.com/docs/reference/js - This SDK is intended for end-user client access from environments such as the Web, mobile Web (e.g. React Native, Ionic), Node.js desktop (e.g. Electron), or IoT devices running Node.js.
- redux-firestore - https://firebaseopensource.com/projects/prescottprue/redux-firestore/ - Redux bindings for Firestore. Provides low-level API used in other libraries such as react-redux-firebase
- recompose - https://github.com/acdlite/recompose/blob/master/docs/API.md - Recompose is a React utility belt for function components and higher-order components.
Нашел хорошую статью:
React Redux Tutorial for Beginners: The Complete Guide (2020)
В ней так же идет речь о Redux Toolkit - это новый инструмент который создали разработчики Redux, чтобы дополнить и упростить работу, и сделать код лаконичнее. Подробнее тут: Modern Redux with Redux Toolkit
Урок по чистому Redux, без привязки к React - https://www.youtube.com/watch?v=YdYyYMFPa44&t=1s
Урок об использовании Redux в контексте с React (начать стоит с первого урока, без привязки к React, так как там объясняется сама суть Redux, чего в этом уроке нет) - https://www.youtube.com/watch?v=G3GGXIhggGs
Adding Images, Fonts, and Files - в конце про импорт SVG.
Form
React Docs - Forms
Building forms using React — everything you need to know - тут форма классом сделана, но не проблема переделать на функциональный компонент.
Redux
What is Redux?
Redux For Beginners | React Redux Tutorial
React Class vs Functions
Как работать с состоянием функциональных компонентов
https://www.digitalocean.com/community/tutorials/how-to-manage-state-with-hooks-on-react-components
CSS Modules
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
https://css-tricks.com/css-modules-part-1-need/
https://habr.com/ru/post/335244/
JSDoc и документирование кода
https://ru.wikipedia.org/wiki/JSDoc
https://jsdoc.app/
https://ru.reactjs.org/docs/typechecking-with-proptypes.html
JSDoc with React
JSDoc type definition
Расширение для VS Code для удобного написания CSS в styled-components:
https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components