F

Author: zanjs

.gitignore

@@ -0,0 +1,25 @@
+bower_components/
+config.js
+mx_modules/
+nohup.out
+*.iml
+*.cfg
+.idea/
+.ipr
+.iws
+*~
+~*
+*.diff
+*.log
+*.patch
+*.bak
+.DS_Store
+Thumbs.db
+.project
+.*proj
+.svn/
+*.swp
+out/
+node_modules/
+build/
+dist/

README.md

@@ -0,0 +1,55 @@
+# learning-react
+
+materials about learning react
+
+## Development
+
+```
+npm install
+npm start
+```
+
+## Example
+
+http://localhost:9000/examples/
+
+online example: http://yiminghe.github.io/learning-react/examples/
+
+## Test Case
+
+http://localhost:9000/tests/runner.html?coverage
+
+```
+npm run browser-test
+npm run karma
+```
+
+## Coverage
+
+http://localhost:9000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:9000/tests/runner.html?coverage
+
+```
+npm run browser-test-cover
+```
+
+## Tutorials
+
+https://github.com/yiminghe/learning-react/blob/master/tutorial/en-us/index.md
+
+### online
+
+[react 入门](http://yiminghe.github.io/learning-react/tutorial/zh-cn/intro.html)
+
+[react 进阶](http://yiminghe.github.io/learning-react/tutorial/zh-cn/advanced.html)
+
+## Reference
+
+https://github.com/yiminghe/learning-react/blob/master/reference.md
+
+## Our components based on React
+
+[https://github.com/react-component](https://github.com/react-component)
+
+## License
+
+Sample codes and articles are released under the MIT license.

assets/css-transition-group/index.css

@@ -0,0 +1,14 @@
+.example-enter {
+    opacity: 0.01;
+    transition: opacity 1s ease-in;
+}
+.example-enter.example-enter-active {
+    opacity: 1;
+}
+.example-leave {
+    opacity: 1;
+    transition: opacity 1s ease-in;
+}
+.example-leave.example-leave-active {
+    opacity: 0.01;
+}

assets/load-on-demand/async.css

@@ -0,0 +1,3 @@
+.my-content {
+    color:red;
+}

assets/load-on-demand/index.css

@@ -0,0 +1,3 @@
+.my-button {
+    color: gray;
+}

assets/react-router/index.css

@@ -0,0 +1,33 @@
+body {
+    font-family: "Helvetica Neue", Arial;
+    font-weight: 200;
+}
+
+a {
+    color: hsl(200, 50%, 50%);
+}
+
+a.active {
+    color: hsl(20, 50%, 50%);
+}
+
+#example {
+    position: absolute;
+}
+
+.App {
+    width: 1000px;
+    margin:0 auto;
+}
+
+.Master {
+    overflow: auto;
+    padding: 10px 40px;
+    border-right: 1px solid #ccc;
+    text-align: center;
+}
+
+.Detail {
+    overflow: auto;
+    padding: 40px;
+}

examples/ReactNativeART/.babelrc

@@ -0,0 +1,3 @@
+{
+  "whitelist":["es6.constants"]
+}

examples/ReactNativeART/README.md

@@ -0,0 +1,24 @@
+## ReactNativeART test
+
+web version:  https://github.com/yiminghe/learning-react/tree/master/src/react-art
+
+android not supported because of missing ReactNativeArt ...
+
+### install
+
+```
+npm install
+```
+
+link ART in react-native/libraries/ART:  http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content
+
+### run
+
+open `ios/ReactNativeART.xcodeproj` in Xcode and run
+
+
+### demo
+
+![img](http://gtms02.alicdn.com/tps/i2/TB1wsGUJFXXXXa8XFXXygnAGFXX-730-1015.png)
+
+

examples/ReactNativeART/Rectangle.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Rectangle.art
+ * @typechecks
+ *
+ * Example usage:
+ * <Rectangle
+ *   width={50}
+ *   height={50}
+ *   stroke="green"
+ *   fill="blue"
+ * />
+ *
+ * Additional optional properties:
+ *   (Number) radius
+ *   (Number) radiusTopLeft
+ *   (Number) radiusTopRight
+ *   (Number) radiusBottomLeft
+ *   (Number) radiusBottomRight
+ *
+ */
+
+
+
+var React = require('react-native');
+var ReactART = require('ReactNativeART');
+
+var Group = ReactART.Group;
+var Shape = ReactART.Shape;
+var Surface = ReactART.Surface;
+var Transform = ReactART.Transform;
+
+var Props = React.PropTypes;
+var Shape = ReactART.Shape;
+var Path = ReactART.Path;
+
+/**
+ * Rectangle is a React component for drawing rectangles. Like other ReactART
+ * components, it must be used in a <Surface>.
+ */
+var Rectangle = React.createClass({
+  propTypes: {
+    width: Props.number.isRequired,
+    height: Props.number.isRequired,
+    radius: Props.number,
+    radiusTopLeft: Props.number,
+    radiusTopRight: Props.number,
+    radiusBottomRight: Props.number,
+    radiusBottomLeft: Props.number
+  },
+
+  render: function() {
+    var width = this.props.width;
+    var height = this.props.height;
+    var radius = this.props.radius ? this.props.radius : 0;
+
+    // if unspecified, radius(Top|Bottom)(Left|Right) defaults to the radius
+    // property
+    var tl = this.props.radiusTopLeft ? this.props.radiusTopLeft : radius;
+    var tr = this.props.radiusTopRight ? this.props.radiusTopRight : radius;
+    var br = this.props.radiusBottomRight ?
+      this.props.radiusBottomRight : radius;
+    var bl = this.props.radiusBottomLeft ? this.props.radiusBottomLeft : radius;
+
+    var path = Path();
+
+    // for negative width/height, offset the rectangle in the negative x/y
+    // direction. for negative radius, just default to 0.
+    if (width < 0) {
+      path.move(width, 0);
+      width = -width;
+    }
+    if (height < 0) {
+      path.move(0, height);
+      height = -height;
+    }
+    if (tl < 0) { tl = 0; }
+    if (tr < 0) { tr = 0; }
+    if (br < 0) { br = 0; }
+    if (bl < 0) { bl = 0; }
+
+    // disable border radius if it doesn't fit within the specified
+    // width/height
+    if (tl + tr > width) { tl = 0; tr = 0; }
+    if (bl + br > width) { bl = 0; br = 0; }
+    if (tl + bl > height) { tl = 0; bl = 0; }
+    if (tr + br > height) { tr = 0; br = 0; }
+
+    path.move(0, tl);
+
+    if (tl > 0) { path.arc(tl, -tl); }
+    path.line(width - (tr + tl), 0);
+
+    if (tr > 0) { path.arc(tr, tr); }
+    path.line(0, height - (tr + br));
+
+    if (br > 0) { path.arc(-br, br); }
+    path.line(- width + (br + bl), 0);
+
+    if (bl > 0) { path.arc(-bl, -bl); }
+    path.line(0, - height + (bl + tl));
+
+    return <Shape {...this.props} d={path} />;
+  }
+
+});
+
+module.exports = Rectangle;

examples/ReactNativeART/android/.gradle/2.4/taskArtifacts/cache.properties

@@ -0,0 +1 @@
+#Tue Sep 22 20:18:49 CST 2015

examples/ReactNativeART/android/.gradle/2.4/taskArtifacts/cache.properties.lock

@@ -0,0 +1,29 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.reactnativeart"
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    compile 'com.android.support:appcompat-v7:23.0.0'
+    compile 'com.facebook.react:react-native:0.11.+'
+}

examples/ReactNativeART/android/.gradle/2.4/taskArtifacts/fileHashes.bin

@@ -0,0 +1,17 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}

examples/ReactNativeART/android/.gradle/2.4/taskArtifacts/fileSnapshots.bin

@@ -0,0 +1,22 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.reactnativeart">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:allowBackup="true"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
+
+</manifest>