React: Difference between revisions

From Wildsong
Jump to navigationJump to search
Brian Wilson (talk | contribs)
Brian Wilson (talk | contribs)
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
React is a framework that helps me build views.
React is a framework that helps me build JavaScript views.
It came from the people at Facebook.
It came from the people at Facebook but it's not there anymore. Its homepage is now https://reactjs.org/


https://reactjs.org/
Maybe this is a good introduction: https://www.fullstackreact.com/30-days-of-react/day-1/


== IDE ==
== react-test = React with routing ==


This week I am using Atom and found this to be helpful.
To test React + Parcel I created https://github.com/brian32768/react-test
https://fullstackengine.net/recommended-atom-packages-react-js/
 
This is the site from the react-routing creators: https://reacttraining.com/react-router/web/guides/quick-start


So far I have installed
Learn React Router version 4 here too https://css-tricks.com/react-router-4/
* atom-ternjs (javascript code intelligence)
* autocomplete-modules (autocomplete require and import)
* language-babel (autocomplete jsx and more)
* sync-settings (uses github gist to sync atom settings)


=== sync-settings ===
== react-bootstrap-test = React + Bootstrap ==


ctl-shift-p Sync Settings:Backup or :Restore
2019-06 - This project continues to grow and grow... :-)


== react-test = React Hello World ==
Here is the sandbox: http://github.com/brian32768/react-bootstrap-test


To test React + Parcel I created https://github.com/brian32768/react-test
See "React and React Native", Chapter 11: Mobile-First React Components.
which is about as simple as I could make it.


== react-bootstrap = React + Bootstrap ==
Be warned they are talking about Bootstrap 3 in that book, which is what (the official) react-bootstrap supports.


See "React and React Native", Chapter 11: Mobile-First React Components.
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
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-- 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 [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 ===
 
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 ===
 
AKA "RFR"
 
2019-06-12 I have a git project for RFR now, https://github.com/brian32768/rfr-test.
Once I get it under my belt I will integrate it into react-bootstrap-test
 
RFR seems like the way to manage routing as state, I was trying to get
React Router 4 + Redux under control and losing patience. I hit the thing where all I seemed to be doing was watching and responding to @@LOCATION_CHANGED events from the router.
 
Then I found RFR and am in the dazed and confused state now (again.)
 
Here 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 actions" refers to calling a redux "action creator",
which is an object for example:


So, install "npm react-bootstrap"
{ type: MAP, payload: { geohash:"ABCDEF", zoom:14 }}


Here is my sandbox where I test and learn: http://github.com/brian32768/react-bootstrap-test
So, rethinking my sample app. Conceiving of routes as states I will have
MAP, PICTURES, BOOKMARKS, TABLE, ABOUT, CONTACT


== More books and links and things ==
== More books and links and things ==


"Building Enterprise JavaScript Applications", see chapter 14
Go back to the [[JavaScript]] page


[[Category: JavaScript]]
[[Category: JavaScript]]

Latest revision as of 21:41, 12 June 2019

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

AKA "RFR"

2019-06-12 I have a git project for RFR now, https://github.com/brian32768/rfr-test. Once I get it under my belt I will integrate it into react-bootstrap-test

RFR seems like the way to manage routing as state, I was trying to get React Router 4 + Redux under control and losing patience. I hit the thing where all I seemed to be doing was watching and responding to @@LOCATION_CHANGED events from the router.

Then I found RFR and am in the dazed and confused state now (again.)

Here 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 actions" refers to calling a redux "action creator", which is an object for example:

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

So, rethinking my sample app. Conceiving of routes as states I will have MAP, PICTURES, BOOKMARKS, TABLE, ABOUT, CONTACT

More books and links and things

Go back to the JavaScript page