Jim's
Tutorials

This week I just decided to start working on the app. I built several components and threw them up on the web. I put some of the art up I'm planning to use for the animations, spent several hours trying to use a material ui 'gridlist' which ended up working pretty nicely, and then made a slider that took pretty much the whole day. I got the slider from this medium article but wasn't easy to set up. I'm trying to go for this kind of lookwhere the previous image remains 'till the next covers it, I'm thinking it has something to do with the 'transform' or 'translate' methods and need to mess around with setting one of the pictures as a background that remains or some-such to achieve that affect.

I read how to better organize your react components to see how front-end designers organize their folders before I get so far in the project it becomes too late to redesign the organization. I decided to organize my components into 'scenes' (see picture below) whereas the 'home'scene would have its own components and containers folder and images associated with it. I think organizing by page makes a lot of sense so thats how I've been approaching things after having read this.

fiddled around with hover effects read this article and such to work on some of these transitions and get comfortable enough with the idea that I can make this thing look at least partially the way I want it to.

I spent a good deal of time messing with SVG packages and react to see how I can get this stuff to 'properly render' becuase i read react has a problem with that. I guess the first mistake I made was reading that something bad was going to happen and pre-emptively trying to fix it before witnessing the thing go wrong myself. I read tutorials like this one about how to get react to render svg code. It's true that you need to use SOME special code to get SVGs to render (see this article) but not all as much as I thought, and probably don't need like whole other packages to get the stuff to work. I got the packages to work, then realized create-react-app must handle for svg's anyway because with or without the package stuff was rendering just fine. you'll see the react svg package in my import statements.

I read a good deal about things like how to center an image in react, css tricks and object fit, and rendering images in react because I was having some problems with this initially (again turned out I just needed the special SVG syntax.) Also read this to try and learn about special svg syntax but was not useful.

I had some trouble rendering some font-awesome stuff which sounds silly but a lot of the material UI and other medium examples I've been using have some of those and just was having trouble getting the libraries to load, or something. read this about fontawesome. This file was not super helpful, did not give me good syntax to render svg files, this file was helpful its what I finally ended up using. It turns out one issue I was having was downloading the packages using both npm and yarn which I guess negate each other so I was getting weird messages about my node file until I deleted it and reinstalled using purely one or the other.

there was the issue of trying to work with these svg files other than simply rendering them though. I read this pretty helpful svg tutorialand tried adding the component mockup i had in xd as an svg component using the 'create react component' plugin that's supposed to give you a shortcut and edit the svg. Did not work too well,I got it to render but it was like a picture and could not, for example, get one of the 6 boxes to become links, could not separate them. Perhaps someone who is an expert in svg knows the syntax well enough. seemed easier to use this material ui gridlist at the end of the day.

read about the material ui themes and how to best use them. read about react material and installing material ui package

homepage picture 1 code

import React, { Component } from 'react';
import vectorlines1 from '../images/vectorlines1.svg';
import ReactSVG from "react-svg";

class Blacknwhite extends Component {
  render() {
    return (
      <div className="blacknwhite">
        <ReactSVG src= {vectorlines1} svgClassName='vectorlines1' />;
      </div>
    );
  }
}
export default Blacknwhite;

homepage picture 2 code;

import React, { Component } from 'react';
import vectorlines2 from '../images/vectorlines2.svg';
import ReactSVG from "react-svg";

class Colorforest extends Component {
    render(){
        return(
            <div className="colorforest">
            <ReactSVG src= {vectorlines2} svgClassName='vectorlines2'/>;
            </div>
        );
    }
}

export default Colorforest

gridlist code;

import React from 'react';
import ReactSVG from "react-svg";
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import tileData from '../data/tileData';



const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
    backgroundColor: theme.palette.background.paper,

  },
  gridList: {
    width: 5000,
    height: 1000,

  },
  subheader: {
    width: '100%',
  },
});


function ImageGridList(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <GridList cellHeight={450} className={classes.gridList} cols={3}>
        {tileData.map(tile => (
          <GridListTile key={tile.img} cols={tile.cols || 3}>
            <img src={tile.img} alt={tile.title} />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

ImageGridList.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ImageGridList);

white background code;

import React, { Component } from 'react';
import vectorlines3 from '../images/vectorlines3.svg';
import ReactSVG from "react-svg";


class White extends Component  {
    render(){
        return(
            <div className ="white">
            <ReactSVG src = {vectorlines3}  svgClassName='vectorlines3' />;
            </div>
        );
    }
}

export default White;

CONTAINERS FOR ALL OF THIS CODE

import React, { Component } from 'react';
import Blacknwhite from '../components/Blacknwhite.js'
import Colorforest from '../components/Colorforest.js'
import White from '../components/White.js'
import Gridlist from '../components/Gridlist.js'
import Slider from '../../projects/components/myslider/Slider.js'




class Homecontainer extends Component {
  render() {
    return (
      <div className="homecontainer">
        < Blacknwhite />
        < Colorforest />
        < White />
        < Gridlist />
        < Slider />


      </div>
    );
  }
}
export default Homecontainer;

slider code;

import React from 'react';


const RightArrow = (props) => {
  return (
    <div className="nextArrow" >
      <button onClick={props.goToNextSlide}>click here</button>

    </div>
  );
}

export default RightArrow;

import React from 'react'

const Slide = ({image}) => {
    const styles = {
    backgroundImage: `url(${image})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '50% 60%'
    }
  return <div className="slide" style={styles}></div>
}

export default Slide



md5-dfc62204b55c76ea5a5eeed04188543b



import React, { Component } from 'react'
import Slide from './Slide.js'
import RightArrow from './Arrows.js'

export default class Slider extends Component {
  constructor(props) {
    super(props)

    this.state = {
      images: [
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/aurora.jpg",
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/canyon.jpg",
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/city.jpg",
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/desert.jpg",
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/mountains.jpg",
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/redsky.jpg",
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/sandy-shores.jpg",
        "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/tree-of-life.jpg"
      ],
      currentIndex: 0,
      translateValue: 0
    }
  }

  goToNextSlide = () => {

      if(this.state.currentIndex === this.state.images.length - 1) {
            return this.setState({
              currentIndex: 0,
              translateValue: 0
            })
          }
      this.setState(prevState => ({
      currentIndex: prevState.currentIndex + 1,
      translateValue: prevState.translateValue + -(this.slideWidth())
    }));

  }

  slideWidth = () => {
     return document.querySelector('.slide').clientWidth
  }

  render() {
     return (
       <div className="slider">
       <div className="slider-wrapper"
          style={{
            transform: `translateX(${this.state.translateValue}px)`,
            transition: 'transform ease-out 2s'
          }}>

         {
           this.state.images.map((image, i) => (
             <Slide key={i} image={image} />
           ))
         }

         </div>

        <RightArrow goToNextSlide={this.goToNextSlide}
        />
        Hello!!!!
      </div>
    );
  }
}

All of these components are sort of just sitting next to each other(see attached picture ) I just want to be sure I am even skilled enough to make all of these things before perhaps needing to mess around with my adobe xd layout plans. So far so good, the slider is going to be the most difficult part I think and can mostly make that appear.

It's honestly helpful to just be able to concentrate on creating this thing, I was able to code for 4 hours yesterday and lost myself in the work, because making a project is just more inspiring. I like having a goal I guess.

next is to get these animations working which is super scary but I feel like got started looking at it with the slider.

attachments