8000 add write-react-with-codepen.md · learnreactjs/learnreactjs@35dcbdf · GitHub
[go: up one dir, main page]
Skip to content

Commit 35dcbdf

Browse files
BunlongBunlong
committed
add write-react-with-codepen.md
1 parent 2edefa4 commit 35dcbdf

File tree

2 files changed

+13
-2
lines changed

2 files changed

+13
-2
lines changed

‎content/react-node/what-is-react-node.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# What is React Node?
2+
3+
Once using React is known as a React node. A React node is defined as:
4+
5+
> light, stateless, virtual representation of a DOM node.
6+
7+
React node is considered the virtual DOM, React is used to define a virtual DOM using React nodes, that fuel React components, that can eventually be used to create a real DOM structured or other structures (e.g., [React Native](https://facebook.github.io/react-native)).
8+
9+
React nodes can be created using JSX or JavaScript. In this chapter we'll look at creating React nodes using JavaScript alone. No JSX yet. I believe that you should first learn what JSX is concealing in order to understand JSX.
10+
11+
You might skip this chapter because you already know that you will be using JSX. But I'd suggest reading this chapter so you are aware of what JSX is doing for you.

‎content/setting-up/write-react-with-codepen.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ The basic setup that has been described in this chapter can be used online via [
88

99
Below is an embedded CodePen containing the `HelloMessage` component used throughout this chapter. By clicking on the "Result" tab you can view the React component rendered to the DOM. To edit the code just click on "EDIT ON CODEPEN" at the top right corner.
1010

11-
<p data-height="265" data-theme-id="dark" data-slug-hash="rvrQod" data-default-tab="result" data-user="Bunlong" data-embed-version="2" data-pen-title="rvrQod" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/rvrQod/">rvrQod</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
11+
<p data-height="265" data-theme-id="0" data-slug-hash="rvrQod" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="rvrQod" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/rvrQod/">rvrQod</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
1212
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
1313

1414
Note that the "Babel" tab indicates the JavaScript written into this tab will be transformed by Babel.
1515

1616
It will be assumed that after reading this chapter that you understand the basic requirements to setup React and Babel via `babel js`. And that while CodePen does not make it obvious, this is the same exact setup being used by CodePen to run React code.
1717

18-
CodePen will be used throughout the rest of this book to show the results of React code transformed by Babel.
18+
CodePen will be used throughout the rest of this book to show the results of React code transformed by Babel.

0 commit comments

Comments
 (0)
0