https://github.com/siddharthkp/bae
react made easy
https://github.com/siddharthkp/bae
code-splitting hot-module-replacement react server-rendering streaming zero-configuration
Last synced: about 2 months ago
JSON representation
react made easy
- Host: GitHub
- URL: https://github.com/siddharthkp/bae
- Owner: siddharthkp
- License: mit
- Created: 2017-03-12T18:23:24.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-03T14:59:34.000Z (almost 7 years ago)
- Last Synced: 2025-08-04T20:20:22.142Z (2 months ago)
- Topics: code-splitting, hot-module-replacement, react, server-rendering, streaming, zero-configuration
- Language: JavaScript
- Size: 486 KB
- Stars: 114
- Watchers: 5
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react made easy
[](https://travis-ci.org/siddharthkp/bae)
### minimal setup
```
npm install bae --save
```
Add these 2 lines in your `package.json`
```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?](https://rauchg.com/2014/7-principles-of-rich-web-applications#server-rendered-pages-are-not-optional)
```js
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
{this.state.message}
}
}
```
### 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](https://github.com/facebook/react/issues/1739) asynchronous data fetching before rendering the component.
bae introduces a new lifecycle method **to pages** that runs only on the server.
```js
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
{this.props.bio}
}
}
```
### components
the usual, nothing special here.
### styling
comes with [styled-components](https://github.com/styled-components/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](https://github.com/siddharthkp/bae/tree/master/examples) 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](https://github.com/siddharthkp)