[Samer Buna] Learning Full-Stack JavaScript Development: MongoDB, Node and React [2016, ENG]

---

Original src:

https://github.com/jscomplete/learn-fullstack-javascript

---

Run project inside docker container

$ docker run -it \
-p 80:8080 \
--name learning-full-stack-javascript-development-mongodb-node-and-react \
marley/learning-full-stack-javascript-development-mongodb-node-and-react

http://localhost/

$ docker rm learning-full-stack-javascript-development-mongodb-node-and-react

---

My env

Host

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 14.04.5 LTS
Release:	14.04
Codename:	trusty

$ docker -v
Docker version 18.03.0-ce, build 0520e24

Inside container:

$ node -v
v10.4.0

$ npm -v
6.1.0

---

Final project packages

$ npm list -g --depth=0
/usr/local/lib
`-- npm@6.1.0

$ npm list --depth=0
project@1.0.0 /project
+-- axios@0.18.0
+-- babel-cli@6.26.0
+-- babel-eslint@8.2.3
+-- babel-loader@7.1.4
+-- babel-preset-es2015@6.24.1
+-- babel-preset-react@6.24.1
+-- babel-preset-stage-2@6.24.1
+-- body-parser@1.18.3
+-- ejs@2.6.1
+-- eslint@4.19.1
+-- eslint-plugin-react@7.9.1
+-- express@4.16.3
+-- json-loader@0.5.7
+-- mongodb@3.0.10
+-- mongoose@5.1.5
+-- node-sass-middleware@0.11.0
+-- nodemon@1.17.5
+-- react@16.4.0
+-- react-dom@16.4.0
+-- webpack@4.12.0
`-- webpack-cli@3.0.3

MongoDB Scripts

$ babel-node loadTestData.js
$ babel-node updateTestData.js

Visual Studio Code Settings:

{
    "editor.fontSize": 26,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "terminal.integrated.fontSize": 26,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "editor.formatOnSave": true,
    "[ejs]": {
        "editor.formatOnSave": true
    },
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 10000,
    "prettier.singleQuote": true
}

Visual Studio Code Plugins:

• ES7 React/Redux/React-Native/JS snippets
• Bracket Pair Colorizer
• Prettier formatter for Visual Studio Code
• Live Server
• Node.js Modules Intellisense
• EJS Language Support
• VS Code ESLint extension

---

004 Setup and configurations

$ npm init -y

$ npm install --save express
$ npm install --save mongodb
$ npm install --save react react-dom

$ npm install --save-dev nodemon
$ npm install --save-dev webpac webpack-cli
$ npm install --save-dev babel-cli babel-loader babel-preset-es2015 babel-preset-stage-2 babel-preset-react
$ npm install --save-dev eslint eslint-plugin-react babel-eslint

005 Node modules

006 The HTTP-HTTPS modules

007 Creating an Express server

$ npm start

http://localhost/api

008 Using the EJS template language

$ npm install --save ejs

009 React elements and JSX

$ npm run dev
$ npm run start

010 React components

011 Component composability

012 Components with modules

013 Component state

014 Component life cycle

015 Loading the test data

$ npm install --save json-loader

016 Displaying a list of objects

017 Using Sass with Node

$ npm install --save node-sass-middleware

018 Reading from the state

019 Fetching data from a remote API

$ npm install --save axios

020 Fetching data from the server side

021 Server rendering with ReactDOMServer

022 Fix the checksum problem

023 Handling the contest click event

024 Navigating to a contest

025 Looking up the contest on route change

026 Fetching contest information from the API

027 A bit of refactoring

028 Server-side routing for a contest

029 Navigating to a list of contests

030 Handling the browser's back button

031 Reading data from MongoDB

https://raw.githubusercontent.com/jscomplete/learn-fullstack-javascript/2bd19a1ba526f9a2059b3e5f3725d2df606ab3a3/loadTestData.js

$ npm install --save mongoose

$ babel-node loadTestData.js
Contests 4
Names 6

032 API to fetch a list of names

033 Displaying the list of names

034 Example script to update all data

$ babel-node updateTestData.js

035 Converting the application to use _id

http://localhost/api/contests/

http://localhost/api/contests/5b21f055b717e30c45ea5798

http://localhost/api/names/5b21f055b717e30c45ea579c

036 Creating an API to propose a name

$ npm install --save body-parser

037 Wiring the proposed new name form

---

Marley

jsdev.org