diff --git a/docs/next/getting-started.html b/docs/next/getting-started.html index eb36bb0b0e2..33a44975f68 100644 --- a/docs/next/getting-started.html +++ b/docs/next/getting-started.html @@ -87,7 +87,7 @@
import { Text } from 'react-native';

Your component starts as a function:

-
function Cat() {}
+
const Cat = () => {};
 

 
You can think of components as blueprints. Whatever a function component returns is rendered as a React element. React elements let you describe what you want to see on the screen.

 
Here the Cat component will render a <Text> element:

-
function Cat() {
+
const Cat = () => {
   return <Text>Hello, I am your cat!</Text>;
-}
+};
+
+export default Cat;
 

 
You can export your function component with JavaScript’s export default for use throughout your app like so:

-
export default function Cat() {
+
const Cat = () => {
   return <Text>Hello, I am your cat!</Text>;
-}
+};
+
+export default Cat;
 

 

 
Class components tend to be a bit more verbose than function components.

 
}
 

 
And as with function components, you can export your class component:

-
export default class Cat extends Component {
+
class Cat extends Component {
   render() {
     return <Text>Hello, I am your cat!</Text>;
   }
 }
+
+export default Cat;
 

 

 

@@ -188,16 +198,18 @@
 
import React, { useState } from 'react';
 

 
Then you declare the component’s state by calling useState inside its function. In this example, useState creates an isHungry state variable:

-
function Cat(props) {
+
const Cat = (props) => {
   const [isHungry, setIsHungry] = useState(true);
   // ...
-}
+};
 

 

 
You can use useState to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with const [timesPetted, setTimesPetted] = useState(0)!

@@ -506,21 +530,21 @@ export default function Cafe() {
 
You might’ve noticed that although isHungry is a const, it is seemingly reassignable! What is happening is when a state-setting function like setIsHungry is called, its component will re-render. In this case the Cat function will run again—and this time, useState will give us the next value of isHungry.

 

 
Finally, put your cats inside a Cafe component:

-
export default function Cafe() {
+
const Cafe = () => {
   return (
     <>
       <Cat name="Munkustrap" />
       <Cat name="Spot" />
     </>
   );
-}
+};
 

 

 
The older class components approach is a little different when it comes to state.

 
/>
 

 
Finally, put your cats inside a Cafe component:

-
export default class Cafe extends Component {
+
class Cafe extends Component {
   render() {
     return (
       <>
@@ -617,6 +643,8 @@ export default class Cafe extends Component {
     );
   }
 }
+
+export default Cafe;
 

 

 

diff --git a/docs/next/intro-react/index.html b/docs/next/intro-react/index.html
index 49a6020cc5e..3f9f2bd50ec 100644
--- a/docs/next/intro-react/index.html
+++ b/docs/next/intro-react/index.html
@@ -93,15 +93,17 @@
 
import { Text } from 'react-native';
 

 
Your component starts as a function:

-
function Cat() {}
+
const Cat = () => {};
 

 
You can think of components as blueprints. Whatever a function component returns is rendered as a React element. React elements let you describe what you want to see on the screen.

 
Here the Cat component will render a <Text> element:

-
function Cat() {
+
const Cat = () => {
   return <Text>Hello, I am your cat!</Text>;
-}
+};
+
+export default Cat;
 

 
You can export your function component with JavaScript’s export default for use throughout your app like so:

-
export default function Cat() {
+
const Cat = () => {
   return <Text>Hello, I am your cat!</Text>;
-}
+};
+
+export default Cat;
 

 

 
Class components tend to be a bit more verbose than function components.

 
}
 

 
And as with function components, you can export your class component:

-
export default class Cat extends Component {
+
class Cat extends Component {
   render() {
     return <Text>Hello, I am your cat!</Text>;
   }
 }
+
+export default Cat;
 

 

 

@@ -188,16 +198,18 @@
 
import React, { useState } from 'react';
 

 
Then you declare the component’s state by calling useState inside its function. In this example, useState creates an isHungry state variable:

-
function Cat(props) {
+
const Cat = (props) => {
   const [isHungry, setIsHungry] = useState(true);
   // ...
-}
+};
 

 

 
You can use useState to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with const [timesPetted, setTimesPetted] = useState(0)!

@@ -506,21 +530,21 @@ export default function Cafe() {
 
You might’ve noticed that although isHungry is a const, it is seemingly reassignable! What is happening is when a state-setting function like setIsHungry is called, its component will re-render. In this case the Cat function will run again—and this time, useState will give us the next value of isHungry.

 

 
Finally, put your cats inside a Cafe component:

-
export default function Cafe() {
+
const Cafe = () => {
   return (
     <>
       <Cat name="Munkustrap" />
       <Cat name="Spot" />
     </>
   );
-}
+};
 

 

 
The older class components approach is a little different when it comes to state.

 
/>
 

 
Finally, put your cats inside a Cafe component:

-
export default class Cafe extends Component {
+
class Cafe extends Component {
   render() {
     return (
       <>
@@ -617,6 +643,8 @@ export default class Cafe extends Component {
     );
   }
 }
+
+export default Cafe;
 

 

 

diff --git a/docs/next/using-a-listview.html b/docs/next/using-a-listview.html
index 23b13c26783..411512afa8f 100644
--- a/docs/next/using-a-listview.html
+++ b/docs/next/using-a-listview.html
@@ -75,43 +75,45 @@