mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
More styling updates
This commit is contained in:
Hector Ramos
@@ -29,14 +29,6 @@ class Footer extends React.Component {
|
||||
return (
|
||||
<footer className="nav-footer" id="footer">
|
||||
<section className="sitemap">
|
||||
<a href={this.props.config.baseUrl} className="nav-home">
|
||||
<img
|
||||
src={this.props.config.baseUrl + this.props.config.footerIcon}
|
||||
alt={this.props.config.title}
|
||||
width="66"
|
||||
height="58"
|
||||
/>
|
||||
</a>
|
||||
<div>
|
||||
<h5><a href={this.props.config.baseUrl + "docs"}>Docs</a></h5>
|
||||
<a href={this.props.config.baseUrl + "docs/getting-started.html"}>
|
||||
|
||||
+59
-26
@@ -36,12 +36,9 @@ class Help extends React.Component {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="docMainWrapper wrapper">
|
||||
<Container className="mainContainer documentContainer postContainer">
|
||||
<div className="post">
|
||||
<header className="postHeader">
|
||||
<h1>Need help?</h1>
|
||||
</header>
|
||||
<div className="pageContainer">
|
||||
<Container>
|
||||
<h1>Community Resources</h1>
|
||||
<p>
|
||||
At Facebook, there are dozens of engineers who work on React
|
||||
Native full-time. But there are far more people in the community
|
||||
@@ -49,26 +46,62 @@ class Help extends React.Component {
|
||||
with your React Native app, the right place to go depends on the
|
||||
type of help that you need.
|
||||
</p>
|
||||
<GridBlock contents={supportLinks} layout="threeColumn" />
|
||||
<p>
|
||||
React Native is{" "}
|
||||
<a href="https://github.com/facebook/react-native">
|
||||
open source
|
||||
</a>! If you want to contribute, read the{" "}
|
||||
<a href="http://facebook.github.io/react-native/docs/contributing.html">
|
||||
Contributor's Guide
|
||||
</a>, then take a look at the{" "}
|
||||
<a href="https://github.com/facebook/react-native/wiki/Roadmap">
|
||||
Roadmap
|
||||
</a>{" "}
|
||||
to learn more about what people are working on, or check out the
|
||||
list of{" "}
|
||||
<a href="https://react-native.canny.io/feature-requests">
|
||||
most popular features
|
||||
</a>{" "}
|
||||
requested by the community.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
<Container className="mainContainer">
|
||||
<h2>Browse the docs</h2>
|
||||
<p>
|
||||
Find what you're looking for in our detailed documentation and guides.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={siteConfig.baseUrl + "docs/getting-started.html"}>Getting Started</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={siteConfig.baseUrl + "docs/tutorial.html"}>Learn the Basics</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={siteConfig.baseUrl + "docs/components.html"}>Components and APIs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={siteConfig.baseUrl + "docs/integration-with-existing-apps.html"}>Integrating with Existing Apps</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Join the community</h2>
|
||||
<p>
|
||||
Connect with other React Native developers. Show off your project, or ask how other people solved similar problems.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://stackoverflow.com/questions/tagged/react-native?sort=frequent">Stack Overflow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/groups/react.native.community">React Native Community</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Stay up to date</h2>
|
||||
<p>
|
||||
Find out what's happening in the world of React Native.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://twitter.com/reactnative">React Native on Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://facebook.github.io/react-native/blog/">The React Native Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/facebook/react-native/releases">Release notes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Container>
|
||||
<Container padding={["bottom"]}>
|
||||
<h2>Contributing to React Native</h2>
|
||||
<p>
|
||||
React Native is <a href="https://github.com/facebook/react-native">open source</a>! If you want to contribute, read the <a href="http://facebook.github.io/react-native/docs/contributing.html">Contributor's Guide</a>, then take a look at the <a href="https://github.com/facebook/react-native/wiki/Roadmap">Roadmap</a> to learn more about what people are working on, or check out the list of <a href="https://react-native.canny.io/feature-requests">most popular features</a> requested by the community.
|
||||
</p>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
|
||||
+182
-177
@@ -31,48 +31,51 @@ class Button extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
class HomeCallToAction extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
href={siteConfig.baseUrl + "docs/getting-started.html"}
|
||||
target="_self"
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
<Button
|
||||
href={siteConfig.baseUrl + "docs/tutorial.html"}
|
||||
target="_self"
|
||||
>
|
||||
Learn the Basics
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Hero extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="hero">
|
||||
<div className="wrap">
|
||||
<div className="text">
|
||||
{this.props.title}
|
||||
</div>
|
||||
<div className="minitext">
|
||||
{this.props.subtitle}
|
||||
</div>
|
||||
</div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class HomeSplash extends React.Component {
|
||||
class HeaderHero extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="homeContainer">
|
||||
<Hero
|
||||
title="React Native"
|
||||
subtitle="Build native mobile apps using JavaScript and React"
|
||||
>
|
||||
<div className="buttons-unit">
|
||||
<Button
|
||||
href={siteConfig.baseUrl + "docs/getting-started.html"}
|
||||
target="_self"
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
<Button
|
||||
href={siteConfig.baseUrl + this.props.language + "/docs/tutorial.html"}
|
||||
target="_self"
|
||||
>
|
||||
Learn the Basics
|
||||
</Button>
|
||||
</div>
|
||||
</Hero>
|
||||
</div>
|
||||
<Hero>
|
||||
<div className="text">
|
||||
React Native
|
||||
</div>
|
||||
<div className="minitext">
|
||||
Build native mobile apps using JavaScript and React
|
||||
</div>
|
||||
<div className="buttons-unit">
|
||||
<HomeCallToAction />
|
||||
</div>
|
||||
</Hero>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -114,163 +117,165 @@ class AppList extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
class Index extends React.Component {
|
||||
render() {
|
||||
let language = this.props.language || "en";
|
||||
|
||||
class Features extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<HomeSplash language={language} />
|
||||
<div className="mainContainer">
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>Build native mobile apps using JavaScript and React</h2>
|
||||
<Marked>
|
||||
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
|
||||
</Marked>
|
||||
</div>
|
||||
<Prism>
|
||||
{`import React, { Component } from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>Build native mobile apps using JavaScript and React</h2>
|
||||
<Marked>
|
||||
React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
|
||||
</Marked>
|
||||
</div>
|
||||
<Prism>
|
||||
{`import React, { Component } from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
|
||||
class WhyReactNativeIsSoGreat extends Component {
|
||||
render() {
|
||||
class WhyReactNativeIsSoGreat extends Component {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text>
|
||||
If you like React on the web, you'll like React Native.
|
||||
</Text>
|
||||
<Text>
|
||||
You just use native components like 'View' and 'Text',
|
||||
instead of web components like 'div' and 'span'.
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Text>
|
||||
If you like React on the web, you'll like React Native.
|
||||
</Text>
|
||||
<Text>
|
||||
You just use native components like 'View' and 'Text',
|
||||
instead of web components like 'div' and 'span'.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}`}
|
||||
</Prism>
|
||||
</div>
|
||||
</Container>
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>
|
||||
A React Native app is a real mobile app
|
||||
</h2>
|
||||
<Marked>
|
||||
With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
|
||||
</Marked>
|
||||
</div>
|
||||
<Prism>
|
||||
{`import React, { Component } from 'react';
|
||||
import { Image, ScrollView, Text } from 'react-native';
|
||||
|
||||
class AwkwardScrollingImageWithText extends Component {
|
||||
render() {
|
||||
return (
|
||||
<ScrollView>
|
||||
<Image
|
||||
source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
|
||||
style={{width: 320, height:180}}
|
||||
/>
|
||||
<Text>
|
||||
On iOS, a React Native ScrollView uses a native UIScrollView.
|
||||
On Android, it uses a native ScrollView.
|
||||
|
||||
On iOS, a React Native Image uses a native UIImageView.
|
||||
On Android, it uses a native ImageView.
|
||||
|
||||
React Native wraps the fundamental native components, giving you
|
||||
the performance of a native app, plus the clean design of React.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}`}
|
||||
</Prism>
|
||||
</div>
|
||||
</Container>
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>
|
||||
Don't waste time recompiling
|
||||
</h2>
|
||||
<div>
|
||||
<Marked>
|
||||
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With [Hot Reloading](http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html), you can even run new code while retaining your application state. Give it a try - it's a magical experience.
|
||||
</Marked>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
|
||||
</div>
|
||||
</Container>
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>
|
||||
Use native code when you need to
|
||||
</h2>
|
||||
<div>
|
||||
<Marked>
|
||||
React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
|
||||
</Marked>
|
||||
</div>
|
||||
</div>
|
||||
<Prism>
|
||||
{`import React, { Component } from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
import { TheGreatestComponentInTheWorld } from './your-native-code';
|
||||
|
||||
class SomethingFast extends Component {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<TheGreatestComponentInTheWorld />
|
||||
<Text>
|
||||
TheGreatestComponentInTheWorld could use native Objective-C,
|
||||
Java, or Swift - the product development process is the same.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}`}
|
||||
</Prism>
|
||||
|
||||
</div>
|
||||
</Container>
|
||||
<Container>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<Button
|
||||
href={siteConfig.baseUrl + "docs/getting-started.html"}
|
||||
target="_self"
|
||||
>
|
||||
Get Started with React Native
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
<div className="home-showcase-section paddingBottom">
|
||||
<h2>
|
||||
Who's using React Native?
|
||||
</h2>
|
||||
<p>Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!</p>
|
||||
<div className="logos">
|
||||
<AppList apps={pinnedApps} />
|
||||
</div>
|
||||
<div className="more-users">
|
||||
<Button
|
||||
href={siteConfig.baseUrl + "users.html"}
|
||||
target="_self"
|
||||
>
|
||||
More React Native Apps
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
}`}
|
||||
</Prism>
|
||||
</div>
|
||||
</Container>
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>
|
||||
A React Native app is a real mobile app
|
||||
</h2>
|
||||
<Marked>
|
||||
With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
|
||||
</Marked>
|
||||
</div>
|
||||
<Prism>
|
||||
{`import React, { Component } from 'react';
|
||||
import { Image, ScrollView, Text } from 'react-native';
|
||||
|
||||
class AwkwardScrollingImageWithText extends Component {
|
||||
render() {
|
||||
return (
|
||||
<ScrollView>
|
||||
<Image
|
||||
source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
|
||||
style={{width: 320, height:180}}
|
||||
/>
|
||||
<Text>
|
||||
On iOS, a React Native ScrollView uses a native UIScrollView.
|
||||
On Android, it uses a native ScrollView.
|
||||
|
||||
On iOS, a React Native Image uses a native UIImageView.
|
||||
On Android, it uses a native ImageView.
|
||||
|
||||
React Native wraps the fundamental native components, giving you
|
||||
the performance of a native app, plus the clean design of React.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}`}
|
||||
</Prism>
|
||||
</div>
|
||||
</Container>
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>
|
||||
Don't waste time recompiling
|
||||
</h2>
|
||||
<div>
|
||||
<Marked>
|
||||
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With [Hot Reloading](http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html), you can even run new code while retaining your application state. Give it a try - it's a magical experience.
|
||||
</Marked>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
|
||||
</div>
|
||||
</Container>
|
||||
<Container>
|
||||
<div className="blockElement">
|
||||
<div className="blockContent">
|
||||
<h2>
|
||||
Use native code when you need to
|
||||
</h2>
|
||||
<div>
|
||||
<Marked>
|
||||
React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.
|
||||
</Marked>
|
||||
</div>
|
||||
</div>
|
||||
<Prism>
|
||||
{`import React, { Component } from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
import { TheGreatestComponentInTheWorld } from './your-native-code';
|
||||
|
||||
class SomethingFast extends Component {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<TheGreatestComponentInTheWorld />
|
||||
<Text>
|
||||
TheGreatestComponentInTheWorld could use native Objective-C,
|
||||
Java, or Swift - the product development process is the same.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}`}
|
||||
</Prism>
|
||||
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MiniShowcase extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="home-showcase-section">
|
||||
<h2>
|
||||
Who's using React Native?
|
||||
</h2>
|
||||
<p>
|
||||
Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups.
|
||||
If you're curious to see what can be accomplished with React Native, <a href={siteConfig.baseUrl + "users.html"}>check out these apps</a>!
|
||||
</p>
|
||||
<div className="logos">
|
||||
<AppList apps={pinnedApps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Index extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="pageContainer">
|
||||
<HeaderHero />
|
||||
<Features />
|
||||
<MiniShowcase />
|
||||
<Hero>
|
||||
<HomeCallToAction />
|
||||
</Hero>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Index;
|
||||
|
||||
@@ -110,7 +110,7 @@ class AppList extends React.Component {
|
||||
class Users extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="mainContainer">
|
||||
<div className="pageContainer">
|
||||
<Container padding={["bottom"]}>
|
||||
<div className="showcaseSection">
|
||||
<div className="prose">
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
padding: 50px 0;
|
||||
color: #fdf3e7;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero .text {
|
||||
@@ -63,7 +64,6 @@
|
||||
|
||||
.buttons-unit {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons-unit a {
|
||||
|
||||
@@ -17,7 +17,6 @@ body {
|
||||
.mainContainer h5,
|
||||
.mainContainer h6 {
|
||||
color: $tintColor !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -120,10 +119,10 @@ code {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.container .wrapper h2 {
|
||||
@@ -134,6 +133,10 @@ code {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.pageContainer .container {
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
@@ -179,4 +182,24 @@ p {
|
||||
.big-button {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.docsNavContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.prose h1 {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.prose {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/* @media only screen and (min-device-width: 768px) {
|
||||
.container {
|
||||
margin-right: 0;
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -2,14 +2,6 @@
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.showcaseSection .prose h1 {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.showcaseSection .prose {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 840px) {
|
||||
.showcaseSection .inner-content {
|
||||
width: 100%;
|
||||
@@ -18,8 +10,9 @@
|
||||
|
||||
.home-showcase-section {
|
||||
max-width: 800px;
|
||||
margin: 20px auto 100px auto;
|
||||
margin: 20px auto 20px auto;
|
||||
text-align: center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.home-showcase-section p {
|
||||
|
||||
Reference in New Issue
Block a user