React

React is a framework that helps me build JavaScript views. It came from the people at Facebook but it's not there anymore. Its homepage is now 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

2019-06 - This project continues to grow and grow... :-)

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

Redux

Redux got added to react-bootstrap-test a month or 2 ago.

= Redux-First Router

This seems like the way to do routing and state, I was trying to get React Router 4 + Redux under control and losing patience. Then I found RFR and am in the dazed and confused state now (again.)

I have a git project for this now, https://github.com/brian32768/rfr-test. Once I get it under my belt I will re-write react-bootstrap-test

More books and links and things

Go back to the JavaScript page