replace state usage comparison image with the code blocks (facebook#2026

)

docs/tutorial.md

@@ -108,9 +108,72 @@ In a React component, the props are the variables that we pass from a parent com
 
 #### There are differences between React and React Native to handle the state?
 
-![image](https://user-images.githubusercontent.com/20761166/61405629-48270680-a8a8-11e9-906e-aa80d51e51e3.png)
+<div class="two-columns">
 
-As shown in the image, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)!
+```jsx
+// ReactJS Counter Example using Hooks!
+
+import React, { useState } from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```jsx
+// React Native Counter Example using Hooks!
+
+import React, { useState } from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        titles="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)!
 
 In the following example we will show the same above counter example using classes.
 

website/static/css/docs.css

@@ -403,3 +403,25 @@ td .label.required {
   line-height: 10px;
   font-weight: 600;
 }
+
+/* Two columns */
+.two-columns {
+  display: grid;
+  gap: 0 2%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: ". .";
+}
+
+.two-columns pre code {
+  white-space: pre-wrap;
+}
+
+@media only screen and (max-width: 1023px) {
+  .two-columns {
+    gap: 0;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-template-areas: "." ".";
+  }
+}