For React Developers
// Dart
String name = "John";
int? age; // Nullable int
// TypeScript
let name: string = "John";
let age: number | null = null;var, let, const
var, final, const
// Dart
var name = "John"; // Type inferred
final userId = getUserId(); // Runtime constant
const apiUrl = "https://..."; // Compile-time constant
// JavaScript
let name = "John";
const userId = getUserId();
const apiUrl = "https://...";this bindingthis issues// Dart
void greet(String name) => print('Hello $name');
Function callback = () => print('Done');
// JavaScript
const greet = (name) => console.log(`Hello ${name}`);
const callback = () => console.log('Done');// Dart
abstract class Shape {
double area();
}
class Rectangle extends Shape with Printable {
final double width, height;
Rectangle(this.width, this.height);
@override
double area() => width * height;
}
// TypeScript
abstract class Shape {
abstract area(): number;
}
class Rectangle extends Shape {
constructor(private width: number, private height: number) {}
area(): number {
return this.width * this.height;
}
}// Dart
Future<String> fetchData() async {
final response = await http.get(Uri.parse(url));
return response.body;
}
// JavaScript
async function fetchData() {
const response = await fetch(url);
return response.text();
}// Dart
List<String> names = ['Alice', 'Bob'];
Map<String, int> ages = {'Alice': 30, 'Bob': 25};
Set<String> uniqueNames = {'Alice', 'Bob'};
// JavaScript
const names = ['Alice', 'Bob'];
const ages = {'Alice': 30, 'Bob': 25};
const uniqueNames = new Set(['Alice', 'Bob']);$ and ${} syntax// Dart
String name = "John";
String message = 'Hello $name, you have ${messages.length} messages';
// JavaScript
const name = "John";
const message = `Hello ${name}, you have ${messages.length} messages`;try/catch
try/catch/finally, exception classes// Dart
try {
final result = await riskyOperation();
} on NetworkException catch (e) {
print('Network error: ${e.message}');
} catch (e) {
print('Unknown error: $e');
} finally {
cleanup();
}class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _incrementCounter() {
setState(() {
_count++; // Triggers rebuild
});
}
@override
Widget build(BuildContext context) {
return Text('Count: $_count');
}
}class WelcomeMessage extends StatelessWidget {
final String name;
const WelcomeMessage({Key? key, required this.name}) : super(key: key);
@override
Widget build(BuildContext context) {
return Text('Welcome, $name!');
}
}| Concept | Flutter | React Native |
|---|---|---|
| UI Building Block | Widget | Component |
| UI Update Process | rebuild | render |
| State Container | StatefulWidget | Functional Component with hooks |
Column(
children: [ // Explicit children array
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)
Container(
child: Text('Single child'), // Explicit single child
)<View>
{/* Children are implicit */}
<Text>Item 1</Text>
<Text>Item 2</Text>
<Text>Item 3</Text>
</View>