React: Difference between revisions
Brian Wilson (talk | contribs) m →IDE |
Brian Wilson (talk | contribs) m →IDE |
||
| Line 13: | Line 13: | ||
* [https://atom.io/packages/atom-wrap-in-tag atom-wrap-in-tag] (Alt-Shift-W) | * [https://atom.io/packages/atom-wrap-in-tag atom-wrap-in-tag] (Alt-Shift-W) | ||
* autocomplete-modules (autocomplete require and import) | * autocomplete-modules (autocomplete require and import) | ||
* color-picker (ctl | * color-picker (alt-ctl-C) '''THIS IS COOL!''' | ||
* language-babel (autocomplete jsx and more) | * language-babel (autocomplete jsx and more) | ||
* [https://atom.io/packages/sync-settings sync-settings] (uses github gist | * [https://atom.io/packages/sync-settings sync-settings] (uses github gist, ctl-shift-p Sync Settings:Backup or :Restore) | ||
=== sync-settings === | === sync-settings === | ||
| Line 21: | Line 21: | ||
After putting in the token under settings, | After putting in the token under settings, | ||
Might want to look at [https://atom.io/packages/emmet Emmet] | |||
== react-test = React Hello World == | == react-test = React Hello World == | ||
Revision as of 20:36, 13 November 2018
React is a framework that helps me build views. It came from the people at Facebook.
IDE
This week I am using Atom and found this to be helpful. https://fullstackengine.net/recommended-atom-packages-react-js/
So far I have installed
- atom-ternjs (javascript code intelligence)
- atom-wrap-in-tag (Alt-Shift-W)
- autocomplete-modules (autocomplete require and import)
- color-picker (alt-ctl-C) THIS IS COOL!
- language-babel (autocomplete jsx and more)
- sync-settings (uses github gist, ctl-shift-p Sync Settings:Backup or :Restore)
sync-settings
After putting in the token under settings,
Might want to look at Emmet
react-test = React Hello World
To test React + Parcel I created https://github.com/brian32768/react-test which is about as simple as I could make it.
react-bootstrap = React + Bootstrap
See "React and React Native", Chapter 11: Mobile-First React Components.
You can't simply load the separate Node packages because bootstrap normally uses jquery and jquery directly modifies the DOM. That breaks the React model, which uses a "virtual DOM" to speed up rendering-- sort of the whole point of React.
So, install "npm react-bootstrap"
Here is my sandbox where I test and learn: http://github.com/brian32768/react-bootstrap-test
More books and links and things
"Building Enterprise JavaScript Applications", see chapter 14
