Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dennybritz/neal-react
Startup Landing Page Components for React.js
https://github.com/dennybritz/neal-react
Last synced: about 1 month ago
JSON representation
Startup Landing Page Components for React.js
- Host: GitHub
- URL: https://github.com/dennybritz/neal-react
- Owner: dennybritz
- License: isc
- Created: 2015-10-07T19:50:23.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-02-12T01:25:59.000Z (over 5 years ago)
- Last Synced: 2024-09-27T02:44:40.329Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.37 MB
- Stars: 1,379
- Watchers: 29
- Forks: 134
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-landing-page - https://github.com/dennybritz/neal-react
README
# neal-react
`neal-react` is a collection of reactjs components to quickly build landing pages. I found that using hosted services like Launchrock doesn't give me enough flexibility, but frameworks like Bootstrap are too low-level and lead to lots of repetitive code. I wanted something in between these two extremees.
## Visit the Sample Page
- Sample Page - currently unavailable.
- [Sample Page Code on Github](https://github.com/dennybritz/neal-sample)
## Available Components
Main components:
- [`App`](https://github.com/dennybritz/neal-react/blob/master/js/components/app.jsx)
- [`Code`](https://github.com/dennybritz/neal-react/blob/master/js/components/code.jsx)
- [`CustomerQuotes`](https://github.com/dennybritz/neal-react/blob/master/js/components/customer-quotes.jsx)
- [`Countdown`](https://github.com/dennybritz/neal-react/blob/master/js/components/countdown.jsx)
- [`Footer`](https://github.com/dennybritz/neal-react/blob/master/js/components/footer.jsx)
- [`Figure`](https://github.com/dennybritz/neal-react/blob/master/js/components/figure.jsx)
- [`Hero`](https://github.com/dennybritz/neal-react/blob/master/js/components/hero.jsx)
- [`HorizontalSplit`](https://github.com/dennybritz/neal-react/blob/master/js/components/horizontal-split.jsx)
- [`ImageList`](https://github.com/dennybritz/neal-react/blob/master/js/components/image-list.jsx)
- [`Navbar`](https://github.com/dennybritz/neal-react/blob/master/js/components/navbar.jsx)
- [`Page`](https://github.com/dennybritz/neal-react/blob/master/js/components/page.jsx)
- [`PricingTable`](https://github.com/dennybritz/neal-react/blob/master/js/components/pricing-table.jsx)
- [`Section`](https://github.com/dennybritz/neal-react/blob/master/js/components/section.jsx)
- [`SignupInline`](https://github.com/dennybritz/neal-react/blob/master/js/components/signup-inline.jsx)
- [`SignupModal`](https://github.com/dennybritz/neal-react/blob/master/js/components/signup-modal.jsx)
- [`Team`](https://github.com/dennybritz/neal-react/blob/master/js/components/team.jsx)
Third-Party integrations
- [`GoogleAnalytics`](https://github.com/dennybritz/neal-react/blob/master/js/components/vendor/google-analytics.jsx)
- [`Segment`](https://github.com/dennybritz/neal-react/blob/master/js/components/vendor/segment.jsx)
- [`Stripe`](https://github.com/dennybritz/neal-react/blob/master/js/components/vendor/stripe.jsx)
- [`Typeform`](https://github.com/dennybritz/neal-react/blob/master/js/components/vendor/typeform.jsx)
## Documentation
The best way to learn about the components is to look at the [code for the sample page](https://github.com/dennybritz/neal-sample/blob/master/js/sample-page.jsx). But, basically:
```bash
npm install --save neal-react
```
```javascript
import React from "react";
import ReactDOM from "react-dom";
import { App, Page, Section, Hero, Navbar, HorizontalSplit } from "neal-react";
ReactDOM.render((
{ /* Your nav */ }
{ /* Content */ }
{ /* Content */ }
{ /* More ... */ }
), document.getElementById("main"));
```
Other dependencies that should be included from a CDN:
- jQuery
- Bootstrap v4 Javascript (https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js)
- Font Awesome
```html
```
## Custom Styling
Styling can be overwritten by setting the [appropriate SASS Variables](https://github.com/dennybritz/neal-react/blob/master/css/_variables.scss) in your code.
## Using with [Structor](https://github.com/ipselon/structor)
Structor is a visual development environment for node.js web applications with React UI. You can find a boilerplate project for neal on the [Structor Marketplace](http://helmetrex.com/) and the corresponding code in [this repository](https://github.com/ipselon/neal-react-prepack). A big thanks to [ispelon](https://github.com/ipselon) for implementing this.
## Deploying to AWS
If you are using third-party integrations like Stripe or Typeform to capture user information there is no need to write your on backend and you can simply copy your `public/` directory to an AWS S3 bucket and enable [Static Website Hosting](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html). You can use a script such as this to minifify and upload:
```bash
#! /usr/bin/env bash
S3_BUCKET=s3://www.nealjs.com
BASE_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/../" && pwd)"
cd $BASE_DIR
# Build the assets
webpack -p
# Upload to S3
aws s3 cp $BASE_DIR/public/ $S3_BUCKET --recursive
```