Directly Training Frontend

Directly training app, is an application with webpack, react and redux to make additions, deletions, and modifications from users.

Prerequisites

Ubuntu

install npm version, node >= 8

• sudo apt-get update
• sudo apt-get install nodejs
• sudo apt-get install npm

Also, you can use nvm node version management tool

install yarn latest

• curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
• echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
• sudo apt-get update && sudo apt-get install yarn

Windows

• Install npm
• Install yarn

Start application

• Install packages npm install or yarn install
• Run app: npm start or yarn start
• By default, the application starts on http://localhost:8080
• The backend is integrated with the API MS BE with heroku you can check the repo here: MS BE Repository
• You can point to the local backend with the file app/constants.js

For now don't commit this .env.development or constants.js file changes

Commands

install packages

npm install

start app

npm start

Dev tools

run tests

npm test

run test with watch

test:dev

linter rules

npm run lint

sass rules

npm run sass-lint

build from production

npm run build

React Context API

Documentation about Context API

How does it work?

• Configuration
• Context
• Provider
• Consumer

Configuration

Works with newest versions from React 16.3.0

Context: authContext

Notice how the context does not have its own state. It is merely a conduit for your data. You have to pass a value to the Provider, and that exact value gets passed down to any Consumers that know how to look for it (Consumers that are bound to the same context as the Provider).

import React from 'react';

export const auth = {
  authenticating: false,
  isAuthenticated: false,
  error: false,
  errorMessage: null,
  user: null,
  login: () => {}
};

export const AuthContext = React.createContext({
  ...auth
});

Provider: AppProvider

Very similar to React-Redux’s Provider. It accepts a value prop which can be whatever you want (it could even be a Redux store… but that’d be silly). It’ll most likely be an object containing your data and any actions you want to be able to perform on the data.

class AppProvider extends React.Component {
  constructor(props) {
    super(props);

    this.login = this.login.bind(this);
    this.state = {
      auth: {
        ...auth,
        login: this.login
      }
    };
  }

  login (username, password) {
    this.setState({
      auth: {
        ...this.state.auth,
        isAuthenticated: true
      }
    });
  }

  render() {
    return (
      <AuthContext.Provider value={this.state.auth}>
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

AppProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppProvider;

Consumer

Works a little bit like React-Redux’s connect function, tapping into the data and making it available to the component that uses it.

export default class Main extends React.Component {
  renderLoginPage() {
    return (
      <AuthContext.Consumer>
        { authContext => <HomePage authContext={authContext} /> }
      </AuthContext.Consumer>
    );
  }
}

For now don't commit this .env.development or constants.js file changes

If you need to work with the current ms-labs-be app request access to

Mariano Ravinale

Emanuel Pereyra

Ivan Scoles