React: Difference between revisions
Brian Wilson (talk | contribs) |
Brian Wilson (talk | contribs) |
||
| Line 33: | Line 33: | ||
== react-bootstrap-test = React + Bootstrap == | == react-bootstrap-test = React + Bootstrap == | ||
Here is the sandbox: http://github.com/brian32768/react-bootstrap-test | |||
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. | 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 | 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. | will be updated in react-bootsrap and I will revise this. 11-20-18 | ||
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-- | That breaks the React model, which uses a "virtual DOM" to speed up rendering-- the whole point of React. | ||
You still have to load Bootstrap (that is, "npm install bootstrap") | You still have to load the Bootstrap package (that is, "npm install bootstrap") to get bootstrap.css | ||
I hope I never have to see jquery again. I never learned it so it annoys me having code I don't understand in projects. | |||
=== React + Bootstrap 4 = Reactstrap === | |||
Install "npm reactstrap" | |||
Learn reactstrap https://www.techiediaries.com/react-bootstrap/ | |||
See the official docs https://reactstrap.github.io/ | |||
== More books and links and things == | == More books and links and things == | ||
Revision as of 23:02, 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
Now, with ROUTING!!
Learn React Router version 4 is https://css-tricks.com/react-router-4/
react-bootstrap-test = React + Bootstrap
Here is the sandbox: http://github.com/brian32768/react-bootstrap-test
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. 11-20-18
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-- the whole point of React.
You still have to load the Bootstrap package (that is, "npm install bootstrap") to get bootstrap.css
I hope I never have to see jquery again. I never learned it so it annoys me having code I don't understand in projects.
React + Bootstrap 4 = Reactstrap
Install "npm reactstrap"
Learn reactstrap https://www.techiediaries.com/react-bootstrap/
See the official docs https://reactstrap.github.io/
More books and links and things
"Building Enterprise JavaScript Applications", see chapter 14
