Eric Greene - http://t4d.io - LinkedIn
Class:
- Tuesday - Thursday: 9am to 5pm
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
- Day 1 - Setup/ES2015/React
- Day 2 - React/Flux/Redux
- Day 3 - Flux/Redux
- DevelopIntelligence
- Eric's Blog
- WintellectNOW - Special Offer Code: GREENE-2016
- Microsoft Virtual Academy
- React Blog Posts
- TopTal Angular Directive
- React SitePoint
This is a starter project for creating a React/Flux/Redux/Relay/GraphQL application.
Step 1. Download Install Node.js version 6 or higher. Version 6 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.
Step 2. Download and Install MongoDB. To download MongoDB click here.
Step 3. Download this repository from here. Extract the zip file to a working folder on your system.
Step 4. Open a terminal window. From the terminal prompt, run the following commands.
Note: Update your paths to reflect where you installed mongod and to what your database path is. If you did not create a folder to store your database in, then create a folder and use that folder path for the dbpath value. Also, update the path of widget.json to theextracted project folder.
$ ~/mongodb/bin/mongod --dbpath ~/mongodb/data/db
$ ~/mongodb/bin/mongoimport -d bootcamp -c widgets --jsonArray ./widgets.jsonMongoDB should now be up and running, and the database should be populated with sample data.
Step 5. 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 6. From the terminal, run the following command:
$ npm i && npm startIt could 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:
web server running on port 3000
please do not close this terminal window
please use a new terminal window to run additional commandsThis terminal window is now running the web server, a second terminal window will need to be opened to run additional terminal commands.
Step 7. Open a web browser, and navigate to http://localhost:3000. The starter web application should load and be usable.
To Modify the Web Application
Step 8. Open a new terminal window (do not use the same terminal window as the web server), change to the project folder.
Step 9. From the terminal, run the following command:
$ npm run webpackStep 10. Open your favorite text editor (such as Atom or Visual Studio Code), and modify the files in the src/www folder. When file changes are saved, webpack will automatically transpile and bundle the application code and assets, and deploy it to the dist folder. To see the changes, reload your web browser.
Visual Studio Code supports JSX out of the box. Atom requires the react package to be installed. To install it from the menu bar, go to Packages -> Settings View -> Install Packages/Themes. Search for react, then click Install. Sometimes Atom will not be able to download the package because of proxy settings. To resolve this run the following commands from a terminal window, replacing the localhost URL with your proxy URL setting:
$ apm config set proxy "http://localhost:8080"
$ apm config set https_proxy "http://localhost:8080"
$ apm config set strict-ssl falseRestart Atom, then re-attempt to install the react package again.
JavaScript & HTML linting support can be added by installing the linter, linter-htmlhint, and linter-eslint packages.
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
- npm run server - builds the server application, and deploys it to the dist folder
- npm run update-schema - updates the GraphQL schema for RelayQL