React

BACK: Navigation

Notes about React here, primarily for Good Music Classifier project.

What is Node.js?

It is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. You can download it through apt-get. I am using v8.12

$ sudo apt-get install nodejs

Great! Now you can just run $ node to get started. Doing so opens up for JavaScript interpretation, so you can go ahead and get started:

console.log("Hello world!")

npm

NPM is a package manager for JavaScript. Think Maven for Java. Going to their website will show you all the many many banyak sekali packages that are available for one to use.

Time to create our app!

$ npm install -g create-react-app

This installs the package create-react-app. Now, we can use this package. Go to your new app’s director and:

$ create-react-app APPNAME

This package creates a skeleton app for us. Thanks! And there’s your app!

$ cd APPNAME
$ npm start

What’s going on?

There’s a bunch of folders in this APPNAME folder.

  • node_modules: Contains all the packages and modules needed for this app. See link
  • public: Contains the code that is publically known (HTML). More documentation here
  • src: Our actual app.
  • package.json: A list of the dependencies that the package has (The npm modules that we’re using). When adding more dependencies, they’ll go here.

And if you haven’t already, editing App.js will live-update your app on the web browser.

What’s nice about React?

React is essentially a bunch of independent components that are composed together to build an interactive user interface. It handles DOM Elements as ‘Virtual DOMs,’ which handles state changes and then updates the real DOM elements on our web page. We no longer have to work with the DOM API (event handlers, query …). React will automatically handle all of that when it receives a state change.

More Resources:

  1. Crash Course
  2. Tutorial is continued (with step) at this repo.
  3. Publishing onto gh-pages