Node & React Lessons 3.1 - 3.
3 Reference Cheatsheet
NPM usage useState hook
npm init # create a [Link] // Create a state value that is initially set to 0. The
npm install package-name # install package // value is stored in ‘count‘ and updated with ‘setCount‘
# & add --save to also add in [Link] const [count, setCount] = useState(0)
npm install --save package-name
npm install # Install all req’s in [Link] // Adds one to ‘count‘ and then re-renders the component
node [Link] # Run a given file with node setCount(count + 1)
Node Terminology Full React Example
[Link] Run-time spin-off from Chrome that allows us to import { useState, useEffect } from "react";
use node on the “server side” (e.g. in the terminal)
NPM Node Package Manager - used for downloading // CSS & images can be included "magically"
JavaScript packages, and other JS-dev related tasks. import "./[Link]";
import sendIcon from "./images/[Link]";
dependencies Packages that are required to be pre-installed
for a given package to be able to run. function App() {
// Define starting state and set functions
node modules Contains your downloaded dependencies. const [message, setMessage] = useState("");
[Link] Contains meta-data, dependencies, and NPM const [chatLog, setChatLog] = useState([]);
configuration about a project.
// Define functions. Must have for forms.
function onMessageChange(ev) {
React Terms const value = [Link];
setMessage(value); // Modify state
}
JSX JavaScript variant allowing HTML in JS
// Called when the page loads to fetch data
Webpack Tool that combines and processes JS, CSS and // See useEffect cheatsheet for details
other static assets useEffect(() => {
Babel Tool that compiles or translates from one JS variant fetch("[Link]
to another .then(response => [Link]())
.then(data => {
render React renders templated HTML to the page. [Link]("Data received:", data);
state Keep the variables that change in state, and modify setChatLog([Link]);
them with setState to rerender your page });
}, [])
JSX Examples // Temporary variables and debugging go here
let messageCount = [Link];
[Link]("rendering!", messageCount);
// Single HTML element
const paragraph = ( // Return the JSX of what you want visible
<p>Lorem ipsum</p> return (
);
<div className="App">
// JSX Templating <h1>{messageCount} new messages</h1>
const color = "green"; {
const pWithTemplating = ( [Link](text => (
<p>Favorite color: {color}</p> <p>Message: {text}</p>
); ))
}
// Loops within JSX <input onChange={onMessageChange}
const data = ["alice", "bob", "candice"]; value={message} />
const divOfParagraphs = (
<div> <button onClick={() => alert("Hi")}>
{ <img src={sendIcon} />
[Link](item => ( Send message
<p>Name: {item} </p> </button>
)) </div>
}
</div> );
); }
Kickstart Coding [Link]