You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: react/README.md
+4-6Lines changed: 4 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# React (Experimental)
2
2
3
-
The files in this directory are react components that can be then be used within markdown files by adding `interactive: true` frontmatter to a markdown file and then using the following syntax to embed the component:
3
+
The files in this directory are React components. We can use these components within Markdown files by adding `interactive: true` frontmatter to a Markdown file. Then, using the following syntax to embed the component:
4
4
5
5
```
6
6
<!--react-->
@@ -12,13 +12,12 @@ Theoretically React can be embedded anywhere on the site with a little bit of cr
12
12
13
13
## Defining new components
14
14
15
-
16
-
Start by adding frontmatter `interactive:true` to any markdown file that you want to support react (this prevents react render time from slowing down any other page and keeping the impact on performance very low)
15
+
Start by adding frontmatter `interactive:true` to any Markdown file that you want to support React. This prevents React render time from slowing down any other page and keeping the impact on performance very low.
17
16
18
17
1. Create the component in the `./react` directory
19
18
2. Register the component for webpack in `./javascripts/index.js` so the component works with client side rendering
20
19
3. Register the component in `./lib/react-engine.js` so the component works with server side rendering
21
-
4. If the component needs to be evaluated client side, see [this example](https://github.com/github/docs/blob/a48998c7890b71c8f58eda1fa31b50df348a0042/react/CodeEditor.js) for how to ensure the client side component rendered by the server gets [Hyrdated](https://reactjs.org/docs/react-dom.html#hydrate).
20
+
4. If the component needs to be evaluated client side, see [this example](https://github.com/github/docs/blob/a48998c7890b71c8f58eda1fa31b50df348a0042/react/CodeEditor.js) for how to ensure the client side component rendered by the server gets [Hydrated](https://reactjs.org/docs/react-dom.html#hydrate).
22
21
23
22
## A Complete Example
24
23
@@ -31,10 +30,9 @@ The following example demonstrates the addition of an interactive CodeEditor on
31
30
-[Enabling React components on a page](https://github.com/github/docs/blame/a48998c7890b71c8f58eda1fa31b50df348a0042/content/github/getting-started-with-github/access-permissions-on-github.md#L12)
32
31
-[Adding the CodeEditor to a page](https://github.com/github/docs/blame/a48998c7890b71c8f58eda1fa31b50df348a0042/content/github/getting-started-with-github/access-permissions-on-github.md#L47)
33
32
34
-
35
33
## Gotchas
36
34
37
-
- When requiring react components from npm you will often need to explicitly call require('component').default to make sure you get the component
35
+
- When requiring React components from npm you will often need to explicitly call `require('component').default` to make sure you get the component
38
36
- Some code examples you get from external React packages won't work out of the box, you often need to dig into the module and determine whether it's exporting to default or not which will in many cases cause you to need to `require('package').default`
39
37
-`import` doesn't always work. Use `require` for a more consistent experience with React in this codebase.
40
38
- If components require you to load CSS, you need to load that CSS in the `javascripts/index.js` file as shown [here](https://github.com/github/docs/blob/a48998c7890b71c8f58eda1fa31b50df348a0042/javascripts/index.js#L22)
0 commit comments