Share
Explore

React Lab Activities Workbook

​
Peter Sigurdson
comparing npm with npx
0
Column 1
npm
npx
1
Purpose
Package manager for installing and managing dependencies.
Command runner for executing packages and binaries from the command line.
2
Command format

npm <command>

npx <command>

3
Global packages
Installs packages globally on your system.
Does not install packages globally; executes packages from the local node_modules directory or from a remote registry.
4
Package execution
Cannot execute packages directly; you need to install them first.
Can execute packages directly without needing to install them first.
5
Version
Installed as a separate tool from Node.js; updates separately.
Included with Node.js since version 5.2.0.
6
Usage
Used for installing and managing dependencies for a project.
Used for running one-time commands or executing packages without installing them globally.
7
Inventor
Isaac Z. Schlueter, creator of Node.js package manager.
Kat Marchán, member of the npm development team.
There are no rows in this table
⁠

Lab Activity: Create a Tik Tak Toe Game in REACT:

​Lab Activity:
Create a simple React app with 2 fields and a button that copies the value from Field A to Field B:
Set up a new React app using Create React App. Open your terminal and run the following command:
npx create-react-app my-app
This will create a new React app in a directory named my-app.
Navigate to the my-app directory:
cd my-app
Open the App.js file in your favorite code editor.
Inside the App component, define two state variables using the useState hook:

import React, { useState } from 'react';
function App() { const [valueA, setValueA] = useState(''); const [valueB, setValueB] = useState(''); // rest of the component code... }
Here, valueA and valueB are the two fields. setValueA and setValueB are functions that can be used to update the state of these fields.
Create two input fields in your component's return statement. These fields will allow the user to enter a value in Field A and display the value in Field B:
return ( <div> <label> Field A: <input type="text" value={valueA} onChange={(e) => setValueA(e.target.value)} /> </label> <br /> <label> Field B: <input type="text" value={valueB} readOnly /> </label> <br /> <button onClick={() => setValueB(valueA)}>Copy Value</button> </div> ); ​
The onChange event of the Field A input field is handled by the setValueA function. The value attribute of the Field A input field is set to valueA, which means that the input field will display the current value of Field A.
The value attribute of the Field B input field is set to valueB, which means that the input field will display the current value of Field B. The input field is also readOnly, which means the user can't edit the value.
The onClick event of the button is handled by an anonymous function that calls the setValueB function with the current value of Field A.
Run the app in your terminal:

npm start
This should open the app in your default browser. You should see two input fields and a button. Enter a value in Field A, click the button, and the value should be copied to Field B.
There!
You now have a React app with two fields and a button that copies the value from Field A to Field B.
⁠
image.png
⁠
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.