ToDo List App Tutorial Part 2: Setup
In ToDo List App Tutorial Part 1: Requirements we've established what we want to do, now we need to do a little bit of project setup.
We will configure Webpack with all the tools we need and have a sample "Hello World!" application and start building from there. This may not be the most interesting part of the tutorial if you are already familiar with Webpack, the configuration done here is minimal. If you want to skip this part feel free to jump directly to ToDo List App Tutorial Part 3: Adding a List of Items, by the end of this part we will have a functioning React app that displays an underline "Hello World!".
First thing we want is a folder for our project, I'll be calling mine todo-app
and open VS Code in that folder. Any IDE or text editor will do, even notepad.
First we will initialize the package folder by running npm init
, it's smart enough to pick defaults pretty good, change anything that you wish.
Next we will install our dev dependencies, these are packages that are used only for building our application and are not used by the (would be) production server.
npm install --save-dev webpack webpack-cli webpack-dev-server ts-loader typescript style-loader css-loader html-webpack-plugin @types/react @types/react-dom
Next we will install our "normal" dependencies.
npm install --save react react-dom
There is no difference between "normal" dependencies and dev dependencies, npm treats them exactly the same. The difference is only in semantics, an important aspect of this differentiation is that it allows us to group dependencies into two categories, what we need for the application to run and what we need extra in order to build the application. For instance, if we want to reduce the bundle size, we can go through the packages in the "normal" dependencies list and load them in the application through CDNs rather than including them in our build bundle. This will can have some performance benefits as our application size decreases, the CDN bundles can be safely cached, and not just by our application and overall traffic is reduced when accessing the application.
Next we will write the Webpack config. Our source files will be in the src
files and the output in dist
.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
entry: path.resolve("src", "app.tsx"),
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
output: {
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader"
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: "Todo App with MVVM",
hash: true,
inject: false,
scriptLoading: 'blocking',
meta: {
charset: 'utf-8'
},
templateContent: function ({ htmlWebpackPlugin }) {
return `<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
${htmlWebpackPlugin.tags.headTags}
<title>${htmlWebpackPlugin.options.title}</title>
</head>
<body>
<div id="app"></div>
${htmlWebpackPlugin.tags.bodyTags}
</body>
</html>`;
}
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
open: true
},
};
Since we are using TypeScript, we will need a tsconfig.json
file as well.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"moduleResolution": "node",
"lib": [
"ES6",
"DOM"
],
"strict": true,
"alwaysStrict": true,
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true
},
"include": [
"./src"
],
"exclude": [
"./node_modules"
]
}
Finally, we get to our entry point which is just a .tsx
file containing the boilerplate code for loading the application.
import React from "react";
import ReactDOM from "react-dom";
import "./style.css"
ReactDOM.render(<App />, document.getElementById("app"));
function App(): JSX.Element {
return (
<h1>Hello World!</h1>
);
}
And of course our stylesheet which underlines our text.
h1 {
text-decoration: underline;
}
To do a quick test, we can build the application using npx webpack
.
To make our development easier, we will be using webpack-dev-server
. To start the server execute npx webpack serve
.
Now that that's done, it's time to move to actually using MVVM in our project. We will continue with ToDo List App Tutorial Part 3: Adding a List of Items.
Motivation
Overview
Guides and Tutorials - Getting Started
Releases
API
Events
IEvent
IEventHandler
INotifyPropertiesChanged
INotifyCollectionChanged
IItemAddedEventArgs
IItemRemovedEventArgs
ICollectionChange
ItemRemovedCallback
ICollectionChange
EventDispatcher
Observable Collections
IReadOnlyObservableCollection
IObservableCollection
ReadOnlyObservableCollection
ObservableCollection
ViewModels
ViewModel
isViewModel
Forms
IFormFieldViewModel
IFormFieldViewModelConfig
FormFieldViewModel
FormFieldCollectionViewModel
FormFieldSet
DynamicFormFieldCollectionViewModel
Validation
IReadOnlyValidatable
IValidatable
IValidationConfig
ValidatorCallback
CollectionItemValidatorCallback
ValidatableSelectorCallback
ValidationConfigSelectorCallback
UnsubscribeCallback
registerValidators
registerCollectionValidators
registerCollectionItemValidators
React Hooks
EventHandler
useEvent
ViewModelType
ViewModelFactory
useViewModel
useViewModelMemo
useObservableCollection
useValidators
useCollectionValidators
useCollectionItemValidators