|
1 |
| -[](https://hermanya.github.io/react-landing-page/) |
2 |
| - |
3 | 1 | # React Landing Page
|
4 | 2 |
|
5 |
| -React UI component library for building Landing Pages. |
6 |
| - |
7 |
| -[![Build Status][badge]][travis] |
8 |
| -[![Coverage][coverage-badge]][coverage] |
9 |
| -[![Downloads][downloads-badge]][npm] |
10 |
| -[![Version][version-badge]][npm] |
11 |
| - |
12 |
| -[badge]: https://img.shields.io/travis/Hermanya/react-landing-page.svg?style=flat-square |
13 |
| -[travis]: https://travis-ci.org/Hermanya/react-landing-page |
14 |
| -[coverage-badge]: https://img.shields.io/codecov/c/github/Hermanya/react-landing-page.svg?style=flat-square |
15 |
| -[coverage]: https://codecov.io/github/Hermanya/react-landing-page |
16 |
| - |
17 |
| -[downloads-badge]: https://img.shields.io/npm/dw/react-landing-page.svg?style=flat-square |
18 |
| -[version-badge]: https://img.shields.io/npm/v/react-landing-page.svg?style=flat-square |
19 |
| -[npm]: https://npmjs.com/package/react-landing-page |
20 |
| - |
21 |
| - |
22 |
| -```sh |
23 |
| -npm i react-landing-page |
24 |
| - |
25 |
| -# for best dev experience install and use rebass |
26 |
| -npm i rebass@next |
27 |
| -``` |
28 |
| - |
29 |
| -[>> SEE DEMO <<](https://hermanya.github.io/react-landing-page/) |
30 |
| - |
31 |
| -React Landing Page is a set of highly-composable React components for building advanced landing pages. It is built using Rebass, a library of UI primitives. |
32 |
| -Based upon a configurable design system, |
33 |
| -Rebass‘s props API makes building consistent, responsive web apps simpler and faster. |
34 |
| - |
35 |
| - |
36 |
| -## Getting Started |
37 |
| - |
38 |
| -```jsx |
39 |
| -import React from 'react' |
40 |
| -import { Provider, Heading, Subhead } from 'rebass' |
41 |
| -import { |
42 |
| - Hero, CallToAction, ScrollDownIndicator |
43 |
| -} from 'react-landing-page' |
44 |
| - |
45 |
| -const App = props => ( |
46 |
| - <Provider> |
47 |
| - <Hero |
48 |
| - color="black" |
49 |
| - bg="white" |
50 |
| - backgroundImage="https://source.unsplash.com/jxaj-UrzQbc/1600x900" |
51 |
| - > |
52 |
| - <Heading>Name of your app</Heading> |
53 |
| - <Subhead>a couple more words</Subhead> |
54 |
| - <CallToAction href="/getting-started" mt={3}>Get Started</CallToAction> |
55 |
| - <ScrollDownIndicator/> |
56 |
| - </Hero> |
57 |
| - </Provider> |
58 |
| -) |
59 |
| -``` |
60 |
| - |
61 |
| -To use Rebass with [emotion][emotion], import from `rebass/emotion`: |
| 3 | +This React UI component library for building Landing Pages is **deprecated for the time being**. |
62 | 4 |
|
63 |
| -```js |
64 |
| -import * as Rebass from 'rebass/emotion' |
65 |
| -``` |
| 5 | +I deprecated it because a lot has changed in the industry over the past few years and my vision of the problem this repo was trying to solve has changed as well. |
66 | 6 |
|
67 |
| -## Features |
| 7 | +On one hand, there is no need to couple your app to your landing page. If your app is using react, it does not mean your landing page should. If anything, react is slowing down your landing page. |
68 | 8 |
|
69 |
| -1. 👋 Hero |
70 |
| -2. 🔥 Features |
71 |
| -3. ✅ Checklist |
72 |
| -4. 💼 Company Logos |
73 |
| -5. 🙎 Testimony |
74 |
| -6. 💳 Pricing |
75 |
| -7. 📣 Call To Action |
76 |
| -8. 📩 Sign Up |
77 |
| -9. 👩💼 Team |
| 9 | +> JavaScript bundle size reduced by 200kB by switching from React and other client-side libraries to vanilla JavaScript. React was still used server-side. |
78 | 10 |
|
79 |
| -## Documentation |
| 11 | +[A Netflix web performance study](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9) |
80 | 12 |
|
81 |
| -- [Getting Started](https://hermanya.github.io/react-landing-page/getting-started) |
82 |
| -- [Theming](https://hermanya.github.io/react-landing-page/theming) |
83 |
| -- [Components](https://hermanya.github.io/react-landing-page/components) |
84 |
| -- [Server-Side Rendering](https://hermanya.github.io/react-landing-page/server-side-rendering) |
| 13 | +On the other hand, you may be tempted to re-use the UI library you used to build your app to have the same look. This makes a lot of sense. Except you should not build your app before you build your landing page :D |
85 | 14 |
|
86 |
| -## CodeSandbox |
| 15 | +In this case, you either have your custom-built UI library and you are basically on your own to build your landing page. Or you chose to go with an off-npm UI library, such as Material UI, React Bootstrap, Reactstrap, or Antd. |
87 | 16 |
|
88 |
| -Try it out: |
| 17 | +[](https://www.npmtrends.com/react-bootstrap-vs-antd-vs-@material-ui/core-vs-reactstrap-vs-@shopify/polaris-vs-@fluentui/react-vs-semantic-ui-react-vs-baseui-vs-styled-system) |
89 | 18 |
|
90 |
| -https://codesandbox.io/s/github/hermanya/react-landing-page/tree/master/examples/sandbox |
| 19 | +[Material UI](https://material-ui.com/) has an [official store](https://material-ui.com/store) and there is one [landing page template](https://material-ui.com/store/items/onepirate/). *Someone should make more :D* |
91 | 20 |
|
92 |
| -### Related |
| 21 | +[React Bootstrap](https://react-bootstrap.github.io/) does not have a store or anything. They migrated to Bootstrap v4 not that long ago. *Someone should make a react-bootstrap.store (even domain name is available) :D* |
93 | 22 |
|
94 |
| -- [rebass][rebass] |
95 |
| -- [styled-system][system] |
96 |
| -- [grid-styled][gs] |
97 |
| -- [styled-components][sc] |
98 |
| -- [emotion][emotion] |
| 23 | +As I said, it took React Bootstrap a few years to migrate to Bootstrap v4, and in the meantime, [Reactstrap](https://reactstrap.github.io/) came to life. There is a [Reactstrap templates page](https://reactstrap.github.io/premium-themes/) and link to a [third party store](https://uifort.com/template/bamburgh-react-ui-kit-reactstrap-free/). |
99 | 24 |
|
100 |
| -[rebass]: https://github.com/jxnblk/rebass |
101 |
| -[system]: https://github.com/jxnblk/styled-system |
102 |
| -[gs]: https://github.com/jxnblk/grid-styled |
103 |
| -[sc]: https://github.com/styled-components/styled-components |
104 |
| -[emotion]: https://github.com/emotion-js/emotion |
| 25 | +And finally, there is [Ant.design](https://ant.design/), which has a whole [collection of landing pages](https://landing.ant.design/), make sure to check it out. It's cool! There really should be something like this for every other UI lib. |
105 | 26 |
|
106 |
| ---- |
| 27 | +Hopefully, this was useful. Star it if you found it useful :D |
107 | 28 |
|
108 |
| -[Contributing](.github/CONTRIBUTING.md) |
109 |
| -| |
110 |
| -[MIT License](.github/LICENSE.md) |
0 commit comments