Adding a React.JS Component
To use react.js with my website, I needed to edit my package.json file to enable this.
I chnaged my script so that the package.json would start the app.js script and the react-scripts.
I added react, react-dom and react-scripts as depencies so that they would be installed when using 'npm install' in the terminal.
I tested my package.json script with a .json validator to make sure that what I had written was correct which would ensure less errors would potentially occur.
I added the react scripts to my HTML files to ensure that I could use react within that HTML file.
I wanted to add a like button to my portfolio pages with the intention of developing this later on.
I used a basic like button script found on the react.js website however I wanted to improve it's functionality and apperance.
This script creates a constant variable 'e' which creates a react element.
A class is createdwhich uses this component and sets the state of the button to false as it hasn't been clicked yet causing it not to be liked yet.
The function returns the value of this contant variable ince the button has been clicked and sets this state to true as it now has been liked. This is rendered as the state of the button is 'liked' and returns the string 'You liked this.' to the user.
I added the correct selector to the 'domContainer' variable which means that the button will use the CSS from that selector.
Therefore I searched online for a more interesting button and found this script which would allow the user to like and unlike the button.
Bibliography
OCTAVIAN (2015). React how to connect JS file with HTML file. [Online] [Code] Available at: https://stackoverflow.com/questions/32737307/react-how-to-connect-js-file-with-html-file [Accessed: 10 January 2019]
REACT (2018). Add React to a Website. [Online] [Code] Available at: https://reactjs.org/docs/add-react-to-a-website.html [Accessed: 10 January 2019]
ARUN KUMAR (n.d.). Like button-React. [Online] [Code] Available at: https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 [Accessed: 10 January 2019]
GAEARON (2018). Add React in One Minute. [Online] [Code] Available at: https://codepen.io/arun1595/pen/rjzPjM#_=_ [Accessed: 10 January 2019]
I chnaged my script so that the package.json would start the app.js script and the react-scripts.
I added react, react-dom and react-scripts as depencies so that they would be installed when using 'npm install' in the terminal.
I tested my package.json script with a .json validator to make sure that what I had written was correct which would ensure less errors would potentially occur.
I wanted to add a like button to my portfolio pages with the intention of developing this later on.
I used a basic like button script found on the react.js website however I wanted to improve it's functionality and apperance.
This script creates a constant variable 'e' which creates a react element.
A class is createdwhich uses this component and sets the state of the button to false as it hasn't been clicked yet causing it not to be liked yet.
The function returns the value of this contant variable ince the button has been clicked and sets this state to true as it now has been liked. This is rendered as the state of the button is 'liked' and returns the string 'You liked this.' to the user.
I added the correct selector to the 'domContainer' variable which means that the button will use the CSS from that selector.
This was inputted into my site using a div tag witht the id of react-component.
I wanted to change this button so that it was more interesting and fitted with my website design.
Therefore I searched online for a more interesting button and found this script which would allow the user to like and unlike the button.
OCTAVIAN (2015). React how to connect JS file with HTML file. [Online] [Code] Available at: https://stackoverflow.com/questions/32737307/react-how-to-connect-js-file-with-html-file [Accessed: 10 January 2019]
REACT (2018). Add React to a Website. [Online] [Code] Available at: https://reactjs.org/docs/add-react-to-a-website.html [Accessed: 10 January 2019]
ARUN KUMAR (n.d.). Like button-React. [Online] [Code] Available at: https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 [Accessed: 10 January 2019]
GAEARON (2018). Add React in One Minute. [Online] [Code] Available at: https://codepen.io/arun1595/pen/rjzPjM#_=_ [Accessed: 10 January 2019]
Comments