artyom4d / neal-react

Startup Landing Page Components for React.js

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

• Hosted Sample Page
• Sample Page Code on Github

Available Components

Main components:

• App
• Code
• CustomerQuotes
• Footer
• Figure
• Hero
• HorizontalSplit
• ImageList
• Navbar
• Page
• PricingTable
• Section
• SignupInline
• SignupModal
• Team

Third-Party integrations

• GoogleAnalytics
• Segment
• Stripe
• Typeform

Documentation

The best way to learn about the components is to look at the code for the sample page. But, basically:

npm install --save neal-react

import React from "react";
import ReactDOM from "react-dom";
import { App, Page, Section, Hero, Navbar, HorizontalSplit } from "neal-react";

ReactDOM.render((
  <App googleAnalyticsKey="UA-42490151-3">
    <Page>
      <Navbar brand="hello">{ /* Your nav */ }</Navbar>
      <Hero className="text-center"> <h1>{ /* Content */ }</h1> </Hero>
      <Section heading="Hello!">
        <HorizontalSplit padding="md"> { /* Content */ } </HorizontalSplit>
      </Section>
      { /* More ... */ }
    </Page>
  </App>
), 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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Custom Styling

Styling can be overwritten by setting the appropriate SASS Variables in your code.

A note on Bootstrap

neal-react uses Boostrap 4, which is currently in alpha. Because the alpha version is not published on npm its styles are included manually here until it's officially avalailable.

Using with 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 and the corresponding code in this repository. A big thanks to ispelon 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. You can use a script such as this to minifify and upload:

#! /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