Scribd
Upload
12 views

3 React

Uploaded by

Laiba Tariq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

3 React

Uploaded by

Laiba Tariq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Node & React Lessons 3.1 - 3.

3 Reference Cheatsheet

NPM usage useState hook

npm init # create a package.json // 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 package.json const [count, setCount] = useState(0)
npm install --save package-name
npm install # Install all req’s in package.json // Adds one to ‘count‘ and then re-renders the component
node file.js # Run a given file with node setCount(count + 1)

Node Terminology Full React Example


Node.js 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 "./App.css";
import sendIcon from "./images/envelope.png";
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("");
package.json 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 = ev.target.value;
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("http://some.com/api/")
to another .then(response => response.json())
.then(data => {
render React renders templated HTML to the page. console.log("Data received:", data);
state Keep the variables that change in state, and modify setChatLog(data.messages);
them with setState to rerender your page });
}, [])

JSX Examples // Temporary variables and debugging go here


let messageCount = chatLog.length;
console.log("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 = ( chatLog.map(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} />
data.map(item => ( Send message
<p>Name: {item} </p> </button>
)) </div>
}
</div> );
); }

Kickstart Coding http://kickstartcoding.com/

You might also like