Skip to content

Latest commit

 

History

History
168 lines (108 loc) · 3.02 KB

lecture10.mdx

File metadata and controls

168 lines (108 loc) · 3.02 KB
Raw

import { Head, Appear } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme"; import { CodeSurfer } from "mdx-deck-code-surfer"; import ultramin from "prism-react-renderer/themes/ultramin";

Lecture 10

Ecosystem: The wide, wonderful, weird world of JavaScript

Client-Side JS vs Node

  • Client's Browser receives JS as part of a webpage
  • Node is a runtime to run JS outside of a browser

What is NPM

  • Host and tool for JavaScript packages maintained by the community

The largest package manager in the world

Basics of working with npm

npm init // creates a new Javascript project (package.json)
npm install [dependency name] // installs package into your project
npm install //  installs all dependencies of your project

package.json

What does it mean to install a dependency?

  • package.json describes your project's dependencies
  • npm install looks them up, and downloads them locally!

Generated Files:

  • node_modules is the folder where the dependencies live
  • package-lock.json is a description of installed packages

Eek

Other useful commands

npm run [script name] // runs script from package.json
npm start // runs the "start" script from package.json
npm install [dep name] [dep name2] //  installs multiple dependencies at once!

Why bother?

  1. Great ecosystem of build tools
  2. Easy package management!

How do we import JS into the browser?

  • <script>...</script>
  • Bower + <script>...</script>
  • npm + Build step

Importing a <script>

If you really, really need jQuery:

<script
  src="https://cdnjs.../3.4.0/jquery.min.js"
>
</script>

Bower

Don't

npm + Build step

  • Install a package (npm install jquery)
  • Import it in your project JS:
import $ from "jquery";

npm + Build step

  • imports aren't widely supported in browsers (this is changing)
  • There are tools to convert imports to:

And that all gets stuck in a <script>!

Setting up a React project

Turns out, this is really hard by yourself.

  • Handy tool: create-react-app
npx create-react-app [folder of new project]

Demo

Navigating JS packages

Attendance

https://bit.ly/RDAttendance