React: Difference between revisions

From Wildsong
Jump to navigationJump to search
← Older editNewer edit →
VisualWikitext
Brian Wilson (talk | contribs)
Bureaucrats, restrict, Administrators, uploaders
11,540 edits
Brian Wilson (talk | contribs)
Bureaucrats, restrict, Administrators, uploaders
11,540 edits
mNo edit summary
Line 3: Line 3:


https://reactjs.org/
https://reactjs.org/
== IDE ==
This week I am using Atom and found this to be helpful.
https://fullstackengine.net/recommended-atom-packages-react-js/
So far I have installed
* [https://atom.io/packages/atom-ternjs atom-ternjs] (javascript code intelligence)
* [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 ===
After putting in the token under settings,
Might want to look at [https://atom.io/packages/emmet Emmet]


== react-test = React with routing ==
== react-test = React with routing ==
Line 42: Line 23:
will be updated in react-bootsrap and I will revise this. 11-20-18
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
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-- the whole point of React.
That breaks the React model, which uses a "virtual DOM" to speed up rendering-- the whole point of React.

Revision as of 17:14, 28 November 2018

React is a framework that helps me build views. It came from the people at Facebook.

https://reactjs.org/

react-test = React with routing

To test React + Parcel I created https://github.com/brian32768/react-test

Now, with ROUTING!!

Learn React Router version 4 is 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.

React + Bootstrap 4 = Reactstrap

Install "npm reactstrap"

Learn reactstrap https://www.techiediaries.com/react-bootstrap/

See the official docs https://reactstrap.github.io/

More books and links and things

"Building Enterprise JavaScript Applications", see chapter 14

Retrieved from "https://wiki.wildsong.biz//index.php?title=React&oldid=11417"