` tag will be understood as **JSX** - a React syntax extension to JavaScript that looks like HTML, which allows you to create and use components in your Markdown files.
βYou may have noticed, that we haven't used an HTML `class` attribute on the `` tag above, but rather React's `className` attribute. This is because all HTML elements will be parsed as JSX, which will then be used by React's runtime to render your pages.
-How does it work? In short, packages used by Flowershow under the hood compile MDX to JavaScript, which is then be used by React to create your website.
+How does it work? In short, packages used by Flowershow under the hood compile MDX to JavaScript, which is then used by React to create your website.
## MDX supported syntax
-The following sections are just a short summary of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more.
+The following sections are just short summaries of what MDX can do. Read [the official MDX docs](https://mdxjs.com/) to learn more.
- βIn this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective it may be only Markdown that you're using to write your content. However, Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world is JSX.
+ βIn this document we're going to use Markdown and MDX, as well as HTML and JSX interchangeably. The reason for this is the fact that Flowershow, as we've just learned, parses all Markdown files as MDX files. So, from your perspective, it may be only Markdown that you're using to write your content. However, Flowershow will also understand any MDX-specific additions to it if you were to include them. It follows, that what you may consider HTML blocks, in MDX world is JSX.
### Markdown
-Like we've mentioned, MDX supports CommonMark syntax by default. On top of that Flowershow provides support for GFM and some Obsidian-specifix extensions. Check our [syntax|Syntax guide] to learn which other Markdown syntax elements are supported by Flowershow.
+As we've mentioned, MDX supports CommonMark syntax by default. On top of that Flowershow provides support for GFM and some Obsidian-specific extensions. Check our [syntax|Syntax guide] to learn which other Markdown syntax elements are supported by Flowershow.
### JSX and custom components
-JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your Markdown, and/or you use the same HTML code parts and copy them again and again to different markdown pages. You soon may find it difficult to tell what's a given part of HTML block is supposed to do. And what used to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these copies of HTML blocks, that you used in many different pages π€―.
+JSX allows you to create components, that you can reuse across all of your markdown files. This is especially useful if you find yourself writing a lot of custom HTML in your Markdown, and/or you use the same HTML code parts and copy them again and again to different markdown pages. You soon may find it difficult to tell what a given part of HTML block is supposed to do. And what used to be e.g. your blog content ends up as a Markdown-HTML-CSS soup. On top of that, imagine if you wanted to make some changes to all these copies of HTML blocks, that you used many different pages π€―.
-Fortunatelly, thanks to JSX you can extract common HTML parts and enclose them in components, that you can then import and use wherever you want in your Markdown. What you end up with is much cleaner content and a single source of truth for HTML (JSX) parts you used to copy over and over again. JSX components allow you to declutter your Markdown and to separate content writing from its structuring and styling π.
+Fortunately, thanks to JSX you can extract common HTML parts and enclose them in components, which you can then import and use wherever you want in your Markdown. What you end up with is much cleaner content and a single source of truth for HTML (JSX) parts you used to copy over and over again. JSX components allow you to declutter your Markdown and to separate content writing from its structuring and styling π.
For example, by creating a component out of a part of HTML code you repeat all over again, you could turn this...
@@ -89,9 +89,9 @@ Some content here...
Some more content here...
```
-Looks much better! And it's much easier to update, if you're using this button on many different pages.
+Looks much better! And it's much easier to update if you're using this button on many different pages.
-(We'll learn more about how to create, import and use your custom components in the sections below.)
+(We'll learn more about how to create, import, and use your custom components in the sections below.)
### ESM `import` and `export` statements
@@ -146,7 +146,7 @@ Hooray! π
#### Importing data
-Another powerful thing you can to thanks to `import` statements is loading data from external files.
+Another powerful thing you can do thanks to `import` statements is loading data from external files.
Let's try to load a list of colors from a JSON file and pass it as a `list` prop value to our component `MyComponent`:
@@ -171,7 +171,7 @@ The above is just a simple example, but imagine creating a custom `Chart` compon
#### Defining components locally
If the component you're creating will be used only on one of your pages, but either it will be repeated multiple times or it's a complex one and you want to keep it at the very top/bottom of your page so that it doesn't clutter your content, you could define a component locally. To do this you can use ESM `export` statement.
-For example, instead of creating the above component `MyComponent` in a separate `.jsx` file, let's the following:
+For example, instead of creating the above component `MyComponent` in a separate `.jsx` file, let's do the following:
```md
export const MyComponent2 = ({ list }) => {
@@ -220,7 +220,7 @@ Some more content...
ESM `export` statement can also be used to locally define variables in your MDX files.
-Let's take `MyComponent` from the examples above and define a list that we'll pass as it's `list` prop value:
+Let's take `MyComponent` from the examples above and define a list that we'll pass as its `list` prop value:
```md
export const myFavFlowersList = ['tulip', 'water lily', 'iris']
@@ -228,7 +228,7 @@ export const myFavFlowersList = ['tulip', 'water lily', 'iris']
```
-Which renders as:
+This renders as:
---