Differences

This shows you the differences between two versions of the page.

--- reactjs [2022/07/11 19:48] – created smickster
+++ reactjs [2022/07/19 14:14] (current) – [Videos] smickster
@@ Line 1: / Line 1: @@
-====== Learning React ======
+====== Learning React JS ======
 Page for notes on learning react.  List some resources, videos, starting points, libraries, whatever for learning. The goal is to create the rotoscope project.
@@ Line 9: / Line 9: @@
   * React for Beginners 2018 (Programming with Mosh) - https://www.youtube.com/watch?v=Ke90Tje7VS0
+==== Steps ====
+  * Ensure you have a terminal app (Powershell for win?)
+  * install node js from website installer
+  * in terminal, navigate to C:\Users\yourname
+  * install react create from terminal npm -g create-react-app
+  * Create a directory for your react sites somewhere
+  * In terminal, navigate to that main sites directory, here you'll have react build your app w/ folder
+  * type:  create-react-app my-cool-app-name
+  * go into that new directory your app was built
+  * type npm start  in terminal
+  * Browser will launch automatically
+Open VS Code
+  * Open extensions panel
+  * Search for Simple React Snippets, install
+  * Search for "Prettier" and install that
+  * Restart VS Code so everything full installed
+  * File > Preferences > Settings > Format > check the box for autoformat on save
+  * Point VS Code to your new react app so it's a VS Code Project folder
+  * Open the "Public" folder, notice index.html, look in the body section for the div called "root" that is where the react app gets displayed
+  * Open the src folder and look at the app.js file. That is the actual react app for the demo page