Skip to content

Commit 0910af2

Browse files
christopherthielenchristopherthielen
authored
Merge pull request #1 from elboman/master
Add react helloworld tutorial
2 parents 90b1f12 + 06f904d commit 0910af2

File tree

3 files changed

+312
-0
lines changed

3 files changed

+312
-0
lines changed

‎_config.yml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,9 @@ collections:
223223
tutorial_ng2:
224224
output: true
225225
permalink: /tutorial/ng2/:path
226+
tutorial_react:
227+
output: true
228+
permalink: /tutorial/react/:path
226229
guide:
227230
output: true
228231
permalink: /guide/:path
@@ -279,6 +282,14 @@ defaults:
279282
layout: single
280283
sidebar:
281284
nav: "tutorial_ng2"
285+
- scope:
286+
path: ""
287+
type: tutorial_react
288+
values:
289+
sitemap: true
290+
layout: single
291+
sidebar:
292+
nav: "tutorial_react"
282293
- scope:
283294
path: ""
284295
type: guide

‎_tutorial_react/helloworld.md

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
---
2+
title: "UI-Router for React - Hello World!"
3+
layout: single
4+
excerpt: "Getting started with UI-Router for React"
5+
sitemap: true
6+
---
7+
8+
{% include toc icon="columns" title="Hello World!" %}
9+
10+
Let's build a UI-Router for React Hello World application.
11+
It will have two "pages" (`hello` and `about`), each one having its own URL.
12+
We can switch between pages by clicking on links.
13+
The link for the active page will be highlighted.
14+
15+
# Full Source Code
16+
17+
Start by looking over the complete source code (ignoring SystemJS `config.js`) for the Hello World application. We will go over each part in more detail below.
18+
19+
## `index.html`
20+
21+
```html
22+
<html>
23+
24+
<head>
25+
<script src="//npmcdn.com/systemjs/dist/system.js"></script>
26+
<script src="systemjs.config.js"></script>
27+
<script>
28+
System.import("helloworld").catch(console.error.bind(console));
29+
</script>
30+
31+
<style>.active { color: red; font-weight: bold }</style>
32+
</head>
33+
34+
<body>
35+
<div id="react-app"></div>
36+
</body>
37+
38+
</html>
39+
```
40+
41+
## `helloworld.jsx`
42+
43+
```javascript
44+
import React from 'react';
45+
import ReactDOM from 'react-dom';
46+
import UIRouterReact, {UIView, UISref, UISrefActive} from 'ui-router-react';
47+
48+
49+
const router = new UIRouterReact();
50+
51+
var helloState = {
52+
name: 'hello',
53+
url: '/hello',
54+
component: () => <h3>hello world</h3>
55+
}
56+
57+
var aboutState = {
58+
name: 'about',
59+
url: '/about',
60+
component: () => <h3>Its the UI-Router hello world app!</h3>
61+
}
62+
63+
router.stateRegistry.register(helloState);
64+
router.stateRegistry.register(aboutState);
65+
66+
router.start();
67+
68+
ReactDOM.render(
69+
<div>
70+
<UISrefActive class="active">
71+
<UISref to="hello"><a>Hello</a></UISref>
72+
</UISrefActive>
73+
<UISrefActive class="active">
74+
<UISref to="about"><a>About</a></UISref>
75+
</UISrefActive>
76+
77+
<UIView/>
78+
</div>,
79+
document.getElementById('react-app')
80+
);
81+
```
82+
83+
# Live demo
84+
85+
A live demo of the finished app can be seen below, in the [Plunker](https://plnkr.co/). Navigate between the
86+
"Hello" and "About" links and watch the UI change.
87+
88+
<iframe class="plunker" style="height: 350px"
89+
src="//embed.plnkr.co/V7WidRpNvgqHoCS7hHbl/?show=preview"
90+
frameborder="1" allowfullscren="allowfullsceen"></iframe>
91+
<br>
92+
93+
# Prepping Hello World
94+
95+
Follow these steps to make your own copy of the Hello World app.
96+
97+
## Get UI-Router
98+
99+
Get the UI-Router for React code using npm
100+
101+
```
102+
npm install ui-router-react
103+
```
104+
105+
You could alternatively refer to the
106+
[copy distributed on npmcdn.com](https://npmcdn.com/ui-router-react@latest/_bundles/ui-router-react.min.js).
107+
(This is how the live demo plunkers function)
108+
109+
## Configure your module loader
110+
111+
React development requires a module loader and is best with a bundler, such as webpack.
112+
There are many benefits to bundling, but one critical benefit for React is tree shaking capabilities, which eliminates unused code from the bundle.
113+
114+
For these tutorials, however, we're going to use SystemJS and the full UMD bundles.
115+
First, create an empty `helloworld.jsx` file.
116+
117+
**SystemJS config.js**
118+
119+
The `map` section of `systemjs.config.js` tells the System loader where to look for things.
120+
Add an entry for `ui-router-react` in the `map:` section.
121+
This entry must allow us to `import from 'ui-router-react'` and get the `ui-router-router` library entry point (`main:` from `package.json`).
122+
123+
Add a second second entry for `helloworld` which will get us the helloworld app entry point.
124+
125+
```js
126+
...
127+
map: {
128+
"react": "//npmcdn.com/react@15/dist/react.js",
129+
"react-dom": "//npmcdn.com/react-dom/dist/react-dom.js",
130+
"ui-router-react": "//npmcdn.com/ui-router-react@latest/_bundles/ui-router-react.js",
131+
"helloworld": "./"
132+
},
133+
packages: {
134+
helloworld: {
135+
main: './helloworld.js',
136+
defaultExtension: 'js'
137+
}
138+
}
139+
...
140+
```
141+
142+
SystemJS is a large, nuanced topic, but this is as far as we're going to discuss for this tutorial.
143+
144+
## Script tags
145+
146+
The scripts loaded from npmcdn are prerequisites for React + JSX running in a plunker.
147+
148+
The `config.js` script is our SystemJS configuration.
149+
150+
~~~html
151+
<head>
152+
...
153+
<script src="//npmcdn.com/systemjs/dist/system.js"></script>
154+
<script src="systemjs.config.js"></script>
155+
...
156+
~~~
157+
158+
## Bootstrapping the javascript
159+
This script tells the module loader to load `helloworld`, which is our application's entry point.
160+
161+
```html
162+
<script>
163+
System.import('helloworld').catch(console.error.bind(console));
164+
</script>
165+
```
166+
167+
# Building Hello World
168+
169+
## ES6 imports
170+
171+
In order to access the code required to bootstrap React and UI-Router, we need to import a bunch of things.
172+
173+
```js
174+
import React from 'react';
175+
import ReactDOM from 'react-dom';
176+
import UIRouterReact, {UIView, UISref, UISrefActive} from 'ui-router-react';
177+
```
178+
179+
## Creating the components
180+
181+
Create the React components that make up our application.
182+
183+
**The `Hello` and `About` components**
184+
185+
Create two components for our two "pages".
186+
187+
~~~js
188+
const Hello = () => <h3>hello world</h3>;
189+
const About = () => <h3>Its the UI-Router hello world app!</h3>
190+
~~~
191+
192+
These two stateless components make up the two pages of our application.
193+
One of these components will be shown, when its corresponding state is active.
194+
195+
*Viewport*
196+
197+
The application contains a `<UIView>` viewport.
198+
The `<UIVIew>` viewport will be filled with the component from the currently active state.
199+
200+
*Links*
201+
202+
It also contains two anchor tags wrapped into `UISref` components.
203+
The `UISref` components create a link and attach it to their child elements, similar to an anchor tag's `href`.
204+
Instead of linking to a URL like an `href`, a `UISref` links to a state.
205+
206+
When clicked, the linked state is activated.
207+
The `UISref` component automatically builds a `href` attribute for you (`<a href=...></a>`) based on your state's url.
208+
209+
*Active Link*
210+
211+
The `UISref` components are also wrapped by a `<UISrefActive class="active">`, which is another component.
212+
The addition of `UISrefActive` adds the `active` css class to the `UISref`'s child when the target state is active.
213+
214+
## Instantiating the root component
215+
216+
Inside the `<body>` tag, we add markup for our application's components.
217+
218+
```html
219+
<body>
220+
<div id="react-app">
221+
Loading...
222+
</div>
223+
</body>
224+
```
225+
226+
## Create your first states
227+
228+
A state is the basic building block for UI-Router applications.
229+
This javascript object is a simple state definition.
230+
231+
```js
232+
let helloState = { name: 'hello', url: '/hello', component: Hello };
233+
```
234+
235+
This simple state definition has three properties:
236+
237+
`name`
238+
: The state is named `hello`.
239+
240+
`url`
241+
: When the state is active, the browser's url will be `/hello`.
242+
243+
`component`
244+
: The `component:` property value is the React component class that will be loaded into the viewport when the state is active. In this case, we will load the `Hello` component.
245+
246+
Add the other about state:
247+
248+
```js
249+
let helloState = { name: 'hello', url: '/hello', component: Hello };
250+
let aboutState = { name: 'about', url: '/about', component: About };
251+
```
252+
253+
## Configure and start UIRouter
254+
255+
We can create a new instance of the router and configure it with our states.
256+
257+
```js
258+
const router = new UIRouterReact();
259+
260+
router.stateRegistry.register(helloState);
261+
router.stateRegistry.register(aboutState);
262+
263+
router.start();
264+
```
265+
266+
The `.stateRegistry.register()` method takes care of registering our states.
267+
The `.start()` method tells the Router to activate, listen for url changes and handle view changes.
268+
269+
## Bootstrapping React
270+
271+
Bootstrap React.
272+
273+
```js
274+
ReactDOM.render(
275+
<div>
276+
<UISrefActive class="active">
277+
<UISref to="hello"><a>Hello</a></UISref>
278+
</UISrefActive>{' '}
279+
<UISrefActive class="active">
280+
<UISref to="about"><a>About</a></UISref>
281+
</UISrefActive>
282+
283+
<UIView/>
284+
</div>,
285+
document.getElementById('react-app')
286+
);
287+
```
288+
289+
---
290+
291+
Go back to the [live demo](#live-demo) and check it out!
292+
293+
When you're finished, move on to the [Hello Solar System!](hellosolarsystem) tutorial.
294+

‎_tutorial_react/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: "UI-Router for React - Tutorials"
3+
sitemap: true
4+
permalink: /tutorial/react/
5+
---
6+
7+
[Get started](helloworld)

0 commit comments

Comments
 (0)