nirkaufman

Personal Blog Project (React) - Part 1

Introduction

You are going to create a personal blog using React. You will be practicing the following concepts:

• create React project.
• create React components.
• JS import/export.
• Breaking down the UI into components.

nirkaufman

import './App.css';
import {Header} from "./components/Header";
import {Main} from "./components/Main";
import {Footer} from "./components/Footer";

function App() {
  const appTitle = 'TodosApp';

  const todos = [
    {title: 'Learn React', completed: false},

nirkaufman

import {PreloadingStrategy, Route} from "@angular/router";
import {Observable, of} from "rxjs";
import {Injectable} from "@angular/core";

/**
 * Starting point for a CustomPreloading class from our live session!
 * You can (and should) customize it further more to meet your needs
 */

@Injectable({providedIn: 'root'})

nirkaufman

import { Component, ViewEncapsulation } from '@angular/core';
import { NgxBlocklyConfig, NgxBlocklyGenerator } from 'ngx-blockly';


@Component({
  selector: 'app-root',
  template: `
      <h1>Demo</h1>
      <ngx-blockly [config]="config" (javascriptCode)="onCode($event)"></ngx-blockly>
  `,

nirkaufman

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxBlocklyModule } from 'ngx-blockly';
import "blockly/blocks";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent

nirkaufman

import Reconciler from "react-reconciler";

const hostConfig = {
  supportsMutation: true,
  supportsPersistence: false,
  noTimeout: -1,
  isPrimaryRenderer: true,
  supportsHydration: false,

  createInstance(type, props, rootContainer, hostContext, internalHandle) {

nirkaufman

/*******************
 warm up
 *******************/

function* generateAlphaBet() {
  let i = "a".charCodeAt(0);
  let end = "z".charCodeAt(0) + 1;

  while(i < end) {
    yield String.fromCharCode(i);

nirkaufman

async function bootstrap() {
  const config = await fetch('http://localhost:3000/config').then( res => res.json() );

  // You can provide static providers to the created platform
  const browserPlatform = platformBrowserDynamic([
    { provide: ConsoleLogger }
  ]);

  // After bootstrapping your module you can use thק appModuleRef to configure
  // The module injector, and get access to this module components

nirkaufman

import VideoPlayer from "./VideoPlayer";

const App = () => (
  <div>
    <h1>Declarative Usage</h1>

    {/* create context for a VideoPlayer */}
    <VideoPlayer>

      <VideoPlayer.Player src={"sample.mp4"}/>

nirkaufman

// Concept

@Directive({
    selector: 'introTip'
})
class IntroTipDirective implements Oninit{
    @Input('introTip') key: string;

    constructor(private hostElement: ElementRef,
                private interService;