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/
Create React App
https://github.com/facebook/create-react-app
npx create-react-app my-app
cd my-app
npm start
Getting started / Creating Components
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
This is the most basic usage
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
Donot
forget toexport default
.
React-dom / adding it to index.html
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
separating out into separate files
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
how to pass functions down into other components
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 propsaddFish={ this.props.addFish }
instead
Importing CSS
import './css/style.css';
- do this in index.js
Importing Component
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
importing JSON
// 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
Tips and Tricks
- any function that changes state needs to be in the main app.js
$r
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
ES6 variable destruction
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
Component Validation with propTypes
import PropTypes from "prop-types"; const Header = props => ( ... ); Header.propTypes = { tagline: PropTypes.string.isRequired }
tips/hints in JSX
<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