reactJS cheatsheet

Table of Contents

react.dev documentation
React tutorial
Uses JSX for markup language. Essentially just strict html (everything has to be closed)
.jsx (for file extension)
make sure to wrap things in valid parents (e.g. <div>...</div> or<>...<>)

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do</p>
    <>
  );
}

How to run a REACT website on linux/ubuntu

install npm - sudo apt install npm
check versions - npm --version and node version

If necessary, install node.js

curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
	sudo bash nodesource_setup.sh
	sudo apt-get install -y nodejs

https://react.dev/

Displaying data

Curly braces let you escape back into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display user.name

return (
  <h1>
    {user.name}
  </h1>
);

simple JSX application

import * as React from "react";
import * as ReactDOM from "react-dom";

const root =
	ReactDOM.createRoot(document.getElementById("root"));

root.render(
	<p>
		Hello, <strong>JSX</strong>
	</p>
);

Built in HTML tags

import * as React from 'react';
import * as ReactDOM from 'react-dom';

const root =
ReactDOM.createRoot(document.getElementById('root'))
root.render(
	<div>
		<button />
		<code />
		<input />
		<label /<ul />
	</div>
);


import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 
const root =  ReactDOM.createRoot(document. getElementById('root')); 
	
root.render(  
	<section>
		<header>
			<h1>A Header</h1>    
		</header>
		<nav>      
			Nav Item    
		</nav>    
		<main>      
				<p>The main content...</p>  
		</main>
		<footer>  
			<© 2021>/small>  
		</footer>
</section> );

encapsulating html

import * as React from "react";
import * as ReactDOM from "react-dom";

class MyComponent extends React.Component {
	render() {
		return (
			<section>
				<h1>My Component</h1> 
				<p>Content in my component...</p>
			</section>
		);
	}
}

const root =
	ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyComponent />);

namespaced components

import * as React from "react";
import * as ReactDOM from "react-dom";
import MyComponent from "./MyComponent";

const root =
  ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <MyComponent>
    <MyComponent.First />
    <MyComponent.Second />
  </MyComponent>
);

Dynamic property values and text

import * as React from 'react';
import * as ReactDOM from 'react-dom';

const enabled = false;
const text = 'A Button';
const placeholder = 'input value...';
const size = 50;

const root =
  ReactDOM.createRoot(document.getElementById('root'))
  
root.render(
  <section>
    <button disabled={!enabled}>{text}</button>
    <input placeholder={placeholder} size={size} />
  </section>
);

Mapping collections to elements

import * as React from "react";
import * as ReactDOM from "react-dom";

const array = ["First", "Second", "Third"];

const object = {
  first: 1,
  second: 2,
  third: 3,
};

const root =
  ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <section>
    <h1>Array</h1>
    <ul>
      {array.map((i) => (
        <li key={i}>{i}</li>
      ))}
    </ul>
    <h1>Object</h1>
    <ul>
      {Object.keys(object).map((i) => (
        <li key={i}>
          <strong>{i}: </strong>
          {object[i]}
        </li>
      ))}
    </ul>
  </section>
);

Building fragments of JSX

Fragments are a way to group together chunks of markup without having to add unnecessary structure to your page. For example, a common approach is to have a React component return content wrapped in a <div> element. This element serves no real purpose and adds clutter to the DOM.


import * as React from "react";
import * as ReactDOM from "react-dom";

import WithoutFragments from "./WithoutFragments";
import WithFragments from "./WithFragments";

const root =
  ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <div>
	<WithoutFragments />
	<WithFragments />
  </div>
);

using fragments to avoid using unnecessary tags

import * as React from "react";

class WithFragments extends React.Component {
  render() {
    return (
      <>
        <h1>With Fragments</h1>
        <p>Doesn't have any unused DOM elements.</p>
      </>
    );
  }
}

export default WithFragments;

Setting component state

import * as React from "react";

class MyComponent extends React.Component {
  state = {
    first: false,
    second: true,
  };
  render() {
    const { first, second } = this.state;

import * as React from "react";
class MyComponent extends React.Component {
  state = {
    heading: "React Awesomesauce (Busy)",
    content: "Loading...",
  };

constructor() {
  super();
  setTimeout(() => {
    this.setState({
      heading: "React Awesomesauce",
      content: "Done!",
    });
  }, 3000);
}

render() {
  const { heading, content } = this.state;
  return (
    <main>
      <h1>{heading}</h1>
      <p>{content}</p>
    </main>
    );
  }
}

export default MyComponent;

Passing property values

like state data that gets passed into components
Different from state data - only set once

import * as React from "react";
class MyButton extends React.Component {
	static defaultProps = {
		disabled: false,
		text: "My Button",
	};
	render() {
		const { disabled, text } = this.props;
		return ;
	}
}
export default MyButton;

Default property values are not set with a default state, but rather as a class attribute called defaultProps
this is because properties are immutable

Render component without props - use defaultProps instead

import * as ReactDOM from "react-dom";
import MyButton from "./MyButton";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();

;

Setting property values

import * as React from "react";

class MyButton extends React.Component {
	render() {
		const { disabled, text } = this.props;
		return ;
	}
}
export default MyButton;

component expects array property value
import * as React from "react";
class MyList extends React.Component {
	render() {
		const { items } = this.props;
		return (
			
				{items.map((i) => (
					<li key={i} > {i}*<li>
				))}
			
		);
	}
}
export default MyList;

functional React component

this is a function (similar to how functions work in other computer languages

import * as React from "react";

export default ({ disabled, text }) => (
	<button disabled={disabled}>{text}</button>
);

import * as React from "react";
import * as ReactDOM from "react-dom";
import MyButton from "./MyButton";
const root =
	ReactDOM.createRoot(document.getElementById("root"));


function render({ first, second }) {
	root.render(
		<main>
			<MyButton text={first.text}
				disabled={first.disabled} />
			<MyButton text={second.text}
				disabled={second.disabled} />
		</main>
	);
}

render({
	first: {
		text: "First Button",
		disabled: false,
	},
	second: {
		text: "Second Button",
		disabled: true,
	},
});

Passing property values


import * as React from "react"; 
class MyButton extends React.Component 
	static &defaultProps = {    
		disabled: false,    
		text: "My Button",  
	};   
	render() {    
		const { disabled, text } = this.props;  

		return <button disabled={disabled}>{text}</button>  
	} 
} 

export default MyButton;

Container components

import * as React from "react";
import MyList from "./MyList";

function fetchData() {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve(["First", "Second", "Third"]);
		}, 2000);
	});
}
class MyContainer extends React.Component {
	state = { items: [] };

	componentDidMount() {
		fetchData().then((items) => this.setState({ items }));
	}
	
	render() {
		return <MyList {...this.state} />;
	}
}

export default MyContainer;