README.md

ReHacked (June 8, 2016): React SPA Basics

By ReactJS Tampa Bay

Welcome to ReHacked! By the end of this lab, you will have:

• Created a "ground up" React SPA using Webpack and Babel (for JSX and ES2015 support)
• Implemented some React components
• Implemented a simple routing system
• Implemented a service to talk to a Web API for simple authentication
• Deployed the React SPA to Firebase

PreHacked

Suggested Tools

1. Atom or WebStorm

• terminal-plus for Atom
  • Windows 10 User Instructions for terminal-plus

1. SourceTree (If not using WebStorm)

Setup Instructions

1. Signup for a GitHub account

2. Install git

3. Install Node Version Manager (Windows NVM)

4. Install Node 4.4.5 (using nvm install 4.4.5)

5. Execute nvm alias default 4.4.5

6. Execute npm install -g npm3

7. Signup for a Firebase account

ReHacked

Initialize NPM and git

1. Go to a directory of your choice and create a rehacked-spa-basics folder

• bash: mkdir rehacked-spa-basics && $_

1. Create a README.md file

• bash: echo "# rehacked-spa-basics" >> README.md

1. Create a .gitignore file

• bash: printf "# node\nnode_modules\n\n# IDE\n.idea\n\n# webpack\nbuild" >> .gitignore

1. Execute npm init (Interactively creates a package.json file)

• name: rehacked-spa-basics
• version: 1.0.0
• description: A React SPA with basic functionality
• entry point: ./src/app.js
• test command:
• git repository:
• keywords:
• author: [Enter your name]
• license:

add global dependencies

1. Execute npm3 install -g webpack webpack-dev-server

add project dependencies

1. Execute npm3 install react react-dom react-router isomorphic-fetch material-design-lite classnames babel-polyfill babel-preset-es2015 babel-preset-react --save

add dev dependencies

1. Execute npm3 install babel-core babel-loader css-loader extract-text-webpack-plugin file-loader node-sass null-loader open-browser-webpack-plugin sass-loader source-map-loader static-loader style-loader webpack webpack-dev-server --save-dev

create repo and push up changes

1. Execute git init

2. Execute git add .

3. Execute git commit -m "initial commit"

4. Create a new empty repo on GitHub

5. Execute git remote add origin [https link to your Git repo]

6. Execute git push -u origin master

Add Webpack and Environment config

1. Create a webpack.config.js file

• bash: touch webpack.config.js

1. Copy contents of pre-defined webpack config

2. Create a config directory and a local.js file in it

• bash: mkdir config && cd $_ && touch local.js && cd -

1. Copy contents of pre-defined local environment config to local.js

Add baseline components and start app

1. Create an index.html, app.js, and dependencies.js for your SPA

• bash: mkdir src && cd $_ && touch app.js && touch index.html && touch dependencies.js && cd -

1. Copy contents of pre-defined index.html to index.html

2. Copy contents of pre-defined app.js to app.js

3. Copy contents of predefined dependencies.js

4. Create a components subdirectory under the src folder.

5. Create StartScreen/index.js under components

• bash (from the root of the project): mkdir -p src/components/StartScreen && cd $_ && touch index.js && cd -

1. Add basic class with render function that returns hello from react div

2. Create Dashboard/index.js

• bash (from the root of the project): mkdir -p src/components/Dashboard && cd $_ && touch index.js && cd -

1. Add basic class with render function that returns My Dashboard div

2. Start app by going to the root of your repo and executing one of the following:

• *nix Environments: webpack-dev-server --config webpack.config.js --content-base build/ --inline --hot
• Windows Environments webpack-dev-server --progress --colors --inline --content-base build/

Add User Service and Common Environment Config

1. Create src/common/services/user.js

• bash (from the root of the project): mkdir -p src/common/services && cd $_ && touch user.js && cd -

1. Create src/common/constants/environment.js

• bash (from the root of the project): mkdir -p src/common/constants && cd $_ && touch environment.js && cd -

1. Export API_PATH from environment.js

export const ENVIRONMENT = { API_PATH: 'https://baseline-sails-api.herokuapp.com' };

1. Create src/common/constants/endpoints.js

• bash (from the root of the project): mkdir -p src/common/constants && cd $_ && touch endpoints.js && cd -

1. Export USER const from endpoints.js

export const USER = { LOGIN: '/user/login' };

Build User Login

1. Import 'isomorphic-fetch', {ENVIRONMENT} and {USER} in user.js

2. Export login function in /src/common/services/user.js

3. Import * as UserService in StartScreen/index.js

Add Login and Loading Components to StartScreen

1. Create src/components/Login/index.js

• bash (from the root of the project): mkdir -p src/components/Login && cd $_ && touch index.js && cd -

1. Create src/components/Loading/index.js

• bash (from the root of the project): mkdir -p src/components/Loading && cd $_ && touch index.js && cd -

1. Copy contents of pre-defined Login Component

2. Copy contents of pre-defined Loading Component

Add Login Validation and Functionality on StartScreen

Reference: src/components/StartScreen/index.js

1. Import Login component in StartScreen and replace hello from react div

2. Establish two functions: _handleFieldChange and _handleLogin

3. Establish componentDidMount and componentDidUpdate functions and add this line to each:

componentHandler.upgradeDom();

1. Add a constructor for src/components/StartScreen/index.js which creates a state for StartScreen and also properly bind the _handleFieldChange and _handleLogin functions. React Autobinding

constructor(props) {
    // call the constructor of a parent class
    super(props);

    this.state = {
      status: 'initial',
      email: '',
      password: ''
    };

    // create bound function to set the context of this - in JavaScript classes, functions are not automatically bound to the class
    this._handleFieldChange = this._handleFieldChange.bind(this);
    this._handleLogin = this._handleLogin.bind(this);
}

1. Pass required attributes to <Login />

  <Login email={this.state.email}
      password={this.state.password}
      handleFieldChange={this._handleFieldChange}
      handleLogin={this._handleLogin}
      loading={this.state.status === 'logging_in'} />

1. Add _showSnackBar function

  _showSnackBar(message) {
    var data = {
      message: message,
      timeout: 2500
    };
    var snackbarContainer = document.querySelector('#login-snack-bar');
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
}

1. Add email/password check in _handleLogin. Invoke UserService.login if it passes validation.

2. Set app state to display loading during login process

3. Add stringify'd USER_PROFILE to localStorage on success, or invoke _showSnackBar on login error (incorrect email or pw)

4. Log parsed USER_PROFILE to console to demonstrate API response payload

Navigate to Dashboard

1. While still in src/components/StartScreen/index.js, add this line of code to the top: import {hashHistory} from 'react-router';

2. On a successful login in the _handleLogin function, add hashHistory.push('/dashboard');

3. TEST: Navigate back to Login and Forward to Dashboard - delete localStorage['USER_PROFILE'] - can no longer nav forward

Add SCSS

1. Create src/assets/styles/main.scss

• bash (from the root of the project): mkdir -p src/assets/styles && cd $_ && touch main.scss && cd -

1. Uncomment Stylesheets require in src/dependencies.js

2. Copy contents of pre-defined main.scss

Give Dashboard some style

1. Create src/assets/style/dashboard.scss

2. Copy contents of pre-defined dashboard.scss

3. @Import ./dashboard.scss in src/assets/styles/main.scss

4. Copy contents of pre-defined Dashboard/index.js

Dev Tools

1. Add React Dev Tools Chrome Extension

2. Under React tab - find StartScreen component and demonstrate setting state loading = true

Deploy to Firebase

1. Build SPA bundle with Webpack - webpack --config webpack.config.js

2. Open the Firebase Console

3. Create a new Firebase project

4. Click on Hosting in the left sidebar

5. Install firebase-tools - npm install -g firebase-tools

Login and Initialize Firebase from your project's directory

1. firebase login - a browser will open to authenticate with Google

2. firebase init - select Hosting, hit spacebar next to Database to de-select

• build for your public directory
• Y for SPA
• Select your newly created project on Firebase

1. firebase deploy

2. Open the deployed app and login