Skip to content
react made easy
JavaScript
Branch: master
Clone or download
Latest commit 2efbab7 Jan 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
art rebranding! Sep 20, 2017
benchmark rebranding! Sep 20, 2017
packages use yarn workspaces Jan 3, 2019
.eslintignore add eslint Mar 19, 2017
.eslintrc add eslint Mar 19, 2017
.gitignore add benchmarking for prod server Mar 19, 2017
.travis.yml add travis integration Mar 19, 2017
LICENSE Initial commit Mar 12, 2017
README.md Remove codesponsor snippet Dec 27, 2017
package.json use yarn workspaces Jan 3, 2019
yarn.lock use yarn workspaces Jan 3, 2019

README.md



react made easy

 

Build Status

 

minimal setup

npm install bae --save

Add these 2 lines in your package.json

"scripts": {
  "dev": "bae dev",
  "start": "bae"
}

Start the dev server with npm run dev. You just setup server rendering with hot module replacement and hot reload!

 

pages

Make pages like it's the 90s.  

  • pages are routes: pages/about renders /about of your website

  • pages are rendered on the server

  • pages are streamed to the browser for quick time-to-first-byte

  • built in code splitting, each page gets it's own page.js

  • code shared between pages is served as common.js for long term caching

  • pages/home.js renders the homepage /

  • why is this important?

 

import React from 'react'

export default class extends React.Component {
  constructor (props) {
    super(props)
    this.state = {message: 'hello'} // rendered on the server
  }
  componentDidMount () {
    this.setState({message: 'hello world'}) // updated on the browser
  }
  render () {
    return <div>{this.state.message}</div>
  }
}

 

asyncComponentWillMount

React has a lifecycle method that get's called on the server componentWillMount that can be used to set data for server rendering. But, it does not support asynchronous data fetching before rendering the component.

bae introduces a new lifecycle method to pages that runs only on the server.

import React from 'react'

export default class extends React.Component {
  constructor (props) {
    super(props)
    this.state = {username: 'siddharthkp'}
  }
  asyncComponentWillMount () {
    /*
      Return a promise.
      It will get resolved on the server and passed as props to the component.
    */
    return axios.get(`https://api.github.com/users/${this.state.username}`)
  }
  render () {
    return <div>{this.props.bio}</div>
  }
}

 

components

the usual, nothing special here.

 

styling

comes with styled-components which gets rendered on the server.

 

static assets

keep your images, fonts, etc. in a directory named static

 

production

npm start will compile, optimize and serve your app.

 

example

Check out the example applications to see how simple this is.

 

like it?

⭐️ this repo

 

todo

  • init by default
  • easy api for lazy loading components
  • server worker support
  • make first build faster

 

license

 

MIT © siddharthkp

You can’t perform that action at this time.