React: Difference between revisions

From Wildsong
Jump to navigationJump to search
Brian Wilson (talk | contribs)
Brian Wilson (talk | contribs)
Line 13: Line 13:
* [https://atom.io/packages/atom-wrap-in-tag atom-wrap-in-tag] (Alt-Shift-W)
* [https://atom.io/packages/atom-wrap-in-tag atom-wrap-in-tag] (Alt-Shift-W)
* autocomplete-modules (autocomplete require and import)
* autocomplete-modules (autocomplete require and import)
* color-picker (ctl-alt-C) '''THIS IS COOL!'''
* color-picker (alt-ctl-C) '''THIS IS COOL!'''
* language-babel (autocomplete jsx and more)
* language-babel (autocomplete jsx and more)
* [https://atom.io/packages/sync-settings sync-settings] (uses github gist to sync atom settings)
* [https://atom.io/packages/sync-settings sync-settings] (uses github gist, ctl-shift-p Sync Settings:Backup or :Restore)


=== sync-settings ===
=== sync-settings ===
Line 21: Line 21:
After putting in the token under settings,
After putting in the token under settings,


ctl-shift-p Sync Settings:Backup or :Restore
Might want to look at [https://atom.io/packages/emmet Emmet]


== react-test = React Hello World ==
== react-test = React Hello World ==

Revision as of 20:36, 13 November 2018

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

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

  • atom-ternjs (javascript code intelligence)
  • 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)
  • 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 Emmet

react-test = React Hello World

To test React + Parcel I created https://github.com/brian32768/react-test which is about as simple as I could make it.

react-bootstrap = React + Bootstrap

See "React and React Native", Chapter 11: Mobile-First React Components.

You can't simply load the separate Node packages 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.

So, install "npm react-bootstrap"

Here is my sandbox where I test and learn: http://github.com/brian32768/react-bootstrap-test

More books and links and things

"Building Enterprise JavaScript Applications", see chapter 14