React: Difference between revisions
Brian Wilson (talk | contribs) |
Brian Wilson (talk | contribs) |
||
| Line 30: | Line 30: | ||
One of the best pages to learn version 4 is https://css-tricks.com/react-router-4/ | One of the best pages to learn version 4 is https://css-tricks.com/react-router-4/ | ||
== react-bootstrap = React + Bootstrap == | == react-bootstrap-test = React + Bootstrap == | ||
As of 11-20-18 | |||
See "React and React Native", Chapter 11: Mobile-First React Components. | See "React and React Native", Chapter 11: Mobile-First React Components. | ||
Be warned they are talking about Bootstrap 3 in that book, which is what (the official) react-bootstrap supports. | |||
I wanted to use Bootstrap 4 so I am working with (the unofficial) "reactstap", eventually the support | |||
will be updated in react-bootsrap and I will revise this. | |||
You can't simply load the separate Node packages for React and Bootstrap | 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. | ||
You still have to load Bootstrap (that is, "npm install bootstrap") | |||
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. | 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 | So, install "npm reactstrap" | ||
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 | ||
Revision as of 19:17, 20 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 with routing
To test React + Parcel I created https://github.com/brian32768/react-test
It used to be super simple but I wanted to test React routing so now it's a little more complex. One of the best pages to learn version 4 is https://css-tricks.com/react-router-4/
react-bootstrap-test = React + Bootstrap
As of 11-20-18
See "React and React Native", Chapter 11: Mobile-First React Components. Be warned they are talking about Bootstrap 3 in that book, which is what (the official) react-bootstrap supports. I wanted to use Bootstrap 4 so I am working with (the unofficial) "reactstap", eventually the support will be updated in react-bootsrap and I will revise this.
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.
You still have to load Bootstrap (that is, "npm install bootstrap")
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 reactstrap"
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
