use the platform

src/compiler/compile/nodes/Element.ts

@@ -93,6 +93,11 @@ const passive_events = new Set([
 	'touchcancel'
 ]);
 
+const react_attributes = new Map([
+	['className', 'class'],
+	['htmlFor', 'for'],
+]);
+
 function get_namespace(parent: Element, element: Element, explicit_namespace: string) {
 	const parent_element = parent.find_nearest(/^Element/);
 
@@ -444,6 +449,13 @@ export default class Element extends Node {
 				});
 			}
 
+			if (react_attributes.has(attribute.name)) {
+				component.warn(attribute, {
+					code: 'use-the-platform',
+					message: `'${attribute.name}' is not a valid html attribute. Did you mean '${react_attributes.get(attribute.name)}'? If you are a recovering React developer, remember, Svelte actually uses the web platform.`
+				});
+			}
+
 			attribute_map.set(attribute.name, attribute);
 		});
 	}

test/validator/samples/use-the-platform/input.svelte

@@ -0,0 +1,2 @@
+<div className="abc"></div>
+<label htmlFor="i"><input /></label>

test/validator/samples/use-the-platform/warnings.json

@@ -0,0 +1,32 @@
+[
+	{
+		"code": "use-the-platform",
+		"message": "'className' is not a valid html attribute. Did you mean 'class'? If you are a recovering React developer, remember, Svelte actually uses the web platform.",
+		"pos": 5,
+		"start": {
+			"character": 5,
+			"column": 5,
+			"line": 1
+		},
+		"end": {
+			"character": 20,
+			"column": 20,
+			"line": 1
+		}
+	},
+	{
+		"code": "use-the-platform",
+		"message": "'htmlFor' is not a valid html attribute. Did you mean 'for'? If you are a recovering React developer, remember, Svelte actually uses the web platform.",
+		"pos": 35,
+		"start": {
+			"character": 35,
+			"column": 7,
+			"line": 2
+		},
+		"end": {
+			"character": 46,
+			"column": 18,
+			"line": 2
+		}
+	}
+]