React JS

**Best Of React Links ** https://github.com/LukasMasuch/best-of-react

React Links: links

JSX jsx

Props: props

Refs: refs

React Routes routes

React Native: react-native

State management state

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

mobx - https://mobx.js.org/README.html

Bulletproof React - This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well.
https://github.com/alan2207/bulletproof-react

React-based UI toolkit: https://blueprintjs.com/docs/

React Animate on scroll
https://github.com/dbramwell/react-animate-on-scroll

React Scanner:
https://github.com/aidenybai/react-scan#readme
https://www.npmjs.com/package/react-scanner

Understanding React Hydration
https://www.gatsbyjs.com/docs/conceptual/react-hydration/

What is React Hydration
https://medium.com/@franciscomoretti/what-is-react-hydration-84be9627bd04

Why Signals Are Better Than React Hooks
https://www.youtube.com/watch?v=SO8lBVWF2Y8
npm install @preact/signals-react

All 12 useState & useEffect Mistakes Junior React Developers Still Make in 2023
https://www.youtube.com/watch?v=-yIsQPp31L0

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

https://www.smashingmagazine.com/2021/11/useful-react-hooks/

https://legacy.reactjs.org/docs/hooks-rules.html

https://blog.logrocket.com/understanding-common-frustrations-react-hooks/

const fetchData = async () => {
    return await fetch('https://getDataExample').then((res) => res.json());
};

// React 18 and earlier:
const OldApproach = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetchData().then(setData);
    }, []);

    return <div>{data?.title}</div>;
};

// React 19:
const NewApproach = () => {
    const data = use(fetchData());

    return <div>{data?.title}</div>;
};