From e73de9a1d495c3e8ea8f9c8fe3a438a83ceadea1 Mon Sep 17 00:00:00 2001 From: Fernando Date: Tue, 6 Oct 2020 16:37:38 -0500 Subject: [PATCH 1/4] Add react axios example --- frontend/docs/reactaxios.md | 54 +++++++++++++++++++++++++++++++++++++ frontend/package.json | 1 + frontend/sidebars.js | 2 +- 3 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 frontend/docs/reactaxios.md diff --git a/frontend/docs/reactaxios.md b/frontend/docs/reactaxios.md new file mode 100644 index 0000000..f77fee6 --- /dev/null +++ b/frontend/docs/reactaxios.md @@ -0,0 +1,54 @@ +--- +id: reactaxios +title: React + Axios +--- + +You can play around with this live example and add new features, styles and so much more. + + +:::tip Hint +Uncomment the following line: + ```jsx +
{character.species}
+ ``` + + PS: remove `{/* */}` +::: + +```jsx live +function App() { + const [data, setData] = useState([]); + + const cardStyle = { + boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)", + padding: "12px", + marginBottom: "10px", + textAlign: "center", + backgroundColor: "#fafafa", + }; + const rootStyle = { + margin: "0 auto", + width: "max-content", + padding: "0 10px", + }; + useEffect(() => { + axios.get("https://finalspaceapi.com/api/v0/character") + .then((res) => res.json()) + .then((data) => setData(data)); + }, []); + + return ( +
+ {data.slice(0, 5).map((character) => ( +
+
+ {character.name}{" "} +
+
{character.name}
+ {/*
{character.species}
*/} +
+ ))} +
+ ); +} +``` diff --git a/frontend/package.json b/frontend/package.json index dfa5425..50e5599 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "@docusaurus/preset-classic": "2.0.0-alpha.65", "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39", "@mdx-js/react": "^1.5.8", + "axios": "^0.20.0", "clsx": "^1.1.1", "react": "^16.8.4", "react-dom": "^16.8.4" diff --git a/frontend/sidebars.js b/frontend/sidebars.js index d77cd45..797e96e 100644 --- a/frontend/sidebars.js +++ b/frontend/sidebars.js @@ -1,7 +1,7 @@ module.exports = { someSidebar: { "Getting Started": ["intro", "character", "episode"], - "Examples": ["react"], + "Examples": ["react", "reactaxios"], About: ["about"], }, }; From 837533f0901085351dd738bbb2b63986508bc905 Mon Sep 17 00:00:00 2001 From: Fernando Date: Wed, 7 Oct 2020 12:13:38 -0500 Subject: [PATCH 2/4] Add react axios as tab --- frontend/docs/react.md | 55 ------------------ frontend/docs/react.mdx | 110 ++++++++++++++++++++++++++++++++++++ frontend/docs/reactaxios.md | 54 ------------------ frontend/sidebars.js | 2 +- 4 files changed, 111 insertions(+), 110 deletions(-) delete mode 100644 frontend/docs/react.md create mode 100644 frontend/docs/react.mdx delete mode 100644 frontend/docs/reactaxios.md diff --git a/frontend/docs/react.md b/frontend/docs/react.md deleted file mode 100644 index e262ee7..0000000 --- a/frontend/docs/react.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: react -title: React ---- - -You can play around with this live example and add new features, styles and so much more. - - -:::tip Hint -Uncomment the following line: - ```jsx -
{character.species}
- ``` - - PS: remove `{/* */}` -::: - - -```jsx live -function App() { - const [data, setData] = useState([]); - - const cardStyle = { - boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)", - padding: "12px", - marginBottom: "10px", - textAlign: "center", - backgroundColor: "#fafafa", - }; - const rootStyle = { - margin: "0 auto", - width: "max-content", - padding: "0 10px", - }; - useEffect(() => { - fetch("https://finalspaceapi.com/api/v0/character") - .then((res) => res.json()) - .then((data) => setData(data)); - }, []); - - return ( -
- {data.slice(0, 5).map((character) => ( -
-
- {character.name}{" "} -
-
{character.name}
- {/*
{character.species}
*/} -
- ))} -
- ); -} -``` diff --git a/frontend/docs/react.mdx b/frontend/docs/react.mdx new file mode 100644 index 0000000..6ff8cd4 --- /dev/null +++ b/frontend/docs/react.mdx @@ -0,0 +1,110 @@ +--- +id: react +title: React +--- + +You can play around with this live example and add new features, styles and so much more. + + +:::tip Hint +Uncomment the following line: + ```jsx +
{character.species}
+ ``` + + PS: remove `{/* */}` +::: + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +```jsx live +function App() { + const [data, setData] = useState([]); + + const cardStyle = { + boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)", + padding: "12px", + marginBottom: "10px", + textAlign: "center", + backgroundColor: "#fafafa", + }; + const rootStyle = { + margin: "0 auto", + width: "max-content", + padding: "0 10px", + }; + useEffect(() => { + fetch("https://finalspaceapi.com/api/v0/character") + .then((res) => res.json()) + .then((data) => setData(data)); + }, []); + + return ( +
+ {data.slice(0, 5).map((character) => ( +
+
+ {character.name}{" "} +
+
{character.name}
+ {/*
{character.species}
*/} +
+ ))} +
+ ); +} +``` + + + + +```jsx + +function App() { + const [data, setData] = useState([]); + + const cardStyle = { + boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)", + padding: "12px", + marginBottom: "10px", + textAlign: "center", + backgroundColor: "#fafafa", + }; + const rootStyle = { + margin: "0 auto", + width: "max-content", + padding: "0 10px", + }; + useEffect(() => { + axios.get("https://finalspaceapi.com/api/v0/character") + .then((res) => res.json()) + .then((data) => setData(data)); + }, []); + + return ( +
+ {data.slice(0, 5).map((character) => ( +
+
+ {character.name}{" "} +
+
{character.name}
+ {/*
{character.species}
*/} +
+ ))} +
+ ); +} +``` + + + diff --git a/frontend/docs/reactaxios.md b/frontend/docs/reactaxios.md deleted file mode 100644 index f77fee6..0000000 --- a/frontend/docs/reactaxios.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: reactaxios -title: React + Axios ---- - -You can play around with this live example and add new features, styles and so much more. - - -:::tip Hint -Uncomment the following line: - ```jsx -
{character.species}
- ``` - - PS: remove `{/* */}` -::: - -```jsx live -function App() { - const [data, setData] = useState([]); - - const cardStyle = { - boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)", - padding: "12px", - marginBottom: "10px", - textAlign: "center", - backgroundColor: "#fafafa", - }; - const rootStyle = { - margin: "0 auto", - width: "max-content", - padding: "0 10px", - }; - useEffect(() => { - axios.get("https://finalspaceapi.com/api/v0/character") - .then((res) => res.json()) - .then((data) => setData(data)); - }, []); - - return ( -
- {data.slice(0, 5).map((character) => ( -
-
- {character.name}{" "} -
-
{character.name}
- {/*
{character.species}
*/} -
- ))} -
- ); -} -``` diff --git a/frontend/sidebars.js b/frontend/sidebars.js index 797e96e..d77cd45 100644 --- a/frontend/sidebars.js +++ b/frontend/sidebars.js @@ -1,7 +1,7 @@ module.exports = { someSidebar: { "Getting Started": ["intro", "character", "episode"], - "Examples": ["react", "reactaxios"], + "Examples": ["react"], About: ["about"], }, }; From 50017150f4478365d694f06d6b0a243edc8851a2 Mon Sep 17 00:00:00 2001 From: Fernando Date: Wed, 7 Oct 2020 12:45:41 -0500 Subject: [PATCH 3/4] Fix identation --- frontend/docs/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/docs/react.mdx b/frontend/docs/react.mdx index 6ff8cd4..a8827ba 100644 --- a/frontend/docs/react.mdx +++ b/frontend/docs/react.mdx @@ -5,7 +5,6 @@ title: React You can play around with this live example and add new features, styles and so much more. - :::tip Hint Uncomment the following line: ```jsx @@ -68,6 +67,7 @@ function App() { ```jsx +import axios from 'axios' function App() { const [data, setData] = useState([]); From da7eab9a0f8063ac900561803cc132995688329a Mon Sep 17 00:00:00 2001 From: Fernando Date: Wed, 7 Oct 2020 12:54:27 -0500 Subject: [PATCH 4/4] Update keyword on react example --- frontend/docs/react.mdx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/frontend/docs/react.mdx b/frontend/docs/react.mdx index a8827ba..babddb1 100644 --- a/frontend/docs/react.mdx +++ b/frontend/docs/react.mdx @@ -1,6 +1,19 @@ --- id: react title: React +hide_title: false +hide_table_of_contents: false +keywords: + - final space + - finalspace + - finalspaceapi + - final space wiki + - api + - restapi + - rest api + - example + - react +description: A live example of the Final Space API using React. --- You can play around with this live example and add new features, styles and so much more.