react-component-syntax.md

REACT COMPONENT STRUCTURES

React Component with state

import React, { Component } from 'react'; import './App.css';

class App extends Component {

state = { }

render() {

return (
  <div className="App">
  </div>
);

} }

export default App;

React Component with state and constructor

export default class App extends Component { constructor() { super(); this.state = { }; }

render() {

return (
  <div className="App">
  </div>
);

} }

export default App;

React component basic

import React from 'react';

const GuestList = (props) =>

GuestList.propTypes = { guest: PropTypes.array.isRequired }

export default GuestList;

React component basic( deconstructed props and functionality)

import React, { Component } from 'react'; import CardDisplay from './CardDisplay'; import PropTypes from 'prop-types'

const Card = ({ location, yearData, selected, cardSelected }) => {

const colorTeal = { color: '#25727C' } const colorRed = { color: '#A63A50' }

const dataYear = yearKeys.map((value, i) => { if (yearData[value] >= 0.5) { return <p key={ i } className='data' style={ colorTeal }> { value }: { yearData[value] }

} else { return <p key={ i } className='data' style={ colorRed }> { value }: { yearData[value] }

} })

return (
  <div>
  
  </div>
);

}

Card.propTypes = { }

export default Card;