Skip to content

Commit 4799b88

Browse files
Docs: Add more details about server-rendering to readme
1 parent c93921f commit 4799b88

File tree

1 file changed

+45
-16
lines changed

1 file changed

+45
-16
lines changed

README.md

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,71 @@ ReactJS.NET is a library that makes it easier to use [Babel](http://babeljs.io/)
88

99
# Features
1010

11-
- On-the-fly [JSX to JavaScript compilation](http://reactjs.net/getting-started/usage.html) via [Babel](http://babeljs.io/)
12-
13-
* JSX to JavaScript compilation via popular minification/combination
14-
libraries:
15-
- [ASP.NET Bundling and Minification](http://reactjs.net/bundling/weboptimizer.html)
16-
- [Cassette](http://reactjs.net/bundling/cassette.html)
17-
- [Webpack](http://reactjs.net/bundling/webpack.html)
18-
- [MSBuild](http://reactjs.net/bundling/msbuild.html)
19-
* [Server-side component rendering](http://reactjs.net/features/server-side-rendering.html)
20-
to make your initial render super-fast (experimental!)
21-
* [Runs on Windows, OS X and Linux](http://reactjs.net/getting-started/chakracore.html) via .NET Core and ChakraCore
22-
* Supports both ASP.NET 4.0/4.5 and ASP.NET Core
23-
* Server-side style rendering with CSS-in-JS libraries
11+
- On-the-fly [JSX to JavaScript compilation](http://reactjs.net/getting-started/usage.html) via [Babel](http://babeljs.io/)
12+
13+
* JSX to JavaScript compilation via popular minification/combination
14+
libraries:
15+
- [ASP.NET Bundling and Minification](http://reactjs.net/bundling/weboptimizer.html)
16+
- [Cassette](http://reactjs.net/bundling/cassette.html)
17+
- [Webpack](http://reactjs.net/bundling/webpack.html)
18+
- [MSBuild](http://reactjs.net/bundling/msbuild.html)
19+
* [Server-side component rendering](http://reactjs.net/features/server-side-rendering.html)
20+
to make your initial render super-fast, including support for:
21+
- [CSS-in-JS libraries](https://reactjs.net/features/css-in-js.html)
22+
- [React Router](https://reactjs.net/features/react-router.html)
23+
- [React Helmet](https://reactjs.net/features/react-helmet.html)
24+
- Custom JS logic via implementing [IRenderFunctions](https://github.com/reactjs/React.NET/blob/c93921f059bfe9419ad7094c184979da422a4477/src/React.Core/IRenderFunctions.cs) and passing to [Html.React](https://github.com/reactjs/React.NET/blob/c93921f059bfe9419ad7094c184979da422a4477/src/React.AspNet/HtmlHelperExtensions.cs#L71)
25+
* [Runs on Windows, OS X and Linux](http://reactjs.net/getting-started/chakracore.html) via .NET Core and ChakraCore
26+
* Supports both ASP.NET 4.0/4.5 and ASP.NET Core
2427

2528
# Quick Start
2629

2730
Install the package
2831

29-
```
32+
```powershell
3033
Install-Package React.Web.Mvc4 # For ASP.NET MVC 4 or 5
3134
Install-Package React.AspNet   # For ASP.NET Core MVC
3235
```
3336

37+
Install a Javascript engine and configure as the default (more info [here](https://reactjs.net/getting-started/aspnet.html) on how this works)
38+
39+
```powershell
40+
Install-Package JavaScriptEngineSwitcher.V8
41+
Install-Package JavaScriptEngineSwitcher.V8.Native.win-x64
42+
```
43+
44+
```csharp
45+
public static class ReactConfig
46+
{
47+
public static void Configure()
48+
{
49+
ReactSiteConfiguration.Configuration
50+
.AddScript("~/Content/HelloWorld.jsx");
51+
52+
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
53+
JsEngineSwitcher.Current.EngineFactories.AddV8();
54+
}
55+
}
56+
```
57+
3458
Create JSX files
3559

3660
```javascript
3761
// /Scripts/HelloWorld.jsx
38-
const HelloWorld = (props) => {
39-
return (<div>Hello {props.name}</div>);
62+
const HelloWorld = props => {
63+
return <div>Hello {props.greeting}</div>;
4064
};
4165
```
4266

4367
Reference the JSX files from your HTML
4468

4569
```html
70+
<!-- Place this where you want the component div to render -->
71+
@Html.React("HelloWorld", new { Greeting = "friends!" });
72+
73+
<!-- Place these at the end of the page -->
4674
<script src="@Url.Content("~/Scripts/HelloWorld.jsx")"></script>
75+
@Html.ReactInitJavaScript();
4776
```
4877

4978
Now you can use the `HelloWorld` component.

0 commit comments

Comments
 (0)