Route handler for POST request to add JSON item

Route handler for POST request to add JSON item => solution without database

app.post('/api/v1/cards', (req, res) => {

// console.log(req.body);

// solution to work without database

const newId = cards[cards.length - 1].id + 1;

const newCard = Object.assign({ id: newId }, req.body);

cards.push(newCard);

fs.writeFile(

`${__dirname}/data/card-data.json`,

JSON.stringify(cards),

(err) => {

res.status(201).json({

status: 'success',

data: { images: newCard },

});

}

); // use asynchronous writeFile

});

node

Install Posman API platform on Kubuntu

If Postman do not start after system reinstall, do this:

Extract Postman from postman-linux-x64.tar.gz to Downloads.

touch /home/user/.local/share/applications/Postman.desktop

////////////////////////

[Desktop Entry]

Encoding=UTF-8

Name=Postman

Exec=/home/user/Downloads/Postman/app/Postman %U

Icon=/home/user/Downloads/Postman/app/resources/app/assets/icon.png

Terminal=false

Type=Application

Categories=Development;

////////////////////////

Start Postman, skip creating account and go to File => Settings => Themes => select dark theme.

Ctrl++, Ctrl+- to increase user interface font size.

https://learning.postman.com/docs/getting-started/installation-and-updates/#installing-postman-on-linux

https://www.postman.com/downloads/?utm_source=postman-home

https://www.postman.com/

Check and listen open active ports on Unix

sudo lsof -i -P -n | grep LISTEN // list open ports

sudo netstat -tulpn | grep LISTEN

sudo ss -tulpn | grep LISTEN

sudo lsof -i:22 // see a specific port such as 22 with PID USER FD TYPE DEVICE NODE NAME

sudo nmap -sTU -O IP-address-Here

https://www.cyberciti.biz/faq/unix-linux-check-if-port-is-in-use-command/

sudo kill `sudo lsof -t -i:3000` // kill process on port 3000

https://stackoverflow.com/questions/9346211/how-to-kill-a-process-on-a-port-on-ubuntu

Node server backend for React App

cat /etc/hosts

http://localhost:3001/ === http://127.0.0.1:3001/

run react and node servers in parallel on UNIX => & as separator in react-app/package.json

"scripts": {

"start": "react-scripts start & nodemon node src/server.js",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

npm init -y // if install new empty project

npm i dotenv // in existing project

npm i express // in existing project

sudo npm i nodemon -g // automatically restarts node server after change

npm list -g // global install === -g

/usr/local/lib

├── eslint@8.22.0

├── live-server@1.2.2

├── node-sass@7.0.1

├── nodemon@2.0.20

└── npm-run-all@4.1.5

https://stackoverflow.com/questions/30950032/how-can-i-run-multiple-npm-scripts-in-parallel

https://towardsdev.com/how-to-set-up-a-node-js-express-server-for-react-c19104568d12

https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/

https://www.geeksforgeeks.org/how-to-connect-node-js-with-react-js/

gitignore not working or remove untracked files in git

git rm -r --cached .

git add .

git commit -m "untrack files contained in the .gitignore file"

git reset HEAD . // cancel all commits

git reset --hard

git clean -n

git clean -d -n

https://linuxize.com/post/how-to-remove-untracked-files-in-git/

Understanding what are props in React

// search-box.jsx

import './search-box.scss';

const SearchBox = (props) => (

<input

className='search'

type='search'

placeholder={props.placeholder}

onChange={props.onSearchChange}

/>

);

export default SearchBox;

// is same as above but worse in terms of code

import './search-box.scss';

export const SearchBox = ({ placeholder, onSearchChange }) => (

<input

className='search'

type='search'

placeholder={placeholder}

onChange={onSearchChange}

/>

);

export default SearchBox;

// App.js

<SearchBox

placeholder='Search...'

onSearchChange={this.onSearchChange}

/>

//

`value` prop to a form field without an `onChange` handler

You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

<input value='' />

// change to defaultValue=''