react-torch
TypeScript icon, indicating that this package has built-in type declarations

1.17.0-alpha.13 • Public • Published

React-torch

License Action Status License PRs-welcome

NPM

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 and index
// 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)

License

MIT

Package Sidebar

Install

npm i react-torch

Weekly Downloads

146

Version

1.17.0-alpha.13

License

MIT

Unpacked Size

289 kB

Total Files

177

Last publish

Collaborators

  • tqma