How do I implement React ebook Reader?

Online: iReader.liumin.me

Github:github.com/liumin1128/…

Front-end technology communication QQ new group: 648060073 (fire stealing)

Unexpectedly, I hu Hansan back!

Remember that I didn’t graduate when I wrote this last time, but now THAT I’m out of school, it’s time to fill in the hole I left behind.

The last version received no (Gen) less (Ben) and no (MEI) feedback (you), most of the children’s shoes feel very fun, but the experience is not good, slow loading, lag, etc. So I just implemented the core function of reading books this time, and spent my time optimizing the experience. In this article, I try not to keep a running account, less nonsense, if there is a mistake welcome correction, exchange.

NPM I -g cat-cli cat-cli new iReader // Create a project, default use webpack3 template CD ireader NPM I NPM run DLL // build a dynamic link library NPM start // start the project, Default port 8000 // Please be sure to read this paragraph, because this tool does not have any hints...Copy the code

Getting access to the book, arguably the most central feature of the project, started with only two or three lines and soon became very lengthy. In fact, this method is a bit misnamed to call the source, should be called the book, the code is generally written, let’s think of console as a comment. The main function is to put the current reading books back on the shelf and take out the new books mentioned above. And this method is only called when reading a new book.

The case to be considered is basically that the user opens the app for the first time and does not currently read the book. At this time, the user can directly obtain the book source and proceed to the next step. When the user is already looking at a book, and switch to the same book, directly return, if another book, the current data, together with the book information package back to the shelf, of course, before this to check whether there is a book in the shelf, take out, if not, continue to obtain the book source. Note that instead of using an array, the book ID is stored in the bookshelf as a key value, which makes it easy to fetch and find.

It is important to note that the project is a Web application by nature, and users can go to any page from the URL, so be prepared for exceptions such as no book details.

Access to the source

function* getSource({ query }) { try { const { id } = query; const { reader: { id: currentId, detail: { title } } } = yield select(); if (currentId) { if (id ! == currentId) { const { reader, store: { [id]: book } } = yield select(); Console. log(' put ${title} back on the shelf '); yield put({ type: 'store/put', payload: { ... reader }, key: currentId }); yield put({ type: 'reader/clear' }); If (book && book.detail && book.source) {console.log(' Fetch ${book.detail. Title} 'from bookshelf); yield put({ type: 'reader/save', payload: { ... book } }); return; } } else { return; } } let { search: { detail } } = yield select(); if (! Detail. _id) {console.log(' details don't exist, go get them '); detail = yield call(readerServices.getDetail, id); } const data = yield call(readerServices.getSource, id); Console. log(' get ${detail.title} 'from the network); yield put({ type: 'reader/save', payload: { source: data, id, detail } }); Console. log(' read: ${detail.title} '); yield getChapterList(); } catch (error) { console.log(error); }}Copy the code

Chapter List & Chapter Content Getting the chapter list and chapter content is easy with a little exception handling.

function* getChapterList() { try { const { reader: { source, currentSource } } = yield select(); If (currentSource >= source.length) {console.log(' What the ghost? How did you make the mistake '); yield put({ type: 'reader/save', payload: { currentSource: 0 } }); yield getChapterList(); return; } const {_id, name = 'source'} = source[currentSource]; Console. log(' book source: ${name} '); const { chapters } = yield call(readerServices.getChapterList, _id); yield put({ type: 'reader/save', payload: { chapters } }); yield getChapter(); } catch (error) { console.log(error); } } function* getChapter() { try { const { reader: { chapters, currentChapter } } = yield select(); const { link } = chapters[currentChapter || 0]; const { chapter } = yield call(readerServices.getChapter, link); If (chapter) {console.log(' ${chapter. Title} '); yield put({ type: 'reader/save', payload: { chapter } }); window.scrollTo(0, 0); } else {console.log(' section fetching failed '); yield getNextSource(); } } catch (error) { console.log(error); }}Copy the code

In the source implementation

As a core function, this has to be there. In the last version, we have implemented manual switching of book sources in the list, but the experience is not very good, because the user does not know that the book source is available, it is possible to switch 34 book sources in a row, so this time we simply do a wise (SHA) energy (GUA) change of source.

Swapping is simply manipulating the pointer that marks the source of the book. It’s easy, but what we care about is when to swap. After testing, it was found that there was almost no problem in the step of obtaining the chapter list, and the error basically occurred in the step of obtaining the chapter. Therefore, we just need to make a little judgment in the section list to implement automatic source switching. The method of switching sources is as follows.

function* getNextSource() { try { const { reader: { source, currentSource } } = yield select(); let nextSource = (currentSource || 1) + 1; console.log(nextSource); If (nextSource >= source.length) {console.log(' no available source, switch back to good source '); nextSource = 0; } console.log(' trying to switch to book source: ${source[nextSource] && source[nextSource].name} '); yield put({ type: 'reader/save', payload: { currentSource: nextSource } }); yield getChapterList(); } catch (error) { console.log(error); }}Copy the code

The effect is as follows, when the first book source error we automatically jump to the next book source, very convenient.

Switch section

It’s very simple, just do a little exception handling.

function* goToChapter({ payload }) { try { const { reader: { chapters } } = yield select(); const nextChapter = payload.nextChapter; If (nextChapter > chapters.length) {console.log(' there is no nextChapter '); return; } if (nextChapter < 0) {console.log(' no previous chapter '); return; } yield put({ type: 'reader/save', payload: { currentChapter: nextChapter } }); yield getChapter(); } catch (error) { console.log(error); }}Copy the code

The above is basically a complete implementation of the core of the reader, as for the search and details page, there is no space to go into details.

Ok, for a long time, finally see the original, this is the core of the reader page, there is no design, is the pursuit of simple and easy to use.

The body part is the native body, so it scrolls smoothly. Notice how the data provided by the API is displayed in React. The code is very short, and the general idea is to convert the newline character as a basis to an array display, which makes it easy to set CSS styles.

export default ({ content, style }) => (<div className={styles.content} style={style}>
  { content && content.split('\n').map(i => <p>{i}</p>) }
</div>);Copy the code

After a bit of experimentation, the head can be retracted, showing the current book and chapter, and a close button. Implemented based on the React-Headroom component.

For simplicity, we put the menu at the bottom of the page so it’s easy to scroll to the bottom and click on the next chapter, but it’s a bit inconvenient to scroll to the bottom if you just want to set things up.

There are only four menus: Settings, chapter list, previous chapter and Next Chapter. Click Settings and a pop-up box will pop up, supporting skin change and font size adjustment, these are just basic, have time to do brightness adjustment automatic page turning and voice reading bar. The implementation method is very simple, post this code you must understand in seconds.

This.stopevent = (e) => {// Prevent bubbles between composite events. / / stop the synthesis between events and the document on the outermost layers of the bubbling e.n ativeEvent. StopImmediatePropagation (); e.preventDefault(); return false; };Copy the code

The chapter list is more mei plus you, so pay a little attention to how the current chapter is displayed in the list. I use the anchor link to achieve, and with a SIDER component, a monk to pass thousands of chapters jump up is also very easy.

this.skip = () => {
      setTimeout(() => {
        document.getElementById(this.range.value).scrollIntoView(false);
      }, 100);
 }Copy the code

In the skin

Say very good implementation, is nothing more than a preset set of theme parameters, need which point that.

export const COLORS = [ { background: '#b6b6b6', }, { background: '#999484', }, { background: '#a0b89c',}, {background: '#cec0a4',}, {background: '# b5b2be ',}, {color: 'rgba(255,255,255,0.8)', background: '# 011721}, {color:' rgba (255255255,0.7), background: '# 2 c2926'}, {background: '# c4ada4,},];Copy the code

Maintain a setting field in redux for user Settings. Get it in the reader and set it to a theme.

function mapStateToProps(state) { const { chapter, currentChapter = 0, detail } = state.reader; const { logs } = state.common; return { logs, chapter, detail, currentChapter, ... state.setting, }; } "" javascript changes the skin to save the new data to redux to implement the skin function. This. Setting = (key, val) => {this.props. Dispatch ({type: 'setting/save', payload: {[key]: val, }, }); }; / / adjust font size enclosing setStyle = (num) = > {const fontSize = this. Props. The style.css. FontSize + num. this.props.dispatch({ type: 'setting/save', payload: { style: { ... this.props.style, fontSize, }, }, }); };Copy the code

Delete the implementation

In order not to add a new UI, we decided to delete with a long press. But the list needed to support not only long and short presses, but also scrolling, and I didn’t want to use a heavy-duty library like hammer.js, so I wrote a component by hand that supported both long and short presses. It’s just fine. It’s not gonna get any better.

export default ({ children, onPress, onTap }) => { let timeout; let pressed = false; let cancel = false; function touchStart() { timeout = setTimeout(() => { pressed = true; if (onPress) onPress(); }, 500); return false; } function touchEnd() { clearTimeout(timeout); if (pressed) { pressed = false; return; } if (cancel) { cancel = false; return; } if (onTap) onTap(); return false; } function touchCancel() { cancel = true; } return (<div onTouchMove={touchCancel} onTouchCancel={touchCancel} onTouchStart={touchStart} onTouchEnd={touchEnd} > {  children } </div>); };Copy the code

As for the long popover UI, I’m too lazy to design it. It won’t work in a short time, so I’ll stick with Sweet-Alert2. It’s a great plugin.

At this point we have all the functionality and UI implemented.

The last

All the data in the project comes from the book chasing artifact, thank you very much!! This project is only for learning front-end technology in actual combat, please do not use it. Maybe next the author will make a music player? Experienced friends can join together. Making you understand

Online: iReader.liumin.me

Github:github.com/liumin1128/…

Big ye ~ often come to play, welcome to contribute code ~

cnpm i -D babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react webpack Webpack-dev-server html-webpack-plugin eslint@^3.19.0 eslint-plugin-import eslint-loader eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react babel-plugin-import file-loader babel-plugin-transform-runtime babel-plugin-transform-remove-console redux-devtools style-loader less-loader css-loader postcss-loader autoprefixer rimraf extract-text-webpack-plugin copy-webpack-plugin react-hot-loader@next less cnpm i -S react react-dom react-router  react-router-dom redux react-redux redux-saga material-ui@next material-ui-icons cnpm i -S preact preact-compat react-router react-router-dom redux react-redux redux-saga proxy: { '/api': { target: 'http://api.zhuishushenqi.com/', changeOrigin: true, pathRewrite: { '^/api': '' }, }, '/chapter': { target: 'http://chapter2.zhuishushenqi.com/', changeOrigin: true, pathRewrite: { '^/api': '' }, }, },Copy the code