esra-justBI
6/20/2019 - 2:59 PM

Advanced React

Inline styles is written as an attribute using double curcly braces (style={{xxx}}). First ones: to read as JavaScript, second to create object literal. You can also create a style object in a variable, and inject that one (style = {object}).

In React, style names are written in camelCase. Style values are almost always string, even if it is numeric. If you write a style value of number, React assumes that the unit is px.

To make styles reusable keep them in a separate JS file. This file should export the styles you want to reuse.

Separating container components from presentational components -> if a component has to have a state, make calculations based on props, or manage any other complex logic, then that component shouldn't also have to render HTML-like JSX. It should render another component, which has a job to render HTMLlike JSX. Presentational component --> renders HTML-like JSX. Actually displaying content. One render function, no other properties. Then you can write it as a JS function: stateless functional component. (export const X = () => { return.. } Container component --> renders presentational component. It figures out what to display.

Stateless functional components have props passed to them. To access these, give your component a parameter(props). Then use props.x instead of this.props.x

propTypes used for:

  1. prop validation: ensure that your props are doing what they're supposed to be doing.
  2. documentation: easier to understand to component class. If a component class expects a prop, then you can give that class a propType. Search for a property named propTypes. If there isn't one, make one. Declare it after the close of your component declaration, as it's a static property. The value of propTypes is an object, not a function! For each prop that your component class expects to receive, there can be only one property on your propTypes object. The name of each property in propTYpes should be the name of an expected prop. (e.g. this.props.message 00> name = message). The value of each property in propTypes should fit this pattern: React.PropTypes.expected-data-type (e.g. string, number, bool, func, array, object).
    If you add .isRequired to a propTYpe, then you will get a console warning if that prop isn't send.

To write propTypes for a stateless functional component, you define a propTYpes object as a property of the stateless functional component itself.

In a react form, you want to server to know about every new character/deletion as soon as it happens. Your screen will then always be in sync with the rest of your application.

  • Listen to a "change" event on the . Define a function that gets called whenever a user enters or deletes any character: event handler. Any time someone types/deletes in input, the handleUserInput() method will update this.state.userInput with the text. This means that Input needs an initial state! Give input a constructor function which takes a parameter or props and calls super props in it's first line. Set state euqual to empty.

-Uncontrolled comopnent: maintains its own internal state. -Controlled component: does not maintain any internal state. Must be controlled by someone else. You have to get info through props. When you give an input a value attribute, the input becomes controlled. It stops using internal storage. This is a more 'react' way of doing things.

Advanced React
content_copyfile_download
Runner.propTypes = {
  message:   React.PropTypes.string.isRequired,
  style:     React.PropTypes.object.isRequired,
  isMetric:  React.PropTypes.bool.isRequired,
  miles:     React.PropTypes.number.isRequired,
  milesToKM: React.PropTypes.func.isRequired,
  races:     React.PropTypes.array.isRequired
};


const Example = (props) => {
  return <h1>{props.message}</h1>;
}
//stateless functional component propTYpes.
Example.propTypes = {
  message: React.PropTypes.string.isRequired
};

//react form input event handler
handleChange(e) {
	  this.setState({
	    userInput: e.target.value
	  });
	}

	render() {
	  return (
	    <input 
	      onChange={this.handleChange} 
	      type="text" />
	  );
	}
}

//set initial state to input
constructor(props) {
    super(props);
    
    this.state = { userInput: '' };
    
    this.handleUserInput = this.handleUserInput.bind(this);
  }
  
  //give input the following attribute in the render function:
  value={this.state.userInput}
  
  change the heading to {this.state.userInput}