React: Difference between revisions
Brian Wilson (talk | contribs) |
Brian Wilson (talk | contribs) |
||
| Line 35: | Line 35: | ||
I added Redux, which is great, but when I paged between menu items, the page reloaded and I lost the Redux store contents. | I added Redux, which is great, but when I paged between menu items, the page reloaded and I lost the Redux store contents. | ||
So I added react-persist to save the state in LocalStorage. I followed along in [https://0-proquest.safaribooksonline.com.marinet.lib.ca.us/book/programming/javascript/9781788293969 JavaScript By Example] | So I added react-persist to save the state in LocalStorage. I followed along in [https://0-proquest.safaribooksonline.com.marinet.lib.ca.us/book/programming/javascript/9781788293969 JavaScript By Example] | ||
To see what is stored, in the Chrome debugger look under the Application tab, Storage->LocalStorage. | |||
=== React + Bootstrap 4 = Reactstrap === | === React + Bootstrap 4 = Reactstrap === | ||
Revision as of 22:01, 5 February 2019
React is a framework that helps me build views. It came from the people at Facebook but it's not there anymore. Its homepage is https://reactjs.org/
Maybe this is a good introduction: https://www.fullstackreact.com/30-days-of-react/day-1/
react-test = React with routing
To test React + Parcel I created https://github.com/brian32768/react-test
This is the site from the react-routing creators: https://reacttraining.com/react-router/web/guides/quick-start
Learn React Router version 4 here too 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.
Persistence
I added Redux, which is great, but when I paged between menu items, the page reloaded and I lost the Redux store contents. So I added react-persist to save the state in LocalStorage. I followed along in JavaScript By Example
To see what is stored, in the Chrome debugger look under the Application tab, Storage->LocalStorage.
React + Bootstrap 4 = Reactstrap
Install "npm reactstrap"
Learn reactstrap https://www.techiediaries.com/react-bootstrap/
See the official docs https://reactstrap.github.io/
Additional React Bootstrap components
https://github.com/react-component calendar, slider, select, tooltip
More books and links and things
Go back to the JavaScript page
