mcallegari10

import React, { Component } from 'react';
import { Widget } from 'react-chat-widget';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Widget />
      </div>
    );

mcallegari10

import React, { Component } from 'react';
import { Widget } from 'react-chat-widget';

class App extends Component {
  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);
    // Now send the message throught the backend API
  }

  render() {

mcallegari10

import React, { Component } from 'react';
import { Widget, addResponseMessage, addLinkSnippet, addUserMessage } from 'react-chat-widget';
import logo from './logo.svg';

class App extends Component {
  componentDidMount() {
    addResponseMessage("Welcome to this awesome chat!");
  }

  handleNewUserMessage = (newMessage) => {

mcallegari10

import React, { Component } from 'react';
import { Widget, addResponseMessage } from 'react-chat-widget';

class App extends Component {
  componentDidMount() {
    addResponseMessage("Welcome to this awesome chat!");
  }

  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);

mcallegari10

.conversation-container > .header {
  background-color: red;
}

.message > .response {
  background-color: black;
  color: white;
}

mcallegari10

Ruby

For the sole purpose to use SASS, you need to install Ruby the right way. That is with either RBENV or RVM. If you are not going to do the Ruby on Rails training, I highly encorage you to do it with RVM.

Installation

Run the following commands in your terminal:

mcallegari10

import React from 'react';
// We can use react-loadable to cover the most possibles outcomes of the code splitting
import Loadable from 'react-loadable';

// My Loader component
import Loader from '@components/Loader';

// Create the async route
const AsyncRoute = Loadable({
  loader: () => import('./index'),

mcallegari10

import { RouterModule, Routes, PreloadAllModules } from @angular/router;

// You can say to Angular the route is async with the hash at the end of the import
export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
  { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
  { path: 'settings', loadChildren: '../settings/settings.module#SettingsModule' },
  { path: 'reports', loadChildren: '../reports/reports.module#ReportsModule' }
];

mcallegari10

import Vue from 'vue'

import Navbar from '../../components/Navbar'

const AsyncComponent = () => import('../../components/AsyncComponent')

const vm = new Vue({
  el: '#app',
  // ... all attributes necessary for your instance
  components: { Navbar, AsyncComponent }

mcallegari10

cons AsyncRoute = () => import('./screens/AsyncRoute.vue')

const router = new VueRouter({
  routes: [
    { path: '/async', component: AsyncRoute }
  ]
})