Routing working and Word Counter integrated as React Component

This is where we are now. Routing works, and have integrated the wordcounter as a react component. Built the App from scratch again.

Blog-13-Jan-2016.png

Went through the entire react-router-tutorial set. Explains react router very well in easy to follow tutorial steps, and goes very incrementally so there are no big jumps between the steps. Have a much better understanding of using react-router now.

Have now built a new app which loads different articles using the routing. Have also found out how to integrate the word counter script as a react component. Was not sure how to do this before. Had the entire javascript for the word counter inside the index.html file because I was not sure how to move it into one of the react components.

Going through the react-router tutorial has helped me understand how react workds a lot more, so it was pretty easy from there to get the wordcounter script as one of the react components.

Now I just need to integrate the whole highlighting/wordcounting script (which I have already written) into the react components. Should be pretty straight forwards. Looking forward to get this done.

This is a good chance to modularise and clean up the word counter script as well, because it is a little messy at the moment.

Useful function:

To get the text in an html element with react, use .textContent. For example,

 var text = document.getElementById(‘text’).textContent;

Advertisements