Eric Greene - http://t4d.io - LinkedIn
Class:
- Monday - Friday, next 2 weeks: 9:00am to 5pm PDT
Breaks:
- Morning: 10:25am to 10:35am
- Lunch: Noon to 1pm
- Afternoon #1: 2:15pm to 2:25pm
- Afternoon #2: 3:40pm to 3:50pm
- 2 Days: React JumpStart, HTML, CSS, Accessibility
- 3 Days: React + JavaScript
- 3 Days: React + Redux
- 1.5 Days: Project
- 0.5 Day: Unit Testing + Other Topics (class ends at 4pm)
- React Lab
- Redux Lab
- Redux Videos
- DevelopIntelligence
- Eric's Blog
- WintellectNOW - Special Offer Code: GREENE-2016
- Microsoft Virtual Academy
- React Blog Posts
- React SitePoint
- You Don't Know JS
- JavaScript Air Podcast
- Speaking JavaScript
- TC39 Process - Feature Stages
- Official ES2016 Features
- Possible ES2017 Features
This is a starter project for creating an HTML/SASS/React/Redux/Relay application.
Step 0. Please completely read and thoroughly understand the instructions below before performing them.
Step 1. Download Install Node.js version 7 or higher. Version 7 or higher MUST be installed. If you have an older Node.js version that you need to keep, then use something like NVM to manage multiple Node.js installations. To install Node.js click here.
Note: Seriously, please use Node version 7 or higher. There are certain features such as destructuring and spreads which will not work with earlier versions of Node.js. If you use an earlier version your code will fail.
Step 2. Download the repository as a zip file. Extract the zip file to a working folder on your system.
Step 3. Open a new terminal window, change to the folder where you extracted the zip file. You should see a package.json file in the folder.
On Windows, the terminal is called "Node.js Command Prompt". This will command prompt will contain the proper paths for Node.js development. DO NOT RUN the Node.js program. Click the icon named "Node.js Command Prompt". For Mac users, the Mac terminal is all you need.
Step 4. From the terminal, run the following command:
npm i && npm startIt will take a few minutes for this command to complete. If you have connection issues due to a proxy server, please edit the .npmrc file per the instructions in that file. Then re-run the command above.
This set has been completed successfully when you receive the following message:
[1] Child html-webpack-plugin for "index.html":
[1] chunk {0} index.html 541 kB [entry] [rendered]
[1] [0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 607 bytes {0} [built]
[1] [2] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] [3] (webpack)/buildin/module.js 517 bytes {0} [built]
[1] webpack: Compiled successfully.This terminal window is now running the web server, a second terminal window will need to be opened to run additional terminal commands.
Step 5. Open a web browser, and navigate to http://localhost:3000. The starter web application should load and be usable.
Note: This command will run, and then wait for file changes to process updated source code from the src folder. Webpack does NOT exit and return to a terminal prompt. Please do not close this terminal window.
Step 6. Open your favorite text editor (such as Visual Studio Code), and modify the files in the src folder. When file changes are saved, webpack will automatically transpile and bundle the application code and assets, and load it into the memory of the web server. To see the changes, reload your web browser (live reload is enabled so reloading will probably occur automatically).
I recommend install the following Visual Studio Code extensions:
- dbaeumer.vscode-eslint
- mkaufman.htmlhint
- DavidAnson.vscode-markdownlint
- glen-84.sass-lint
- robertohuertasm.vscode-icons
From a terminal, in the root project folder (where the package.json file exists), the following commands can be executed to perform various project development tasks.
- npm start - starts the web server
- npm run clean - removes the dist folder
- npm run build - removes the dist folder, builds and deploys the server app, and the web app
- npm run webpack - runs webpack in watch mode so web app file changes are automatically processed, and deployed to the dist/www folder
- npm run webpack-once - runs webpack once to process web app files, and deploys them to the dist/www folder