bae

react made easy

 

 

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?

:star: this repo

 

todo

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

 

license

MIT © siddharthkp