mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-24 23:25:40 +00:00
Reorganize docs; rewrite README
This commit is contained in:
Nicolas Gallagher
@@ -1,101 +1,123 @@
|
||||
# react-web-sdk
|
||||
# React Native for Web
|
||||
|
||||
**Experimental / Proof of concept**
|
||||
[![Build Status][travis-image]][travis-url]
|
||||
[![npm version][npm-image]][npm-url] (14 KB gzipped)
|
||||
|
||||
A React SDK (~9KB gzipped) for creating web applications and toolkits. Inspired by `react-native`.
|
||||
The core [React Native][react-native-url] components built for the web, backed
|
||||
by a precomputed CSS library.
|
||||
|
||||
It includes the following components:
|
||||
## Table of contents
|
||||
|
||||
* `Image`: an image primitive
|
||||
* `Text`: a text primitive
|
||||
* `TextInput`: a text input primitive
|
||||
* `View`: a flexbox primitive
|
||||
* [Install](#install)
|
||||
* [Use](#use)
|
||||
* [Components](#components)
|
||||
* [Styling](#styling)
|
||||
* [Contributing](#contributing)
|
||||
* [Thanks](#thanks)
|
||||
* [License](#license)
|
||||
|
||||
And uses a [styling strategy](docs/styling-strategy.md) that maps inline styles
|
||||
to single-purpose CSS rules.
|
||||
## Install
|
||||
|
||||
This proof of concept uses a CSS bundle (~4.5KB gzipped) of 300+ precomputed
|
||||
declarations. A more sophisticated implementation is likely to produce a
|
||||
slightly larger CSS file and fewer inline styles.
|
||||
```
|
||||
npm install --save react react-native-web
|
||||
```
|
||||
|
||||
## Use
|
||||
|
||||
React Native for Web exports its components and a reference to the `React`
|
||||
installation. Styles are authored in JavaScript as plain objects.
|
||||
|
||||
```js
|
||||
import React, { View } from 'react-native-web'
|
||||
|
||||
class MyComponent extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.root} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const styles = {
|
||||
root: {
|
||||
borderColor: 'currentcolor'
|
||||
borderWidth: '5px',
|
||||
flexDirection: 'row'
|
||||
height: '5em'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
All components define explicit `style` PropTypes according to the [`StyleProp`
|
||||
spec](docs/StyleProp.spec.md).
|
||||
Partial implementations of…
|
||||
|
||||
### View
|
||||
|
||||
TODO
|
||||
|
||||
A flexbox container; foundational layout building block.
|
||||
|
||||
[`View` spec](docs/View.spec.md)
|
||||
|
||||
See this [guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
|
||||
|
||||
### Text
|
||||
|
||||
TODO
|
||||
|
||||
[`Text` spec](docs/Text.spec.md)
|
||||
|
||||
### TextInput
|
||||
|
||||
TODO
|
||||
|
||||
[`Text` spec](docs/TextInput.spec.md)
|
||||
|
||||
### Image
|
||||
|
||||
TODO
|
||||
|
||||
[`Image` spec](docs/Image.spec.md)
|
||||
* [`Image`](docs/components/Image.md)
|
||||
* [`Text`](docs/components/Text.md)
|
||||
* [`TextInput`](docs/components/TextInput.md)
|
||||
* [`View`](docs/components/View.md)
|
||||
|
||||
## Styling
|
||||
|
||||
React Native Web provides a mechanism to declare all your styles and layout
|
||||
inline with the components that use them. The `View` component makes it easy
|
||||
to build common layouts with flexbox, such as stacked and nested boxes with
|
||||
margin and padding.
|
||||
|
||||
Styling is identical to using inline styles in React, but most inline styles
|
||||
are converted to unique CSS classes.
|
||||
are converted to single-purpose classes. The current implementation includes
|
||||
300+ precomputed CSS declarations (~4.5KB gzipped) that cover a large
|
||||
proportion of common styles. A more sophisticated build-time implementation may
|
||||
produce a slightly larger CSS file for large apps, and fall back to fewer
|
||||
inline styles. Read more about the [styling
|
||||
strategy](docs/react-native-web-style/styling.md).
|
||||
|
||||
The companion stylesheet can be referenced as an external resource, inlined, or
|
||||
injected by JS.
|
||||
|
||||
See the [styling strategy docs](docs/styling-strategy.md) for more details.
|
||||
|
||||
### Use plain JavaScript objects
|
||||
|
||||
Use JavaScript to write style definitions in React components:
|
||||
See this [guide to flexbox][flexbox-guide-url].
|
||||
|
||||
```js
|
||||
const style = {
|
||||
common: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '1em'
|
||||
},
|
||||
root: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
image: {
|
||||
opacity: 0.5
|
||||
},
|
||||
text: {
|
||||
fontWeight: '300'
|
||||
}
|
||||
};
|
||||
```
|
||||
import React, { Image, Text, View } from 'react-native-web'
|
||||
|
||||
### Use the `style` attribute
|
||||
|
||||
The `style` attribute is a simple API for creating element-scoped styles.
|
||||
|
||||
```js
|
||||
import { View } from 'react-web-sdk';
|
||||
|
||||
class Example extends React.Component {
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<View style={style.root}>...</View>
|
||||
);
|
||||
<View style={styles.row}>
|
||||
<Image
|
||||
source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
|
||||
style={styles.image}
|
||||
/>
|
||||
<View style={styles.text}>
|
||||
<Text style={styles.title}>
|
||||
React Native Web
|
||||
</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Build high quality web apps using React
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
const styles = {
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
margin: 40
|
||||
},
|
||||
image: {
|
||||
height: 40,
|
||||
marginRight: 10,
|
||||
width: 40,
|
||||
},
|
||||
text: {
|
||||
flex: 1,
|
||||
justifyContent: 'center'
|
||||
},
|
||||
title: {
|
||||
fontSize: '1.25rem',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: '1rem'
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -103,7 +125,7 @@ class Example extends React.Component {
|
||||
Combine and override style objects:
|
||||
|
||||
```js
|
||||
import baseStyle from './baseStyle';
|
||||
import baseStyle from './baseStyle'
|
||||
|
||||
const buttonStyle = {
|
||||
...baseStyle,
|
||||
@@ -112,10 +134,25 @@ const buttonStyle = {
|
||||
}
|
||||
```
|
||||
|
||||
## Development
|
||||
## Contributing
|
||||
|
||||
```
|
||||
npm install
|
||||
npm run build:example:watch
|
||||
open example/index.html
|
||||
```
|
||||
Please read the [contribution guidelines][contributing-url]. Contributions are
|
||||
welcome!
|
||||
|
||||
## Thanks
|
||||
|
||||
Thanks to current and past members of the React and React Native teams (in
|
||||
particular Vjeux and Pete Hunt), and Tobias Koppers for Webpack and CSS loader.
|
||||
|
||||
## License
|
||||
|
||||
Copyright (c) 2015 Nicolas Gallagher. Released under the [MIT
|
||||
license](http://www.opensource.org/licenses/mit-license.php).
|
||||
|
||||
[contributing-url]: https://github.com/necolas/react-native-web/blob/master/CONTRIBUTING.md
|
||||
[flexbox-guide]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
||||
[npm-image]: https://img.shields.io/npm/v/react-native-web.svg
|
||||
[npm-url]: https://npmjs.org/package/react-native-web
|
||||
[react-native-url]: https://facebook.github.io/react-native/
|
||||
[travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
|
||||
[travis-url]: https://travis-ci.org/necolas/react-native-web
|
||||
|
||||
Reference in New Issue
Block a user