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.)

This is the line that sold me on RFR.

Once you setup your routesMap and configure your store, there is virtually zero you can do, which is a good thing. There is no API surface. Just dispatch flux standard actions and use connect. The address bar will be handled for you.

Recall that "dispatch flux standard action" refers to calling a redux "action creator", which is an object for example:

{ type: MAP, payload: { geohash:"ABCDEF", zoom:14 }}

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