# Flutter for React Native Devs in 30 Seconds

Original: https://swyx.io/flutter-for-react-native-devs-in-30-seconds-78g
Published: 2017-12-03

> You may have heard of Flutter, Google's answer to React Native. What should you know?

You may have heard of [Flutter](https://flutter.io), Google's answer to React Native. What should you know?

- It's in the [Dart](https://www.dartlang.org/) language, which borrows heavily from Java. But Javascript fans will find it very easy to read (see below)
- [IntelliJ or Android Studio](https://flutter.io/ide-setup/) are the recommended IDEs with Flutter plugins.
- Unlike RN, Flutter doesn't use a Javascript bridge, it compiles straight to native iOS/Android files. (But in "slow mode" development, it operates as an interpreted language so you can still do [hot reloading](https://flutter.io/hot-reload/))
- Unlike RN, Flutter comes "batteries included", with opinions on **[routing](https://flutter.io/routing-and-navigation/)**, **[animations](https://flutter.io/animations/)**, **[i18n](https://flutter.io/tutorials/internationalization/)** and **themes**!!! In particular it comes with a bunch of inbuilt [widget styles](https://flutter.io/widgets/) where you can use Material Design or "Cupertino" (aka Apple "inspired") designs right out of the box. Also, did I mention **routing?!?!?!** Here, let me do it justice:

# FLUTTER COMES WITH ROUTING!!!1!!!

- The animations are seriously good. Can you [do this](https://flutter.io/animations/hero-animations/) in React Native?

{% youtube CEcFnqRDfgw %}

- Like RN, Flutter uses a lot of familiar paradigms including `class` extensions, `setState` and event handlers. If you can read RN, you can read Flutter:

```
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
```
- The install experience is very smooth:

```bash
git clone -b alpha https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
flutter doctor
```

Give it a shot! <http://flutter.io> and the Google Codelab tutorial is [here](https://codelabs.developers.google.com/codelabs/flutter). or watch the Google I/O video!


{% youtube w2TcYP8qiRI %}