Day 56

March 10th, 2018

Hello! Today at the React for Beginners course by Wes Bos I learned something about events, refs, and binding in React.
Events in react work the same as in JavaScript.
React wraps events in something called Synthetic Event.
They are inline

      <button onClick={this.handleClick}>Click me!</button>

An important rule in React is, don't touch the DOM.
So how to reference the input without using querySelectore or jQuery.
We do it with a ref to reference it.

     myInput = React.createRef();
      ...
     render() {
      ...
     ref={this.myInput};

Binding

    goToStore = (event) => {
    console.log(this);

We the property to an arrow function which will allow to bind the value of 'this' to the component.
Handling events.
Push-state - change the URL without having to refresh the page.
We achieve this with React router.

 goToStore = event => {
        event.preventDefault();
    
        const storeName = this.myInput.value.value;
    
        this.props.history.push(`/store/${storeName}`);
    };

We have to stop the form from submitting, we just need the input. Then grab the input with the ref. Finally change the page with push-state.

At the Web Development Bootcamp by Colt Steele I started working on a YelpCamp app, and did the landing pages, added some images in an object.

               img src="<%= campground.image %>"

to add an image

Cheers!