React: Difference between revisions
No edit summary |
|||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
React is a medium-sized framework that is a great fit for developing front ends. It combines HTML, JavaScript, (S)CSS into JSX Components that track "props and state". It can increase your website development productivity pretty quickly. Especially with the addition of npm modules, which literally do everything under the Sun. (like, four times over, sadly...) | React is a medium-sized framework that is a great fit for developing website front ends. It combines HTML, JavaScript, (S)CSS into JSX Components that track "props and state". It can increase your website development productivity pretty quickly. Especially with the addition of npm modules, which literally do everything under the Sun. (like, four times over, sadly...) | ||
It can stumble through reactivity when combined with bootstrap to give mediocre mobile support with moderate code changes (I don't love bootstrap on phones, tbh). | |||
My meta framework of choice is [[Vite]]. I used it to develop a [https://bitpost.com/news/2023/2023-d3-reactive-responsive-skeleton/ 2023 D3 skeleton project]. | |||
== Patterns == | == Patterns == | ||
* Use ES6 modules, destructuring/spread, functional components | * Use ES6 modules, destructuring/spread, functional components | ||
* Precisely use Promises and async/await to accomplish [https://github.com/moodboom/Reusable/blob/master/JavaScript/scrap/promises.js CHAIN, PARALLEL, and BATCH processing] | |||
* Understand and abide by PROP and STATE best practices | * Understand and abide by PROP and STATE best practices | ||
* Add and remove modules properly using npm rather than editing package*.json | * Add and remove modules properly using npm rather than editing package*.json | ||
| Line 21: | Line 15: | ||
npm i --dev newly-needed-dev-only-component | npm i --dev newly-needed-dev-only-component | ||
npm remove no-longer-needed-component | npm remove no-longer-needed-component | ||
* Bootstrap works well for breakpoint-based management of 12 columns; direct use of flex and grid is MUCH more powerful and should be considered for any complex layout | |||
== Issues == | |||
* I built an Array of objects with some JSX. It would NOT allow me to use find() on it. Weird. | |||
Latest revision as of 22:18, 25 November 2023
React is a medium-sized framework that is a great fit for developing website front ends. It combines HTML, JavaScript, (S)CSS into JSX Components that track "props and state". It can increase your website development productivity pretty quickly. Especially with the addition of npm modules, which literally do everything under the Sun. (like, four times over, sadly...)
It can stumble through reactivity when combined with bootstrap to give mediocre mobile support with moderate code changes (I don't love bootstrap on phones, tbh).
My meta framework of choice is Vite. I used it to develop a 2023 D3 skeleton project.
Patterns
- Use ES6 modules, destructuring/spread, functional components
- Precisely use Promises and async/await to accomplish CHAIN, PARALLEL, and BATCH processing
- Understand and abide by PROP and STATE best practices
- Add and remove modules properly using npm rather than editing package*.json
npm install # on new environments npm i --save newly-needed-component npm i --dev newly-needed-dev-only-component npm remove no-longer-needed-component
- Bootstrap works well for breakpoint-based management of 12 columns; direct use of flex and grid is MUCH more powerful and should be considered for any complex layout
Issues
- I built an Array of objects with some JSX. It would NOT allow me to use find() on it. Weird.