React

This week I read the following sources, which I'll list first and should give you an idea of the kids of issues I was trying to figure out.

This react-reveal fade tutorialwhich helped me finally get one image to fade onto another for the opening "home" transition from a black-and-white image to a colorforest. I'll expound on that later.

This css transition articlethat I read before finding react-reveal. This is just another way to get images to fade onto one another and can do other sorts of things with it.

CSS placing one image on top of anotheris my confused attempt at doing the same. And this css fade-out effect article. None of these CSS options were very helpful. I looked at making an SVG a background again not helpful.

I think the issue I ran into with using CSS instead of like, a whole component to make the transitions, is that I had to set an image as a background in most CSS options which meant it coulden't be its own component. I already have things structured in a more modular way and wanted to keep things to that design so decided to go with react reveal.

react-revealis amazing it lets you flip, rotate images from different directions and gives you a sandbox from which to view the options so you're sure of what you're getting. I chose one that gives you a button that activates the fade in/out of an image and played around with making it work.

The only troubles I had with this react-reveal stuff is that my images refused to load given the way they displayed things. I looked up displaying an image from url in reactJS for help and [importing images into react components(https://stackoverflow.com/questions/43823289/how-to-import-image-svg-png-in-a-react-component) because nothing seemed to work. also looked up react transitions generally Heres what finally did work;

import React from 'react';
import Fade from 'react-reveal/Fade';
import vectorlines2 from '../../images/vectorlines2.svg';

class Fadein extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ show: !this.state.show });
  }
  render() {
    return (
      <div className='vectorlines2'>


        <Fade when={this.state.show}>

<img src ={vectorlines2}></img>

        </Fade>
        <button
          className="btn btn-success my-5"
          type="button"
          onClick={this.handleClick}
        >
          { this.state.show ? 'Hide' : 'Show' } Message
        </button>
      </div>
        );
      }
    }

    export default Fadein;

..this code is working on the 'colorforest' picture and fades into the 'blacknwhite' picture, which I rendered in the 'homecontainer' as being in the same DIV and that way could still keep each image its own component;

import React, { Component } from 'react';
import Blacknwhite from '../components/Blacknwhite.js'

import White from '../components/White.js'
import Gridlist from '../components/Gridlist.js'
import Slider from '../../projects/components/myslider/Slider.js'
import Fadein from '../components/fade/Fadein.js'




class Homecontainer extends Component {
  render() {
    return (
      <div className="homecontainer">

      <div className='same'>
        <Blacknwhite />
        < Fadein />
        </div>
        <Slider />
        <Gridlist />
      </div>
    );
  }
}
export default Homecontainer;

I positioned them in the same way in app.css

.blacknwhite{
    position: absolute;
    height:50em;
    width:50em;

}

.vectorlines2{
    position: absolute;
    height:50em;
    width:50em;

SEE PICTURES.

..the other side issue I had was that I realized I nested a folder within a folder in github which meant i only had a gitignore in one folder, not the other, etc. I didin't relize create-react-app nests folders for you already so I have an extra one. That messed up my pushes, pulls, had to look this up to get things right push to master, pull, i dunno still kinda confused about what happened.

attachments

		last modified	size
	Screen_Shot_2019-02-18_at_8.34.39_AM.png	Mon Nov 25 2024 10:21 am	2.0M
	Screen_Shot_2019-02-18_at_9.01.18_AM.png	Mon Nov 25 2024 10:21 am	2.9M
	Screen_Shot_2019-02-18_at_9.01.28_AM.png	Mon Nov 25 2024 10:21 am	2.0M