/Edu-MERN-BA.G01

MERN Lessons

Primary LanguageJavaScriptMIT LicenseMIT

MERN LESSONS - BA40FS_MERN

24032023-Keywords

  1. SPA (React,NodeJS,Angular) vs MPA(.Net, Java, PHP)
  2. React
  3. React Virtual DOM
  4. Component
  5. JSX

25032023-Keywords

  1. EcmaScript----ES15
  2. Let vs Const (var)
  3. Default Parameter
  4. Arrow Function =>
  5. OOP
  6. Spread Operator (...)
  7. forEach, Map
  8. JSON Data
  9. Array Filter - Object Assing
  10. https://nodejs.org/en
  11. https://code.visualstudio.com/
  12. https://desktop.github.com/
  13. https://github.com/fdikmen/BA40FS_MERN
  14. Extensions; Prettier - Code formatter, Auto Rename Tag, Auto Close Tag, ES7+ React/Redux/React-Native snippets, Live Share
  15. npm init ---> package.json
  16. npm
  17. npx
  18. npm vs yarn
  19. Hello World with React (https://react.dev/learn/start-a-new-react-project) npx create-react-app hello-world
  20. Folder Structure
  21. npm run build - FOR BUILD FOLDER
  22. index.js

26032023-Keywords

  1. Add file to GitHUB
  2. npm init -y
  3. Module System (Babel, npm install babel-cli babel-preset-es2015 , "start":"babel-node main.js --presets es2015" , import-export-default-as-*)
  4. Component (extends)
  5. Dikkat Edilmesi Gerekenler; 1. Live Share de çalışma, 2. Komutları İlgili Klasörde Yazmaya Çalış, 3. Uygulama Oluşturmak İçin npx create-react-app [APP-NAME] komutunu kullan, 4. Eğer eklentilerde bozulmalar oluyorsa; ES7+ React/Redux/React-Native snippets harici eklentileri silebilirsiniz.

31032023-Keywords

  1. props

01042023-Keywords

  1. props
  2. React Developer Tools
  3. PropTypes
  4. Constructor
  5. Style
  6. Combine styles (Spread & Object.Assing)
  7. Events & Bind
  8. Get Github Repo
  9. send function with props & parameters

02042023-Keywords

  1. Data Bind Methods a. With Function b. in Constructor c. With Arrow Function
  2. State
  3. re-Render (React Diff - React Virtual DOM)
  4. Counter (First App)
  5. Class vs Functional Comp. (Stateful vs Stateless)
  6. PhoneBook (Second app) --> npx create-react-app phonebook

Component, import-export, classComponent, PropTypes, State, Spread (Array Merge), props (array,function)

React Developer Tools, Array.Filter & Array.indexOf

07042023-Keywords

  1. Summary for Phone Book App

08042023-Keywords

  1. LifeCycle - React LifeCycle
  2. React Component LifeCycle [https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/] -- Mounting - Updation - Unmounting
  3. I. Constructor (Mounting)
  4. II. Render -> PURE
  5. III. ComponentDidMount
  6. IV. ComponentDidUpdate
  7. V. ComponentWillUnmont
  8. VI. getDerivedStateFromProps
  9. VII. shouldComponentUpdate
  10. VIII. getSnapshotBeforeUpdate
  11. FETCHING MOCK ==> https://jsonplaceholder.typicode.com/

09042023-Keywords

  1. Fetch (Summary)
  2. Axios
npm i axios
  1. Router
npm i react-router-dom

Project Stop => CTRL + C 04. BrowserRouter (wrapping) - Link - Routes | Route (path-element) MainLink-HomeLink(/) - No Match(*) - Read Parameter - NavLink

14042023-Keywords

  1. Summary
  2. Advanced Components - Higher Order Component

15042023-Keywords

  1. Summary
  2. Advanced Components - Higher Order Component
  3. Redux - npm i redux react-redux

Sample npm i redux react-redux axios Means npm i redux npm i react-redux npm i axios SAVE npm i [libName] --save FORCE npm i [libNAME] -f (or --force)

  1. UI-View-Comp. => ACTION => dispatch => STORE => REDUCER => subscribe => UI-View-Comp.
  2. createStore , reducer(like function), .getState() , dispatch
  3. npm i @reduxjs/toolkit
  • SUGGEST Intellisense -> Suggest Snippet -> ShortCut

16042023-Keywords

Folder Structure https://medium.com/@fdikmen/a-redux-toolkit-project-structure-guide-58093baa88a5

Home Work https://github.com/fdikmen/BA40FS_MERN/blob/main/Lesson12/HomeWork.md

npx create-react-app [appName] --template redux

npx create-react-app [appName]
npm i  @redux-toolkit
npm i  react-redux
Create Folder  Structure
Create Sample  Files (Comp., Slice)
Create Store

https://jsonplaceholder.typicode.com/users/2

  • middleware
  • HOOKS
  • STATE => useState
  • LIFECYCLE => useEffect

next suggest => [Next.JS]

28042023-Keywords

  1. Summary
  2. API - Http Methods (CRUD)
  3. mockapi.ai
  4. Postman

03052023-Keywords

  1. NPM?
npm i [packageName]
npm install [packageName]

Project Start File --> start file(package.json)

npm init
npm init -y
  1. import (React) vs require (NodeJS)
    React
import [CustomName] from '[libName]'

NodeJS

const [CustomName] = require('[libName]')
const slugify = require('slugify')
  1. Global vs Local Package
    Global
npm i -g [packageName] 
npm i --global [packageName]

Local

npm i [packageName]

Global Package List

npm list -g
npm list -g --depth=0

Windows Console Clear => cls MacOS/Linux Console Clear => clear

Use global package

npm link [package]
  1. Create a Project with npm (Create a package.json file) Manuel
npm init

Auto

npm init -y

Settings Sample

npm set init.author.name "fdikmen" ===> npm config ls -l
  1. Install a Module (Lib)
npm install [moduleName]
npm i [moduleName]
  1. License

https://choosealicense.com/licenses/

  1. npm-cache
  • npm i npm-cache
  • npm i [packageName] => npm-cahce install [packageName]

  1. -s --save --no-save

  2. Old Version Install Custom vesion for package

npm i [packageName]@[Version]

List outdated packages

npm outdated

Update packages

npm update
  1. Package for Developer
npm i [packageName] --save-dev
  1. Define script in package.json file
npm run [commandName]
  1. Install Multiple Package
npm i [packageName01] [packageName02] [packageName03] ...
  1. Remove a Package
npm uninstall [packageName]

  1. Stop Command on Termianl [CTRL + C]

  2. Start NodeJS Project

node [mainFileName]

05052023-Keywords

  1. Event & Emitter
// import events module
const events = require('events')
// create an eventEmitter object for management events
const eventEmitter = new events.EventEmitter()

For Create => on or once
For Trigger => emit

  1. __filename & __dirname

06052023-Keywords

  1. Summary & BUG FIXED: once
  2. Extensions for NodeJS npm Intellisense, ESLint, REST Client, ShortCuts for VSCode [https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf]
  3. Callback Function
  4. Promise => function.then(+).catch(-)
  5. File System (require('fs'))
const fs = require('fs');

Read File - Write File - Remove File

// fs.readFile('filename', callback)
// fs.writeFile('filename', 'content', callback)
// fs.appendFile('filename', 'content', callback)
// fs.unlink('filename', callback)
  1. HTTP Server
const http = require('http');

Create Server

const myserver = http.createServer(callback)
const myserver = http.createServer((req,res)=>{})

Define Server Port

myserver.listen(PortNumber)
  1. nodemon
npm install -g nodemon (Windows - MacOS - Linux)
sudo npm install -g nodemon (Optional -> MacOS - Linux)
  1. HTML doc serve with http nodejs server
  2. HTTP Methods (GET - POST - PUT - DELETE)
  3. Route Example

07052023-Keywords

  1. Streams Chunk -> Streams of Data
  2. Stream Types Readable - Writeable - Readable/Writeable (transform)
  3. NodeJS Streaming Logic => eventEmitter.on() -> eventEmitter.emit() -> response.end()
  4. Create ReadableStream
  5. Create WriteableStrem with Pipeline

10052023-Keywords

  1. Summary
  2. npm install express
  3. node-snippets
  4. PUG
  5. convert -> HTML to PUG/JADE
  6. PUG Sample with ExpressJS
  • npm i express
  • Created by "node-express" snippet with node-snippets
  • run project with nodemon
  • npm install pug
  • Sass/Less/Stylus/Pug/Jade/Typescript/Jav for PUG snippets
  • vscode-faker for FAKE DATA

12052023-Keywords

  1. Summary
  2. Define STATIC FOLDER with ExpressJS
  3. Routing with ExpressJS
  4. Postman (https://www.postman.com/downloads/)
  5. Using keywords (?,*,+) with routing
  6. Http Methods with Routing (GET - POST - PUT - DELETE - ALL)
  7. Parameters with Routing (:params)
  8. Router Object in ExpressJS (express.Router())
  • Define express,route in Route File
  • Move route codes to Route File
  • Convert "app" to "router"
  • Module Export
  • import route file
  1. Middleware
  2. Error Handler
  3. Express Application Generator
  • npx express-generator
  • npm i
  • npm start (=> "start": "nodemon ./bin/www")

13052023-Keywords

  1. Summary
  2. DBMS (Database Management System)
  3. NoSQL (NotOnlySQL)
  4. MongoDB
  1. https://brew.sh/index_tr (install brew)
  2. brew update
  3. brew install mongodb
  4. sudo mkdir -p /data/db
  5. sudo chown -R $USER /data/db
  6. brew services start mongodb
  7. mongo
  • For Windows;
  1. Download MSI File ans Install with next next (https://www.mongodb.com/try/download/community-kubernetes-operator)
  2. cd C:\ (in Admin CMD)
  3. md "data\db" (in Admin CMD)
  4. "[mongoDb-bin-folder-path]\mongod.exe" --dpath="C:\data\db" (in Admin CMD)
  5. Other Steps ...
npx express-generator
npm install -g express-generator
npm i nodemon -g

ERROR: nodemon permission denied windows with powershell script
Powershell (run as Admin)
BUG FIXED: 
    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
https://www.mongodb.com/try/download/community-kubernetes-operator

17052023-Keywords

  1. Summary
  2. What is Connector?
  3. Mongoose https://mongoosejs.com/docs/index.html
  4. Using mongoDB on cloud (MongoDB Atlas) https://www.mongodb.com/atlas/database
  5. MongoDB Compass

20052023-Keywords

  1. Summary
  2. What is Connector/Driver?
  4. Mongoose
  5. Install & Using Mongoose
  6. CRUD Operations with Mongoose Create, Read, Update, Delete, Read All, Delete All, Aggregate (JOIN)

21052023-Keywords

  1. Summary
  2. Routes, Models, Controllers Folders
  3. Coding MovieApp API (https://github.com/fdikmen/movieapp-api)
  • npx express-generator --view=pug movieapp-api cd movieapp-api npm install npm start
  • Create database (MovieAppDB) on Compass
  • npm install mongoose
  • Create and Codes db.js for connetion to MongoDB

24052023-Keywords

  1. Summary
  2. Get a Movie API
  3. Using Error Handler
  4. Update a Movie
  5. Delete a Movie
  6. Get the top 10 movies
  7. Movies between two dates

Windows

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

MacOS/Linux

sudo [...]

26052023-Keywords

A. Summary B. Coding for Director EndPoints 1. Create Director Model (Director.Model.js) 2. Create Director Route (director.routes.js) 3. Import & Use Director Route (in app.js) 4. Create Routes 4.1. Create Director POST Endpoint (/) 4.2. Create Director GET Endpoint (/) 4.3. Create Director GET Endpoint (/WithMovies) 4.4. Create Director GET Endpoint (/:director_id) 4.5. Create Director PUT Endpoint (/:director_id) 4.6. Create Director DELETE Endpoint (/:director_id) 4.7. Create Movie GET Endpoint (/listWithDirector)

27052023-Keywords

A. Summary B. FullStack Form Project
Link;
https://github.com/fdikmen/Edu-MERN-Contact-Form-App

28052023-Keywords

  1. Summary NEW Repository => https://github.com/fdikmen/Edu-MERN-BA.G01
  2. Build & Production & Hosting/Server/SSL & Docker Containers Step by step hosting nodejs app;
    https://dev.to/techfortified/how-to-host-nodejs-express-restful-api-on-cpanel-2e7c
    Free SSL;
    https://www.sslforfree.com/
  3. JS PROMISES
  4. React LAZY
  5. React Suspense
  6. Isomorphic - SSR - Server Side Rendering
  7. NextJS
  8. Questions?