Skip to content

Commit e13f8f5

Browse files
dustinsoftwaredustinsoftware
authored
More documentation updates (reactjs#614)
* Add docs for css-in-js support * Add docs for react router * Fix a few small issues with docs * Fix docs build error * Remove razor language hint in markdown * Remove jsx language hint in markdown
1 parent 810e715 commit e13f8f5

File tree

5 files changed

+318
-12
lines changed

5 files changed

+318
-12
lines changed

‎site/jekyll/dev/contributing.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ layout: docs
33
title: Contributing
44
---
55

6-
Pull Requests
7-
-------------
6+
## Pull Requests
7+
88
We actively welcome your pull requests on the
9-
[React.NET project on GitHub](http://github.com/reactjs/React.NET):
9+
[ReactJS.NET project on GitHub](http://github.com/reactjs/React.NET):
1010

1111
1. Fork the repo and create your branch from `master`.
1212
2. If you've added code that should be tested, add tests
@@ -17,19 +17,19 @@ We actively welcome your pull requests on the
1717

1818
If you don't have Visual Studio 2017, get the [community edition](https://visualstudio.microsoft.com/downloads/) (it's free!)
1919

20-
Contributor License Agreement ("CLA")
21-
-------------------------------------
20+
## Contributor License Agreement ("CLA")
21+
2222
In order to accept your pull request, we need you to submit a CLA. You only need
2323
to do this once to work on any of Facebook's open source projects.
2424

2525
Complete your CLA here: <https://developers.facebook.com/opensource/cla>
2626

27-
Issues
28-
------
27+
## Issues
28+
2929
We use GitHub issues to track public bugs. Please ensure your description is
3030
clear and has sufficient instructions to be able to reproduce the issue.
3131

32-
License
33-
-------
32+
## License
33+
3434
By contributing to ReactJS.NET, you agree that your contributions will be
3535
licensed under its BSD license.

‎site/jekyll/features/css-in-js.md

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
---
2+
layout: docs
3+
title: CSS-in-JS
4+
---
5+
6+
Just want to see the code? Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack.CoreMvc).
7+
8+
CSS-in-JS is a technique for declaring styles within components. ReactJS.NET supports server-rendered stylesheets for several libraries (pull requests welcome to add support for more!). Your project must be using a Javascript bundler such as webpack already.
9+
10+
Make sure ReactJS.NET is up to date. You will need at least ReactJS.NET 4.0 (which is in public beta at the time of writing).
11+
12+
### [Styled Components](https://github.com/styled-components/styled-components)
13+
14+
Expose styled-components as `global.Styled`:
15+
16+
```js
17+
require('expose-loader?Styled!styled-components');
18+
```
19+
20+
Add the render helper to the call to `Html.React`:
21+
22+
```
23+
@using React.AspNet
24+
@using React.StylesheetHelpers
25+
26+
@{
27+
var styledComponentsFunctions = new StyledComponentsFunctions();
28+
}
29+
30+
@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: styledComponentsFunctions)
31+
32+
@{
33+
ViewBag.ServerStyles = styledComponentsFunctions.RenderedStyles;
34+
}
35+
```
36+
37+
In your layout file, render the styles that are in the ViewBag:
38+
39+
```
40+
<!DOCTYPE html>
41+
<html>
42+
<head>
43+
<title>React Router Sample</title>
44+
<meta charset="utf-8" />
45+
@Html.Raw(ViewBag.ServerStyles)
46+
</head>
47+
<body>
48+
@RenderBody()
49+
</body>
50+
</html>
51+
```
52+
53+
You're now ready to declare styles inside components:
54+
55+
```
56+
import React from 'react';
57+
import styled from 'styled-components';
58+
59+
const BlueTitle = styled.h1`
60+
color: #222;
61+
font-family: Helvetica, 'sans-serif';
62+
text-shadow: 0 0 5px lightgray;
63+
line-height: 2;
64+
65+
a {
66+
transition: color 0.2s ease;
67+
color: palevioletred;
68+
text-decoration: none;
69+
70+
&:hover {
71+
color: #888;
72+
}
73+
}
74+
`;
75+
76+
export function StyledComponentsDemo() {
77+
return (
78+
<BlueTitle>
79+
Hello from{' '}
80+
<a href="https://github.com/styled-components/styled-components">
81+
styled-components
82+
</a>
83+
!
84+
</BlueTitle>
85+
);
86+
}
87+
```
88+
89+
### [React-JSS](https://github.com/cssinjs/react-jss)
90+
91+
Expose react-jss as `global.ReactJss`:
92+
93+
```js
94+
require('expose-loader?ReactJss!react-jss');
95+
```
96+
97+
Add the render helper to the call to `Html.React`:
98+
99+
```
100+
@using React.AspNet
101+
@using React.StylesheetHelpers
102+
103+
@{
104+
var reactJssFunctions = new ReactJssFunctions();
105+
}
106+
107+
@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: reactJssFunctions)
108+
109+
@{
110+
ViewBag.ServerStyles = reactJssFunctions.RenderedStyles;
111+
}
112+
```
113+
114+
In your layout file, render the styles that are in the ViewBag:
115+
116+
```
117+
<!DOCTYPE html>
118+
<html>
119+
<head>
120+
<title>React Router Sample</title>
121+
<meta charset="utf-8" />
122+
@Html.Raw(ViewBag.ServerStyles)
123+
</head>
124+
<body>
125+
@RenderBody()
126+
</body>
127+
</html>
128+
```
129+
130+
You're now ready to declare styles inside components:
131+
132+
```
133+
import React from 'react';
134+
import injectSheet from 'react-jss';
135+
136+
const styles = {
137+
demoTitle: {
138+
color: '#222',
139+
fontFamily: 'Helvetica, sans-serif',
140+
textShadow: '0 0 5px lightgray',
141+
lineHeight: '2',
142+
'& a': {
143+
transition: 'color 0.2s ease',
144+
color: 'palevioletred',
145+
'text-decoration': 'none',
146+
147+
'&:hover': {
148+
color: '#888',
149+
},
150+
},
151+
},
152+
};
153+
154+
const DemoTitle = ({ classes, children }) => (
155+
<h1 className={classes.demoTitle}>
156+
Hello from <a href="https://github.com/cssinjs/react-jss">React-JSS</a>!
157+
</h1>
158+
);
159+
160+
const WithInjectedSheet = injectSheet(styles)(DemoTitle);
161+
162+
export class ReactJssDemo extends React.Component {
163+
componentDidMount() {
164+
const serverStyles = document.getElementById('server-side-styles');
165+
if (serverStyles) {
166+
serverStyles.parentNode.removeChild(serverStyles);
167+
}
168+
}
169+
170+
render() {
171+
return <WithInjectedSheet />;
172+
}
173+
}
174+
```
175+
176+
### Emotion
177+
178+
Emotion's integration with ReactJS.NET only supports rendering inline styles (instead of rendering them in the document head).
179+
180+
Expose emotion as `global.EmotionServer`:
181+
182+
```js
183+
require('expose-loader?EmotionServer!emotion-server');
184+
```
185+
186+
Add the render helper to the call to `Html.React`:
187+
188+
```
189+
@using React.AspNet
190+
@using React.StylesheetHelpers
191+
192+
@Html.React("RootComponent", new { exampleProp = "a" }, renderFunctions: new EmotionFunctions())
193+
```
194+
195+
You're now ready to declare styles inside components:
196+
197+
```
198+
import React from 'react';
199+
import styled from 'react-emotion';
200+
201+
const BlueTitle = styled('h1')`
202+
color: #222;
203+
font-family: Helvetica, 'sans-serif';
204+
text-shadow: 0 0 5px lightgray;
205+
line-height: 2;
206+
207+
a {
208+
transition: color 0.2s ease;
209+
color: palevioletred;
210+
text-decoration: none;
211+
212+
&:hover {
213+
color: #888;
214+
}
215+
}
216+
`;
217+
218+
export function EmotionDemo() {
219+
return (
220+
<BlueTitle>
221+
Hello from{' '}
222+
<a href="https://github.com/emotion-js/emotion/">emotion</a>!
223+
</BlueTitle>
224+
);
225+
}
226+
```

‎site/jekyll/features/react-router.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
layout: docs
3+
title: React Router
4+
---
5+
6+
Just want to see the code? Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack.CoreMvc).
7+
8+
[React Router](https://github.com/ReactTraining/react-router) is a Javascript routing library. By using the `React.Router` package, you can add server-side route resolution by deferring to React Router.
9+
10+
Add the `React.Router` package to your solution:
11+
12+
```
13+
dotnet add package React.Router
14+
```
15+
16+
Use a wildcard route in ASP.NET's route declarations:
17+
18+
```csharp
19+
app.UseMvc(routes =>
20+
{
21+
routes.MapRoute("default", "{path?}", new { controller = "Home", action = "Index" });
22+
});
23+
```
24+
25+
Change `@Html.React` to `Html.ReactRouter` in the razor view:
26+
27+
```csharp
28+
using React.Router;
29+
30+
@Html.ReactRouter("RootComponent", props);
31+
```
32+
33+
Expose the routes in the root component in your app:
34+
35+
```
36+
import {
37+
Link,
38+
BrowserRouter,
39+
Route,
40+
Switch,
41+
StaticRouter,
42+
Redirect,
43+
} from 'react-router-dom';
44+
45+
render() {
46+
const app = (
47+
<div>
48+
<Navbar />
49+
<Switch>
50+
<Route
51+
exact
52+
path="/"
53+
render={() => <Redirect to="/home" />}
54+
/>
55+
<Route path="/home" component={HomePage} />
56+
<Route
57+
path="*"
58+
component={({ staticContext }) => {
59+
if (staticContext) staticContext.status = 404;
60+
61+
return <h1>Not Found :(</h1>;
62+
}}
63+
/>
64+
</Switch>
65+
</div>
66+
);
67+
68+
if (typeof window === 'undefined') {
69+
return (
70+
<StaticRouter
71+
context={this.props.context}
72+
location={this.props.location}
73+
>
74+
{app}
75+
</StaticRouter>
76+
);
77+
}
78+
return <BrowserRouter>{app}</BrowserRouter>;
79+
}
80+
```

‎site/jekyll/getting-started/aspnetcore.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Just want to see the code? Check out the [sample project](https://github.com/rea
88

99
This guide covers enabling server-side rendering and Babel compilation. Getting started with ReactJS.NET on ASP.NET Core requires a few more steps compared to previous versions of ASP.NET and MVC. If you want a step-by-step guide on configuring a brand new site, see [the ReactJS.NET tutorial for ASP.NET Core](/tutorials/aspnetcore.html).
1010

11-
ReactJS.NET requires Visual Studio 2015 and ASP.NET Core RTM (final release). It is recommended to use .NET Framework, but ReactJS.NET also works with .NET Core.
11+
ReactJS.NET requires at least Visual Studio 2015 and ASP.NET Core 1.0, but has also been tested with VS 2017 and .NET Core 2.1.
1212

1313
Install the `React.AspNet` package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended). See the [JSEngineSwitcher docs](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines) for more information. After these packages are installed, ReactJS.NET needs to be initialised in your `Startup.cs` file (unfortunately this can not be done automatically like in previous versions of ASP.NET with WebActivator).
1414

@@ -87,6 +87,6 @@ You're done! You can now call `Html.React` from within Razor files:
8787
@Html.React("Sample", new { initialComments = Model.Comments, page = Model.Page })
8888
```
8989

90-
If you need support for non-Windows platforms, please see the [ChakraCore guide](/guides/chakracore.html).
90+
If you need support for non-Windows platforms, please see the [OS X/Linux guide](/getting-started/chakracore.html)
9191

9292
Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack.CoreMvc) for a working demo.

‎src/React.Sample.Webpack.CoreMvc/Content/components/home.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class HomePage extends Component {
4444
textShadow: '0 0 5px lightgray',
4545
}}
4646
>
47-
React.NET is 🔥🔥
47+
ReactJS.NET is 🔥🔥
4848
</h1>
4949
);
5050
}

0 commit comments

Comments
 (0)