React JS

React Links: links

JSX jsx

Props: props

Refs: refs

React Routes routes

State management state

React Context: https://reactjs.org/docs/context.html

Notes notes

npm install react-scripts

https://blog.logrocket.com/everything-you-need-to-know-about-react-scripts/

https://github.com/facebook/create-react-app

npx create-react-app my-app
cd my-app
npm start

import React from 'react';
 
class StorePicker extends React.Component {
 
}

- use this to pull in an entire library

or

import { Component } from 'react';
 
class Storepicker extends Component {
 
}

- use this to cherry-pick a certain method from a library

import React from 'react';
 
class Order extends React.Component {
 
    render() {
        return (
            <div className="order">Order!!</div>
        )
    }
 
}
 
export default Order;

- definitive way to start a react component file

Do not forget to export default.

render( <StorePicker />, document.querySelector( '#main' ) );
//render( <StorePicker></StorePicker>, document.querySelector( '#main' ) );
//render( <StorePicker />, document.getElementById( 'main' ) );

- Example 1

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Router from './components/Router';
 
ReactDOM.render( <Router />, document.querySelector( '#root' ) );

- Example 2

import React from 'react';
import ReactDOM from 'react-dom';
 
class Hello extends React.Component {
    render() {
        return <h1>Hello World!</h1>
    }
}
 
ReactDOM.render( <Hello />, document.querySelector( '#root' ) );

- Example 3

import React from 'react';
import { render } from 'react-dom';
import StorePicker from './components/StorePicker';
 
render( <StorePicker />, document.querySelector( '#main' ) );

- file 1

import React from 'react';
 
class StorePicker extends React.Component {
    render() {
        return <p class="hey">I am store picker!</p>
    }
}
 
export default StorePicker;

- file 2

import React from 'react';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
 
class App extends React.Component {
 
    state = {
        fishes: {},
        order: {}
    };
    addFish = fish => {
        // 1. Take a copy of the existing state
        const fishes = { ...this.state.fishes };
        // 2. Add our new fish to that fishes variable
        fishes[`fish${Date.now()}`] = fish;
        // 3. Set the new fishes object to state
        this.setState({ fishes });
    };
 
    render() {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Jim is cool" />
                </div>
                <Order />
                <Inventory addFish={this.addFish} />
            </div>
        )
    }
 
}
 
export default App;

- app.js, simply pass the function to the component in the render function like this variableName={this.functionName}

import React from 'react';
import AddFishForm from './AddFishForm';
 
class Inventory extends React.Component {
 
    render() {
        return (
           <div className="Inventory">
                <h2>Inventory!!</h2>
                <AddFishForm addFish={ this.props.addFish }/>
           </div>
        );
    }
 
}
 
export default Inventory;

- this is how you would continue to pass the function down to another component

Note use of props addFish={ this.props.addFish } instead

import './css/style.css';

- do this in index.js

import React from 'react';
import Order from './Order';

- how to import a component assuming Order.js exists

class App extends React.Component {
    return ( 
        <Order />
    )
}

- usage

import React from 'react';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
 
class App extends React.Component {
 
    render() {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagLine="Jim is cool"/>
                </div>
                <Order />
                <Inventory />
            </div>
        )
    }
 
}
 
export default App;

- example App.js

// This is just some sample data so you don't have to think of your own!
const fishes = {
  fish1: {
    name: "Pacific Halibut",
    image: "/images/hali.jpg",
    desc:
      "Everyone’s favorite white fish. We will cut it to the size you need and ship it.",
    price: 1724,
    status: "available"
  },

 ...
};

export default fishes;

- sample-fishes.js

import sampleFishes from '../sample-fishes';

...

 loadSampleFishes = () => {
     this.setState({ fishes: sampleFishes })
 }

- import and set to state in a function

- any function that changes state needs to be in the main app.js

you can use $r in console to reference a certain react element in the console. eg main App Component where state is.

go to console and type:

$r.state

$r.state.propname

Object.keys( $r.state.propname )

- get keys

const image = this.props.details.image;
const name = this.props.details.name;
...

- this

const { image, name, price, desc, status } = this.props.details;

- can be turned into this

import PropTypes from "prop-types";
 
const Header = props => (
...
);
 
Header.propTypes = {
tagline: PropTypes.string.isRequired
}

 <input type="text" placeholder="store name" required defaultValue={ getFunName() } />
 <button onClick={ this.handleClick } type="submit" className="btn">visit store </button>

{} - this means I'm about to write some javascript

className=“btn” - to add a class use this, not class=“btn”

onClick={ functionName } - to add an event listener do this