@@ -11,7 +11,7 @@ Integrate Semantic-ui with react components. It depends on Semantic-UI and helps
1111
1212| | React = 0.12 | React = 0.13.* | React = 0.14.* |
1313| ------- | ------------ | -------------- | -------------- |
14- | Version | <= 0.2 | 0.3.* | 0.4.* (Comming) |
14+ | Version | <= 0.2 | 0.3.* | 0.4.* |
1515
1616## Usage
1717
@@ -24,13 +24,15 @@ And then include in your html.
2424You should include dependency.
2525- jQuery
2626- Semantic-Ui
27- - React with Addons
28- - JSXTransformer (If you write jsx in browser.)
27+ - React
28+ - ReactDOM
29+ - Babel (If you write jsx in browser.)
2930
3031Ex. Write a simple button in browser.
3132``` html
32- <script src =" //cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react-with-addons.min.js" ></script >
33- <script src =" //cdnjs.cloudflare.com/ajax/libs/react/0.12.1/JSXTransformer.js" ></script >
33+ <script src =" //cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js" ></script >
34+ <script src =" //cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js" ></script >
35+ <script src =" //cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js" ></script >
3436<script src =" http://code.jquery.com/jquery-1.10.0.min.js" ></script >
3537<link rel =" stylesheet" type =" text/css" href =" //cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.css" >
3638<script src =" //cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.js" ></script >
@@ -39,10 +41,10 @@ Ex. Write a simple button in browser.
3941
4042``` js
4143< div id= " content" >< / div>
42- < script type= " text/jsx " >
43- var Button = Semantify .Button ;
44+ < script type= " text/babel " >
45+ let Button = Semantify .Button ;
4446
45- var HelloBox = React .createClass ({
47+ let HelloBox = React .createClass ({
4648
4749 _onClick : function () {
4850 console .log (' hello world!' );
@@ -57,7 +59,7 @@ Ex. Write a simple button in browser.
5759 }
5860 });
5961
60- React .render (
62+ ReactDOM .render (
6163 < HelloBox / > ,
6264 document .getElementById (' content' )
6365 );
@@ -72,10 +74,11 @@ npm install react-semantify
7274
7375Ex.
7476``` js
75- var React = require (' react' );
76- var Button = require (' react-semantify' ).Button ;
77+ import React from ' react' ;
78+ import ReactDOM from ' react-dom' ;
79+ let Button = require (' react-semantify' ).Button ;
7780
78- var HelloBox = React .createClass ({
81+ let HelloBox = React .createClass ({
7982
8083 _onClick : function () {
8184 console .log (' hello world!' );
@@ -90,7 +93,7 @@ var HelloBox = React.createClass({
9093 }
9194});
9295
93- React .render (
96+ ReactDOM .render (
9497 < HelloBox / > ,
9598 document .getElementById (' content' )
9699);
0 commit comments