react-torch
v1.17.0-alpha.13
Published
A lib to server-side render with react.
Downloads
435
Readme
React-torch
A react framework.
Getting Started
- Create Project
> mkdir your-project
> cd your-project
> npm init -y
- Install Dependences
> npm install react react-dom react-torch typescript
Without Typescripts:
npm install react react-dom react-torch
- Add Scripts
Add follow code in package.json
{
"scripts": {
"dev": "torch dev",
"build": "torch build",
"start": "yarn dev",
"debug": "node --inspect-brk node_modules/.bin/torch dev",
"serve": "torch start",
"help": "torch --help",
"version": "torch --version"
}
}
- Add
src
andindex
// src/index.ts
export default [
{
path: '/',
module: () => import('./home/Controller'),
},
]
- Add Page
// src/home/index.ts
import React from 'react'
import { createPage } from '../../../src'
import store from './store'
import './style.css'
import type { History } from 'torch-history'
import type { Context } from '../../../src/index'
// const ignorePropsChanged = View => {
// let MemoizedView = (props) => {
// let view = React.useMemo(() => {
// return <View />
// }, [])
// return view
// }
// }
const getView = (history: History, context: Context) => () => {
const state = store.getState()
const INCREASE = () => {
store.dispatch({ type: 'INCREMENT' })
}
const handleClick = () => {
history.push('/test')
}
return (
<div>
Home {state.count} <button onClick={() => INCREASE()}>Increate</button>
<hr />
<a href="/about">about</a>
<hr />
<a href="/test">test</a>
<hr />
<a className="test" onClick={handleClick}>
test
</a>
</div>
)
}
export default createPage(async ({ history, context }) => {
return {
Component: getView(history, context),
store,
create: async () => {
return getView(history, context)
},
destory: async (location) => {
console.log(location, 'home destory')
},
}
})
- Start With Development
npm run dev
- Build
npm run build
- Start After Build In Production
npm start
Document
Visit docs to view the documentation.
Contributing
Please see our contributing.md.
Author
Ma Tianqi(@tqma113)