Skip to content

Commit 75cfcd7

Browse files
Daniel15Daniel15
committed
Update readme as documentation has moved to website.
1 parent 0a5fb4f commit 75cfcd7

File tree

2 files changed

+36
-194
lines changed

2 files changed

+36
-194
lines changed

‎README.md

+11-194
Original file line numberDiff line numberDiff line change
@@ -1,205 +1,22 @@
11
ReactJS.NET
2-
=========
2+
===========
33
ReactJS.NET is a library that makes it easier to use Facebook's
4-
[React](http://facebook.github.io/react/) and
5-
[JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) from C#.
4+
[React](http://facebook.github.io/react/) and
5+
[JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) from C#. To get
6+
started, [take a look at the documentation](http://reactjs.net/getting-started/getting-started.html).
67

78
**It is currently under development and there is no stable release at the moment.
89
Coming soon!**
910

1011
Features
11-
=========
12-
* On-the-fly **JSX to JavaScript compilation** for development purposes
13-
* JSX to JavaScript compilation via popular minification/combination
12+
========
13+
* On-the-fly [JSX to JavaScript compilation](http://reactjs.net/getting-started/getting-started.html)
14+
* JSX to JavaScript compilation via popular minification/combination
1415
libraries:
15-
* [ASP.NET Bundling and Minification](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification)
16-
* [Cassette](http://getcassette.net/)
17-
* **Server-side component rendering** to make your initial render super-fast
18-
(experimental!)
19-
20-
Requirements
21-
============
22-
* ASP.NET 4.0 or higher
23-
* ASP.NET MVC 3, 4 or 5
24-
* [JSON.NET](http://james.newtonking.com/json)
25-
* A JavaScript engine:
26-
* [MsieJavaScriptEngine](https://github.com/Taritsyn/MsieJavaScriptEngine) -
27-
Windows only and requires IE9 or above to be installed on the server
28-
* Other engines coming soon
29-
30-
Installation
31-
============
32-
33-
Via released NuGet package
34-
--------------------------
35-
The best way of installing React.NET is via NuGet. There are several NuGet
36-
packages available:
37-
* [React](#) - The core React library. Contains the main functionality of React
38-
and JSX. You will normally use this through an integration library like
39-
React.Mvc4.
40-
* [React.Mvc4](#) - Integration with ASP.NET MVC 4 and 5
41-
* [React.Mvc3](#) - Integration with ASP.NET MVC 3
42-
* [System.Web.Optimization.React](#) - Integration with
43-
[ASP.NET Bundling and Minification](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification).
44-
Use this to combine and minify your JavaScript.
45-
* [Cassette.React] - Integration with [Cassette](http://getcassette.net/)
46-
47-
These packages can be installed either via the UI in Visual Studio, or via the
48-
Package Manager Console:
49-
```
50-
Install-Package React.Mvc4
51-
```
52-
53-
Now skip down to the [usage section](#usage)
54-
55-
Via latest development build
56-
----------------------------
57-
Development builds are automatically built after every change. Use these if you
58-
want the very latest bleeding-edge version. These are located on a custom
59-
package server (http://reactjs.net/dev/packages/) so you need to add this as a
60-
package source in Visual Studio:
61-
62-
1. Click Tools → NuGet Package Manager → Package Manager Settings
63-
2. Click Package Sources
64-
3. Click the plus icon, enter name as "React.NET Dev" and URL as
65-
http://reactjs.net/dev/packages/
66-
4. When adding the packages to your application, manually select "React.NET Dev"
67-
as the package source, and ensure "Include Prerelease" is enabled.
68-
69-
Now skip down to the [usage section](#usage)
70-
71-
Manual Installation
72-
-------------------
73-
1. Compile ReactJS.NET by running `build.bat`
74-
2. Reference React.dll and React.Mvc4.dll (if using MVC 4) in your Web
75-
Application project
76-
3. See usage example below
77-
78-
Usage
79-
=====
80-
Create your React components, ensuring you add the `/** @jsx React.DOM */`
81-
docblock.
82-
83-
```javascript
84-
// HelloWorld.react.jsx
85-
/** @jsx React.DOM */
86-
var HelloWorld = React.createClass({
87-
render: function () {
88-
return (
89-
<div>Hello {this.props.name}</div>
90-
);
91-
}
92-
});
93-
```
94-
95-
On-the-Fly JSX to JavaScript Compilation
96-
----------------------------------------
97-
Hit a JSX file in your browser (eg. `/Scripts/HelloWorld.react.jsx`) and observe
98-
the magnificence of JSX being compiled into JavaScript with no precompilation
99-
necessary. Note: This is good for fast iteration during development, but for
100-
production you will want to precompile for best performance.
101-
102-
ASP.NET Bundling and Minification Support
103-
-----------------------------------------
104-
ReactJS.NET supports the use of Microsoft's
105-
[ASP.NET Bundling and Minification](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification)
106-
library to compile JSX into JavaScript and minify it along with all your other
107-
JavaScript. Simply create a `JsxBundle` containing any number of JSX or regular
108-
JavaScript files:
109-
110-
```csharp
111-
// In BundleConfig.cs
112-
bundles.Add(new JsxBundle("~/bundles/main").Include(
113-
// Add your JSX files here
114-
"~/Content/HelloWorld.react.jsx",
115-
"~/Content/AnythingElse.react.jsx",
116-
// You can include regular JavaScript files in the bundle too
117-
"~/Content/ajax.js",
118-
));
119-
```
120-
121-
`JsxBundle` will compile your JSX to JavaScript and then minify it. For more
122-
control (eg. if you want to run other transforms as well), you can use
123-
`JsxTransform` directly:
124-
125-
```csharp
126-
// In BundleConfig.cs
127-
bundles.Add(new Bundle("~/bundles/main", new IBundleTransform[]
128-
{
129-
// This works the same as JsxBundle (transform then minify) but you could
130-
//add your own transforms as well.
131-
new JsxTransform(),
132-
new JsMinify(),
133-
}).Include(
134-
"~/Content/HelloWorld.react.jsx"
135-
));
136-
```
137-
138-
Server-Side Component Rendering
139-
-------------------------------
140-
Modify `App_Start\ReactConfig.cs` to reference your components
141-
142-
```csharp
143-
namespace MyApp
144-
{
145-
public static class ReactConfig
146-
{
147-
public static void Configure()
148-
{
149-
ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
150-
.AddScript("~/Scripts/HelloWorld.react.jsx");
151-
}
152-
}
153-
}
154-
```
155-
156-
Call `Html.React` to render a component server-side, passing it the name of the
157-
component, and any required props.
158-
159-
```csharp
160-
@Html.React("HelloWorld", new
161-
{
162-
name = "Daniel"
163-
})
164-
```
165-
166-
Call `Html.ReactInitJavaScript` to render initialisation scripts. Note that this
167-
does **not** load the JavaScript for your component, it only renders the
168-
initialisation code.
169-
170-
```html
171-
<!-- Load all your scripts normally before calling ReactInitJavaScript -->
172-
<!-- Assumes minification/combination is configured as per previous section -->
173-
<script src="http://fb.me/react-0.10.0.min.js"></script>
174-
@Scripts.Render("~/bundles/main")
175-
@Html.ReactInitJavaScript()
176-
```
177-
178-
Hit the page and admire the server-rendered beauty:
179-
180-
```html
181-
<div id="react1">
182-
<div data-reactid=".2aubxk2hwsu" data-react-checksum="-1025167618">
183-
<span data-reactid=".2aubxk2hwsu.0">Hello </span>
184-
<span data-reactid=".2aubxk2hwsu.1">Daniel</span>
185-
</div>
186-
</div>
187-
188-
<script src="http://fb.me/react-0.10.0.min.js"></script>
189-
<script src="/Scripts/HelloWorld.react.js"></script>
190-
<script>React.renderComponent(HelloWorld({"name":"Daniel"}), document.getElementById("react1"));</script>
191-
```
192-
193-
The server-rendered HTML will automatically be reused by React client-side,
194-
meaning your initial render will be super fast.
195-
196-
For a more in-depth example, take a look at the included sample application (React.Samples.Mvc4).
197-
198-
Changelog
199-
=========
200-
1.0 - ??? 2014
201-
-------------------
202-
- Initial release
16+
* [ASP.NET Bundling and Minification](http://reactjs.net/guides/weboptimizer.html)
17+
* Cassette
18+
* [Server-side component rendering](http://reactjs.net/guides/server-side-rendering.html)
19+
to make your initial render super-fast (experimental!)
20320

20421
Licence
20522
=======

‎site/README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
ReactJS.NET Site
2+
================
3+
4+
This is the website for ReactJS.NET. It consists of two parts:
5+
- The actual site, built using [Jekyll](http://jekyllrb.com/)
6+
- A package repository for development builds, using
7+
[Simple NuGet Server](https://github.com/daniel15/simple-nuget-server)
8+
(requires PHP)
9+
10+
To set up the site as it's configured in production:
11+
12+
```sh
13+
# Install Nginx and HHVM (or PHP-FPM)
14+
apt-get install nginx-full hhvm
15+
# Install Nginx configuration
16+
ln -s /var/www/reactjs.net/site/nginx.conf /etc/nginx/sites-enabled/reactjs.net && /etc/init.d/nginx reload
17+
# Install Jekyll and other dependencies
18+
gem install jekyll jekyll-assets bourbon
19+
# Build the site
20+
cd jekyll
21+
jekyll build
22+
```
23+
24+
When developing, you can run `jekyll serve -w` to start a server at
25+
localhost:4000 and automatically rebuild when any files are changed.

0 commit comments

Comments
 (0)