Add tabs to installation page (#9275, #9277) (#9401)
* Add tabs to installation page (#9275, #9277) This adds tabs for create-react-app and existing apps to the installation section of the docs. The tab implementation is a simplified version of React Native's installation page. Fixes #9275. * Use classList instead of className * Use same implementation as in RN
Marks Polakovs committed
Apr 13, 2017 at 21:54 UTC
855b8d3526a55e690108e8ede9091c14b6f62466
1 file changed
+90
-4
docs/docs/installation.md
+90
-4
@@ -11,27 +11,86 @@ redirect_from:
11
- "docs/environments.html"
12
next: hello-world.html
13
---
14
+<style>
15
+.tab-hidden {
16
+ display: none;
17
+}
18
+.toggler a {
19
+ display: inline-block;
20
+ padding: 10px 5px;
21
+ margin: 2px;
22
+ border: 1px solid #05A5D1;
23
+ border-radius: 3px;
24
+ text-decoration: none !important;
25
+ }
26
+</style>
27
28
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
29
30
+<div class="toggler">
31
+ <style>
32
+ .toggler a {
33
+ display: inline-block;
34
+ padding: 10px 5px;
35
+ margin: 2px;
36
+ border: 1px solid #05A5D1;
37
+ border-radius: 3px;
38
+ text-decoration: none !important;
39
+ color: #05A5D1;
40
+ }
41
+ .display-target-fiddle .toggler .button-fiddle,
42
+ .display-target-newapp .toggler .button-newapp,
43
+ .display-target-existingapp .toggler .button-existingapp {
44
+ background-color: #05A5D1;
45
+ color: white;
46
+ }
47
+ block {
48
+ display: none;
49
+ }
50
+ .display-target-fiddle .fiddle,
51
+ .display-target-newapp .newapp,
52
+ .display-target-existingapp .existingapp {
53
+ display: block;
54
+ }
55
+ </style>
56
+ <script>
57
+ document.querySelector('.toggler').parentElement.className += ' display-target-fiddle';
58
+ </script>
59
+ <span>Which of these options best describes what you want to do?</span>
60
+ <br />
61
+ <br />
62
+ <a href="javascript:void(0);" class="button-fiddle" onclick="display('target', 'fiddle')">Try React</a>
63
+ <a href="javascript:void(0);" class="button-newapp" onclick="display('target', 'newapp')">Create a New App</a>
64
+ <a href="javascript:void(0);" class="button-existingapp" onclick="display('target', 'existingapp')">Add React to an Existing App</a>
65
+</div>
66
+
67
+<block class="fiddle" />
68
+
69
## Trying Out React
70
71
If you're just interested in playing around with React, you can use CodePen. Try starting from [this Hello World example code](http://codepen.io/gaearon/pen/rrpgNB?editors=0010). You don't need to install anything; you can just modify the code and see if it works.
72
73
If you prefer to use your own text editor, you can also <a href="/react/downloads/single-file-example.html" download="hello.html">download this HTML file</a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
74
23
-## Creating a Single Page Application
75
+If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
76
+
77
+<block class="newapp" />
78
+
79
+## Creating a New Application
80
81
[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
82
83
```bash
84
npm install -g create-react-app
29
-create-react-app hello-world
30
-cd hello-world
85
+create-react-app my-app
86
+
87
+cd my-app
88
npm start
89
```
90
34
-Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses [webpack](https://webpack.js.org/), [Babel](http://babeljs.io/) and [ESLint](http://eslint.org/) under the hood, but configures them for you.
91
+Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like Babel and webpack under the hood, but works with zero configuration.
92
+
93
+<block class="existingapp" />
94
95
## Adding React to an Existing Application
96
@@ -134,3 +193,30 @@ The versions above are only meant for development, and are not suitable for prod
193
To load a specific version of `react` and `react-dom`, replace `15` with the version number.
194
195
If you use Bower, React is available via the `react` package.
196
+
197
+<script>
198
+// Convert <div>...<span><block /></span>...</div>
199
+// Into <div>...<block />...</div>
200
+var blocks = document.getElementsByTagName('block');
201
+for (var i = 0; i < blocks.length; ++i) {
202
+ var block = blocks[i];
203
+ var span = blocks[i].parentNode;
204
+ var container = span.parentNode;
205
+ container.insertBefore(block, span);
206
+ container.removeChild(span);
207
+}
208
+// Convert <div>...<block />content<block />...</div>
209
+// Into <div>...<block>content</block><block />...</div>
210
+blocks = document.getElementsByTagName('block');
211
+for (var i = 0; i < blocks.length; ++i) {
212
+ var block = blocks[i];
213
+ while (block.nextSibling && block.nextSibling.tagName !== 'BLOCK') {
214
+ block.appendChild(block.nextSibling);
215
+ }
216
+}
217
+function display(type, value) {
218
+ var container = document.getElementsByTagName('block')[0].parentNode;
219
+ container.className = 'display-' + type + '-' + value + ' ' +
220
+ container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
221
+}
222
+</script>
\ No newline at end of file