React: Difference between revisions

From Wildsong
Jump to navigationJump to search
Brian Wilson (talk | contribs)
Brian Wilson (talk | contribs)
 
(21 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
 
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 ===


So far I have installed
I added Redux, which is great, but when I paged between menu items, the page reloaded and I lost the Redux store contents.
* [https://atom.io/packages/atom-ternjs atom-ternjs] (javascript code intelligence)
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]
* [https://atom.io/packages/atom-wrap-in-tag 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)
* [https://atom.io/packages/sync-settings sync-settings] (uses github gist, ctl-shift-p Sync Settings:Backup or :Restore)


=== sync-settings ===
To see what is stored, in the Chrome debugger look under the Application tab, Storage->LocalStorage.


After putting in the token under settings,
=== React + Bootstrap 4 = Reactstrap ===


Might want to look at [https://atom.io/packages/emmet Emmet]
Install "npm reactstrap"


== react-test = React Hello World ==
Learn reactstrap https://www.techiediaries.com/react-bootstrap/


To test React + Parcel I created https://github.com/brian32768/react-test
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.


It used to be super simple but I wanted to test React routing so now it's a little more complex.
=== Redux-First Router ===
One of the best pages to learn version 4 is https://css-tricks.com/react-router-4/


== react-bootstrap = React + Bootstrap ==
AKA "RFR"


See "React and React Native", Chapter 11: Mobile-First React Components.
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


You can't simply load the separate Node packages for React and Bootstrap
RFR seems like the way to manage routing as state, I was trying to get
because bootstrap normally uses jquery and jquery directly modifies the DOM.  
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.
That breaks the React model, which uses a "virtual DOM" to speed up rendering-- sort of the whole point of React.


But really I hope I never have to see jquery again. I never learned it so it just annoys me having code I don't understand in projects.
Then I found RFR and am in the dazed and confused state now (again.)


So, install "npm react-bootstrap"
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.''


Here is my sandbox where I test and learn: http://github.com/brian32768/react-bootstrap-test
Recall that "dispatch flux standard actions" refers to calling a redux "action creator",
which is an object for example:


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


The code with React components is so clean compared to conventional Bootstrap.
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