dangdennis

import React, { Component } from 'react';

class VideoPlayer extends Component {
  constructor(props) {
    super(props);

    // Still determing the optimal method to set the initial state of the range inputs
    // to match the video's states on initial load. Thus, the range will start at 0, but not
    // match the volume and playback rate of the video until used.
    // May just default playbackrate and volume at 0.5 (50%).

dangdennis

// We're currently restructuring our application and organization structure. So naming convention and file structure will change dramatically later this year. 

import React from "react";
import { Route, Switch } from "react-router-dom";
import Navbar from "./features/navbar";
import Landing from "./landing/landing";
import SearchResults from "./search_results/search_results";
import PlayerProfile from "./player_profile/player_profile";
import Head2HeadResults from "./h2h_results/head2head_results";
import ErrorPage from "./static_pages/error_page";

dangdennis

  {
    "dependencies": {
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "reason-react": ">=0.4.0"
    },
    "devDependencies": {
      "bs-platform": "^4.0.5"
    }
  }

dangdennis

/* Using Belt API for familiarity */
open Belt;

/* Will return an array of posts */
let fakeRealApi = "https://jsonplaceholder.typicode.com/posts";

/* Defining types for the expected posts */
type post = {
  userId: int,
  id: int,

dangdennis

/* FirstComponent.re */

let component = ReasonReact.statelessComponent("RandomComponent");

let make = (_children) => {
  ...component,
  render: _self =>
    <div> {ReasonReact.string("Your first ReasonReact component")} </div>,
};

dangdennis

{
    "dependencies": {
      "@glennsl/bs-json": "^3.0.0",
      "bs-fetch": "^0.3.0",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "reason-react": ">=0.4.0"
    }
}

dangdennis

/* SecondComponent.re */

let component = ReasonReact.statelessComponent("AnotherRandomComponent");

let make = (_children) => {
  ...component,
  render: _self =>
  <div>
    <div> {ReasonReact.string("Your second ReasonReact component")} </div>
    <FileName />

dangdennis

/* Compiler error: You can convert a int to a string with string_of_int.*/
let integer10: int = 10; 

/* Proper use of typecast methods */
let string10: string = string_of_int(10);
let boolean10: bool = bool_of_string("true");
let float10: float = float_of_int(10);
let integer10Again: int = int_of_float(10.); 
let integer5: int = int_of_char('a'); /* Converts character to ASCII decimal equivalent */

dangdennis

/* ReasonElements.re */

let component = ReasonReact.statelessComponent("ReasonElements");

let make = _children => {
  ...component,
  render: _self => {
    let someListOfReactElements = [<div />, <div />, <div />];
    let someArrayOfReactElements = Array.of_list(someListOfReactElements);
    let isNull = true;

dangdennis

module ChildComponent = {
  let component = ReasonReact.statelessComponent("ChildComponent");
  /* You must declare your props as labeled arguments with the ~ symbol */
  /* If I don't, compile error: It only accepts 1 argument; here, it's called with more. */
  let make = (~randomTextProp, _children) => {
    ...component,
    render: _self => <p> {ReasonReact.string(randomTextProp)} </p>,
  };
};