Skip to content

Note taking app in React. Lots of exploration here. Inspired by nvAlt.

Notifications You must be signed in to change notification settings

pgaspar/react-notes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Note Taking App with React

Try it out

In order to make it super-easy for you to test the app, I'm including the compiled files in build/.

This way, you can just open index.html on your browser and play.

Development Setup

Clone this repo and do:

npm install
npm run watch
# Go to http://localhost:8080/

This will install our dependencies and run a small live reload capable server.

That should get you up and running.

Development Dependencies

Here's a quick rundown of what I'm using for development:

Babel compiles ES6 code to ES5. ES6 is the next Javascript version, whilst ES5 is the one widely supported today.

Browserify allows us to require('modules') in Javascript. Although ES6 will do this out of the box, Babel doesn't assume any module-manager by default, so I had to choose one.

Browserify has the added benefit of using the same syntax/behavior as Node.js's require().

This is a Browserify-compatible transform that lets us run Babel while Browserify is doing its thing.

What ends up happening is something like this:

  • Browserify looks into src/nvalt.jsx and triggers Babel to decode the ES6 to ES5, so it can make sense of it.
  • It then follows the requires and finds every necessary file, decoding it along the way.

With this, we can now compile the source into build/nvalt.js, with something along these lines:

$(npm bin)/browserify src/nvalt.jsx -t babelify -o build/nvalt.js

Watchify allows us to run the Browserify/Babelify compilation above automatically, every time we save our code files.

So everytime we change a file, the compilation command runs and updates build/nvalt.js.

We could manually start Watchify like this:

$(npm bin)/watchify src/nvalt.jsx -t babelify -o build/nvalt.js

This package includes a small HTTP server with live reload capability. It watches for changes in the code base and reloads the page in our browser, making development even easier.

We could run live-server manually, but I created a convenience script that merges the Watchify command above with live-server. This script is named watch and is defined in package.json.

You can execute it like this:

npm run watch

This should open a window in your browser pointing at http://localhost:8080/. If it doesn't, please go there yourself.

Change any source files and your browser should promplty reflect your changes by itself 😎.

About

Note taking app in React. Lots of exploration here. Inspired by nvAlt.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published