Skip to content

A collection of Javascript samples, showing how to combine technologies like Babel, Webpack, React etc.

License

Notifications You must be signed in to change notification settings

willemodendaal/javascript-web-starters

Repository files navigation

javascript-web-starters

It can be daunting to get started with a new Javascript web project, because there are so many technologies to use, and they all fit together in different ways. Each technology fills a particular niche.

This project contains various samples showing how to tie modern technologies together to build rich Javascript-powered websites.

The goals for each starter project:

  • Minimum, but useful enough to be used as a "starter" template for new projects.
    • Should at the very least render an index.html page and use some Javascript.
  • Lots of code comments to explain technology choices.
  • Be specific about versions of the technologies used.
  • Specify an "updated" date, so it's clear how up-to-date a project is.

Technologies used

The starter projects are made up combinations of the following technologies:

  • ES-2018 - the latest version of Javascript at the time of writing.
  • TypeScript - Modern ES with static type checking.
  • Webpack - Reads Javascript file dependencies (eg. imports) and builds bundles that contain all the necessary code.
  • Babel - Transpiles modern ES and CSS (and other things) to plain code that the browser understands.
  • SCSS - "Sassy CSS", modern CSS with many useful features.
  • React - A Javascript library used to build user interfaces.
  • Redux - A predictable state management library.

The Starter Projects

Since the projects themselves aren't of much use (they are only "starters" after all), we assign random names in the format: project-color-animal, just for easy reference.

To get started, find the sample with combination of technologies most relevant to you:

✅ Vanilla Javascript (ES5) ✅ Vanilla CSS 3 ✅ Webpack v4.40

Babel (Not needed because we're using vanilla JS and CSS)

Updated: September 2019

✅ ES2018 ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12

Updated: September 2019

A starter project that uses the following technologies:

✅ TypeScript ✅ Webpack v4.40 ✅ Babel v7.6 ✅ Chai v4.2 ✅ Mocha v6.2 ✅ TS-Node v8.4

Updated: September 2019

✅ TypeScript ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12

Updated: September 2019

✅ ES2018 ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12 ✅ React 16.9

Updated: September 2019

✅ ES2018 ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12 ✅ React 16.9 ✅ Redux 4.0

Updated: September 2019

✅ TypeScript ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12 ✅ React 16.9 ✅ Redux 4.0

Updated: September 2019

Contributing

These starter projects will "age" as technologies evolve, so any assistance to update the projects is greatly appreciated.

Existing starter projects can be updated within major versions. For example: Project-Navy-Cricket can be updated to use Webpack v4.50, but when Webpack v5 is released, a brand new starter project should be created.

Secondly, the goal is to keep the projects as lean as possible (but still useful), so if there is any way to "trim the fat" and remove code (eg. node modules) that are not necessary, please delete ruthlessly.

About

A collection of Javascript samples, showing how to combine technologies like Babel, Webpack, React etc.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published