React: Difference between revisions
Brian Wilson (talk | contribs) m →IDE |
Brian Wilson (talk | contribs) |
||
| Line 32: | Line 32: | ||
See "React and React Native", Chapter 11: Mobile-First React Components. | See "React and React Native", Chapter 11: Mobile-First React Components. | ||
You can't simply load the separate Node packages | You can't simply load the separate Node packages for React and Bootstrap | ||
because bootstrap normally uses jquery and jquery directly modifies the DOM. | 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. | That breaks the React model, which uses a "virtual DOM" to speed up rendering-- sort of the whole point of React. | ||
But really I hope I never have to see jquery again. I never learned it so it just annoys me having code I don't understand in projects. | |||
So, install "npm react-bootstrap" | So, install "npm react-bootstrap" | ||
Here is my sandbox where I test and learn: http://github.com/brian32768/react-bootstrap-test | Here is my sandbox where I test and learn: http://github.com/brian32768/react-bootstrap-test | ||
=== Initial impressions === | |||
The code with React components is so clean compared to conventional Bootstrap. | |||
== More books and links and things == | == More books and links and things == | ||
Revision as of 19:21, 16 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 for React and Bootstrap 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.
But really I hope I never have to see jquery again. I never learned it so it just annoys me having code I don't understand in projects.
So, install "npm react-bootstrap"
Here is my sandbox where I test and learn: http://github.com/brian32768/react-bootstrap-test
Initial impressions
The code with React components is so clean compared to conventional Bootstrap.
More books and links and things
"Building Enterprise JavaScript Applications", see chapter 14
