Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brainpoint/febs-react-web

A framework for building web apps with React
https://github.com/brainpoint/febs-react-web

febs js react react-native react-webpack ui ui-components webapp webpack

Last synced: 11 days ago
JSON representation

A framework for building web apps with React

Host: GitHub
URL: https://github.com/brainpoint/febs-react-web
Owner: brainpoint
License: other
Created: 2016-08-24T07:32:43.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2017-07-14T08:43:47.000Z (over 7 years ago)
Last Synced: 2024-11-08T01:57:36.438Z (2 months ago)
Topics: febs, js, react, react-native, react-webpack, ui, ui-components, webapp, webpack
Language: JavaScript
Size: 2.17 MB
Stars: 1
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE

Awesome Lists containing this project

README

# Febs React Web

> A framework for building web apps with React Native compatible API.

> 在 [[email protected]](http://github.com/taobaofed/react-web) 的基础上编写.

> Febs React Web 项目兼容react-native, 能够以react-native方式编写项目, 并且最终导出html/js方式. 基于reactjs, 构建单页/多页webapp.

## Create a new project

0. Install `npm install react-native-cli -g`
1. Install `npm install febs-react-web-cli -g`
2. Execute `febs-react-web init `.
3. Execute `febs-react-web start` that starts the web dev server
4. Execute `febs-react-web bundle` that builds the output.

( In Linux system maybe use `sudo` )

## Fix platform differences

1. Native events without direct pageX/pageY on web platform
```js
if (Platform.OS == 'web') {
var touch = event.nativeEvent.changedTouches[0];
pageX = touch.pageX;
pageY = touch.pageY;
} else {
startX = event.nativeEvent.pageX;
startY = event.nativeEvent.pageY;
}
```

2. Should run application on web platform
```js
AppRegistry.registerComponent('app', () => app);
if(Platform.OS == 'web'){
var app = document.createElement('div');
document.body.appendChild(app);
AppRegistry.runApplication('app', {
rootTag: app
})
}
```

3. Should care about fetch domain on web platform
```js
import {
Fetch,
Jsonp
} from 'react-native'
```
Jsonp 只支持jsonp格式: callback({json}), 且只能是get方式.
Fetch 使用XMLHttpRequest, 需处理跨域问题.

4. Without some APIs like `LayoutAnimation` on web platform
```js
var LayoutAnimation = require('ReactLayoutAnimation')
if(Platform.OS !== 'web'){
LayoutAnimation.configureNext(...)
}
```

5. Should manually specify the height of ScrollView
```js

```

## React Native compatible

#### Components

* ActivityIndicatorIOS - ReactActivityIndicator
* ActivityIndicator - ReactActivityIndicator
* DatePickerIOS - ReactDatePicker *TODO*
* DrawerLayoutAndroid - ReactDrawerLayout
* Image - ReactImage
* ListView - ReactListView
* Modal - ReactModal
* Navigator - ReactNavigator
* PickerIOS ReactPicker
* ProgressViewIOS - ReactProgressView
* ScrollView - ReactScrollView
* SegmentedControlIOS - ReactSegmentedControl
* SliderIOS - ReactSlider
* Switch - ReactSwitch
* SwitchAndroid - ReactSwitch
* SwitchIOS - ReactSwitch
* RefreshControl - ReactRefreshControl
* TabBarIOS - ReactTabBar
* Text - ReactText
* TextInput - ReactTextInput
* ToastAndroid - ReactToast
* Touchable - ReactTouchable
* TouchableHighlight - ReactTouchableHighlight
* TouchableOpacity - ReactTouchableOpacity
* TouchableWithoutFeedback - ReactTouchableWithoutFeedback
* View - ReactView
* ViewPagerAndroid - ReactViewPager

#### APIs

* Alert - ReactAlert
* AlertIOS - ReactAlert
* Animated - ReactAnimated
* AppRegistry - ReactAppRegistry
* AsyncStorage - ReactAsyncStorage
* Dimensions - ReactDimensions
* Easing - ReactEasing
* InteractionManager - ReactInteractionManager
* LayoutAnimation - ReactLayoutAnimation
* PanResponder - ReactPanResponder
* PixelRatio - ReactPixelRatio
* StyleSheet - ReactStyleSheet

#### New Components features
* ActivityIndicator
* ViewPagerAndroid
- add method: setPageWithoutAnimation
* WebView
- 对于跨站访问需对应服务器添加 meta http-equiv="Access-Control-Allow-Origin" content="*"; 或者添加至headers中
- goBack/等函数无效.
* Picker
- 增加一个isRenderSelect:bool属性, 表明是否按照web select方式渲染.
* Fetch
- 增加timeout选项.
* Navigator
- 增加 pushRouteToFront(route, cb) 方法, 允许添加一个route到顶层, 且不刷新页面, 添加完成后调用cb()
- 为导航方法如pop,push等添加一个cb参数, 当导航完成时调用.
* ScrollView
- 增加scrollTo动画.

#### New APIs features
* Platform
- add method: select
* window.requestAnimationFrame
* window.cancelAnimationFrame

### Api of components

[febs-react-component](https://github.com/brainpoint/febs-react-component/wiki)