https://github.com/nonoesp/web-101
⚡️ Introduction to React (and webpack and TypeScript and Electron and maybe more).
https://github.com/nonoesp/web-101
electron react redux typescript webpack
Last synced: 4 months ago
JSON representation
⚡️ Introduction to React (and webpack and TypeScript and Electron and maybe more).
- Host: GitHub
- URL: https://github.com/nonoesp/web-101
- Owner: nonoesp
- License: mit
- Created: 2019-07-09T13:25:34.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T07:55:27.000Z (over 3 years ago)
- Last Synced: 2025-10-24T10:50:39.471Z (8 months ago)
- Topics: electron, react, redux, typescript, webpack
- Language: JavaScript
- Homepage: https://nono.ma/about
- Size: 397 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React 101
Introduction to React (and webpack and TypeScript and Electron and maybe more).
## 💾 Requirements
- [Git](https://git-scm.com)
- [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com))
- [live-server](https://www.npmjs.com/package/live-server)
## 📚 Contents
You can see what code changes on each chapter by going to its branch and clicking `Compare`.
- [Code changes from `01-webpack` → `02-webpack-config`](https://github.com/nonoesp/react-101/compare/a734770a6da5eb17f9cf0a01070cc31b509e930a..5ff75078ce5cb60063071aa60d6ff29614a3f58b)
- [Code changes from `02-webpack-config` → `03-typescript`](https://github.com/nonoesp/react-101/compare/5ff75078ce5cb60063071aa60d6ff29614a3f58b..38245ff69cdbde3b30bbaab61fbe86f752ef95de)
- [Code changes from `03-typescript` → `04-react`](https://github.com/nonoesp/react-101/compare/38245ff69cdbde3b30bbaab61fbe86f752ef95de..1fbee0743286f4c09648909ba9f8252d27c23078)
### 🗺 [Introduction](https://github.com/nonoesp/laravel-mix-quickstart) · Overview
- An quick overview of HTML, SCSS, JavaScript, TypeScript, and webpack.
- [nonoesp/laravel-mix-quickstart](https://github.com/nonoesp/laravel-mix-quickstart)
### 📦 [Chapter 1](https://github.com/nonoesp/react-101/tree/01-webpack) · Webpack
- The simplest webpack application.
- (Part 1)
### ⚙️ [Chapter 2](https://github.com/nonoesp/react-101/tree/02-webpack-config) · Webpack config
- Customizing webpack's configuration.
- (Part 2)
### ⌨️ [Chapter 3](https://github.com/nonoesp/react-101/tree/03-typescript) · TypeScript
- Adding TypeScript to the mix.
-
### 🦠 [Chapter 4](https://github.com/nonoesp/react-101/tree/04-react) · React
- The simplest React application.
-
### ⚡️ [Chapter 5](https://github.com/nonoesp/electron-quick-start) · Electron (Bonus)
- [What is Electron](https://www.youtube.com/watch?v=8YP_nOCO-4Q) (video) · 4 min
- [electron/electron-quick-start](https://github.com/electron/electron-quick-start)
- [nonoesp/electron-quick-start](https://github.com/nonoesp/electron-quick-start)
- [electron-packager](https://github.com/electron-userland/electron-packager)
#### Hello, Electron!
[electron/electron-quick-start](https://github.com/electron/electron-quick-start) is Electron's official quick-start with JavaScript.
```bash
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
```
#### Hello, Electron, React & TypeScript!
[nonoesp/electron-quick-start](https://github.com/nonoesp/electron-quick-start) is Nono's quick-start with Webpack, TypeScript, React, Redux, Jest & auto-reload.
```bash
# Clone this repository
git clone https://github.com/nonoesp/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
```
## Author
**Hi. I'm Nono.** I host [Getting Simple](https://gettingsimple.com/podcast)—a podcast about how you can live a more meaningfull, creative, and simple life—[sketch](https://sketch.nono.ma) things that call my attention, and [write](https://gettingsimple.com/writing) essays on enjoying a slower life.