riact
v0.0.5
Published
A simplified React-like modern frontend framework
Downloads
14
Readme
Riact
A simplified React-like modern frontend framework.
How to use
Check the demos.
Also, a boilerplate cli tool is provided to initiate a project.
Component
Currently function component supported only.
// .babelrc
{
//...
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "Riact.createElement",
"pragmaFrag": "Riact.Fragment"
}],
//...
]
}
// ./Count.jsx
import Riact, { useState, useEffect } from 'riact';
const Count = function() {
const [ value, setValue ] = useState(0); // exactly like hooks in React 16.8.
setTimeout(setValue, 1e3, value + 1); // be careful when using hooks in timer functions, it's kind of tricky.
useEffect(() => void (console.log(value))); // useEffect basic usage
return (
<div>
<p>{value}</p>
</div>
);
};
export default Count;
// ./app.jsx
import ReactDOM from 'riact';
import Count from './Count';
ReactDom.render(<Count></Count>, document.querySelector('#app'));
Supported Feature / API
- useState(initStateValue);
- useEffect(effectCallback);
- useContext(contextComp);
- React.createRef();
- React.createContext(initContextValue);
- Context.Provider
- Context.Consumer
- React.memo(FunctionComponent);
FYI
NOTE: Riact is just for learning, it's easy and simple so DO NOT use it to develop complex applications.