- For light weight lib like react for vanilla js project
- To confirm the react lifecycle
- set up project with
webpackandbabel - jsx transforming with
babelplugin - config
prettierandeslint - built
react-like libfrom scratch - support
useState,useEffect,function component webpack dev server
- Download or clone this repo
https://github.com/FrozenIce0617/my-own-react-lib
- Install dependencies
yarn or yarn install
Now, you can use MyOwnReact as like react in .src/index.js file.
// import library
import MyOwnReact from '../lib/MyOwnReact'
import App from './App'
MyOwnReact.render(<App />, document.getElementById('root'))
we can create App in ./App.js file like react component
import MyOwnReact from '../lib/MyOwnReact'
const App = () => {
return <h1>Hello world </h1>
}
export default App
you can run npx webpack serve as dev server, then you can see the app is running at localhost:9000 on browser.
The demo app shows the dad joke and possible to see next or prev joke by clicking buttons.
It is implemented with useEffect, useState of this lib.
import MyOwnReact from '../lib/MyOwnReact'
require('./style.css')
const DAD_JOKE_BASE_URL = 'https://icanhazdadjoke.com'
const MAX_INDEX = 10
const App = () => {
const [index, setIndex] = MyOwnReact.useState(0)
const [jokes, setJokes] = MyOwnReact.useState([])
const handleEvent = (isNext = true) => {
const nextIndex = isNext ? index + 1 : index - 1
setIndex((nextIndex + MAX_INDEX) % MAX_INDEX)
}
MyOwnReact.useEffect(() => {
// fetching joke list using api at first loading...
fetch(`${DAD_JOKE_BASE_URL}/search`, {
headers: {
accept: 'application/json',
},
})
.then((response) => response.json())
.then((jsonData) => {
setJokes(jsonData.results)
})
}, [])
return (
<div className="App">
<div className="content">
<div className="controls">
<button onClick={() => handleEvent(false)} className="btn btn-prev">
Prev
</button>
<h2>Joke {index + 1}</h2>
<button onClick={() => handleEvent()} className="btn btn-next">
Next
</button>
</div>
<h3 className="joke">{jokes[index]?.joke}</h3>
</div>
</div>
)
}
export default App