/Learning-Apps

React, Node, Mongo, NoSQL

Learning Application Development

Greetings fare wonderer. This Github identifies Familiar application components and what they mean and where they might be found, talks about familiar dependencies, and walks through some existing application structures.

Apps are made of three things:

  1. Source
  2. Proc files
  3. Dependencies

Applications are further composed of:

  • auth
  • models
  • controllers
  • views
  • test

React / Node apps are made of

  • queries
  • mutations
  • schemas

Sources

Questions

  • what is a "production bundle"?
  • advanced configuration? deployment? code-splitting?
  • what are service workers?

Reading List

Familiar files and what they mean

| Name | Typically Found | File/Folder |

Root

  • .gitignore. https://help.github.com/articles/ignoring-files/. Root folder
  • DS_Store
  • .travis.yml
  • now.json. Root folder. Identifies "env": { DATABASE_URL }. Identifies builds. Identifies routes.
  • README.md. Root folder. Discusses application.

Root/Client

  • public folder
  • src folder
  • package-lock.json
  • package.json identifies:
    • applicaiton name
    • version
    • dependencies
    • scripts

Root/Client/Public

  • application icon .ico
  • index.html
    • links to
    • Using " %PUBLIC_URL% " in the tag above means it will be replaced with the URL of the public folder during the build, and only files inside the public folder can be referenced from the HTML.
    • To begin the development, run npm start or yarn start.
    • To create a production bundle, use npm run build or yarn build.
  • manifest.json.

Root/Client/Src

Familiar Components, Dependencies, Scripts, Add-ons

What is the difference between each of these?

Components /components/content/ - this is where the characters information lives, housed in the State. Each character is uniquely identified by an 'id'.

/components/sidebar/ - this is the sidebar component

/components/card-overview/ - this is a single component, repeated a few times, that houses the 'overview' of each character (image, character name), that you see in the sidebar itself

/components/card-detailed/ - this is where it grabs the array of objects from /components/content/, filters through and maps the character you're currently seeing to the DOM. Problem is, on line 13 of this component, you'll see I've hard-coded in the id #. Obviously, I want this to change to whatever character the user clicks, it then loads THAT character's info to the DOM. I just don't know how to do that.

Dependencies

  • "jwt-decode": "^2.2.0",
  • "moment": "^2.23.0",
  • "react": "^16.7.0",
  • "react-dom": "^16.7.0",
  • "react-redux": "^5.1.1",
  • "react-router-dom": "^4.3.1",
  • "react-scripts": "^2.1.3",
  • "react-transition-group": "^2.5.3",
  • "redux": "^4.0.1",
  • "redux-form": "^7.4.2",
  • "redux-thunk": "^2.3.0",
  • "styled-components": "^4.1.3"

Scripts

  • "start": "react-scripts start",
  • "build": "react-scripts build",
  • "now-build": "npm run build && mv build dist",
  • "test": "react-scripts test",
  • "eject": "react-scripts eject"

addOns

  • eslint: takes plugin prettier, extends react-app
  • prettier
  • "browsersList"
  • "devDependencies" | enzyme, redux-mock-store

#Example Apps

  1. Asperitas application

Mostly run through javascript.

Uses Node, React, NoSQL. Requires you to

  1. clone the repository
  2. install server dependencies
  3. client dependencies

To run the app you have to

  1. start mongodb locally
  2. start the server
  3. start the client

| File/Folder | Purpose | | client folder | stores client files | | server folder | stores server dependencies | | .gitignore | identifies dependencies, the different environments (*4), and logs (*3) |

Inside the client/src...

  • categories.js - there was a file whose sole purpose was to export a const variable of categories
  • globalStyle.js - this imported a function and created a const variable. It then had some kind of a jQuery run by running background-color: ${props => props.theme.pageBackground}; and exporting this GlobalStyle
  • index.js - imported a css style, React, ReactDom, {Provider} from redux, ./store, AppContainer, ./serviceWorker. I have no idea what this is doing.