Thank you for visiting my website.
So what's here?
The first thing to understand about React is that it is component based. This makes it easy to build reusable elements.
You can design simple views for each state of the application and React will update and render only the components that are affected when the state changes. That's one way that React seems to load so quickly - it only reloads the piece of the page that has changes and not the whole page.
This is not a tutorial, but other concepts such as state and props are important to understand. When I was building the mobile menu I wanted to add an animation to the hamburger menu. Simply attaching an event listener to an element with
getElementById no longer works the way it used to be done. You need to
setState for that element so that when an event is clicked for example, the state is changed and the element is re-rendered adding a class.
I have tried to explain more on this in the Code Snippets Section.
Code Snippets Section
The original code is shown in the syntax highlighting sections - usually one section for each. For the syntax highlighting I used Prism which is a lightweight, extensible syntax highlighter. Check out the Prism website to learn more.
If you want to see how the original snippets worked, you can copy/paste from the snippets into separate files (i.e. index.html, styles.css and scripts.js) and run them in a browser.
There is a short explanation as to what was required to convert the snippet for use with React at the top of each snippet's page.
News Feeds Section
I have always added a news feeds section to my site.
In React we can use the
Fetch API or even a node package such as
axios to fetch JSON data from the Internet and display it on our site.
For the news feed on this site I am pulling the data from the News API.