Starting with React

index

client

Based on this amazing tutorial.

 

 

Components shouldn’t be in our client.js file — that’s messy!

  1. Create components folder
  2. Move Layout class from client.js to new file (Layouts.js) in components folder
    1. NOTE: Component file names should always be capitalized
  3. Add import React from “react”;  to top of Layouts.js file
  4. Export the Layout class (by adding export default right before class Layout) so that client.js can access that class

 


PAGES folder can sometimes be called “ROUTES” folder — high level components

 


LESSON 4

Passing values into components

Right ways and wrong ways

Data and passing around data

TWO WAYS DATA GETS HANDLED IN REACT:

Data and Props:

STATE:

this.setState({name: “Kendramadon”});

“A big question in React JS is State vs Props. State is essentially any data that relates to the internals of a React component, but has nothing to do with the outside world. Props are data that the React.js component depends on to function and render correctly.”

State only gets used if a component has an internal value that only effects that internal value and not the rest of the app

Everything else use props. Injected into every other component

PROP meaning PROPERTIES

Add input field

NOTE:

this.functionName.bind(this)

 

Leave a Reply

Your email address will not be published. Required fields are marked *