When making a website you have multiple options for extension to use. From JQuery, Angular JS, and more to choose from. The best one I believe You should use is React JS. It’s a javascript library that helps build the user interface(UI). It’s used in the front end for updating UI when something in the code changes the HTML code. An example could be something like displaying the current time. For that to happen you have to use the createRoot Component to bind the HTML file to the JS file. Allowing the js file to hold all the functions to be used on the HTML file.
In 2011 Facebook started to have some code maintenance problems. With ads starting to get some new features, it started to slow down FaceBook’s code maintenance. During that time a prototype of React was being made to fix the problem. Two years later it was released to the public free to use. To use it you will have to install Node js. Then run the command npm install -g create-react-app to install React Globally. The link to install node js will be down below.
To use react you need to do 3 steps
- Create a basic HTML file with a div that has an id
<html>
<title>test<title>
<body>
<div id =”mainApp”><div
</body>
</html>
2. create an app.js file and import react
.to use React you need to import it the file
that is using react
Import React from ‘react’;
Function App(){
//used to hold important data
this.state= {
This.string = ‘this is a example’
},
Log: function(){
console.log(this.state.example)
//return a div
return(
<div>
<div>hello</div>
<button onCLick={log()}>
</div>
)
}
Export default App;
- To render app.js you will need to render it using ReactDOM.render() from an index.js file
Import React from ‘react’;
Import ReactDom from ‘react-dom’;
Import App from “app.js”
//App will be rendered in the div that holds the ID of mainApp
ReactDOM.render(<App />, Document.getElementById(‘mainApp’));
One of my favorite components to use is componentdidmount. When
you put this function in your code it will run when the page renders. One good example of this would be using it for AJAX requests. You Could use a GET request to get your account information when you log in To your Facebook account. Another good example would be if you try to Go to some sites like an alcohol site. It will ask you to confirm if you're the Appropriate age to use this site.
componentdidmount(){
console.log(‘will run when page is rendered’)
}
Links used for bolg:
https://www.youtube.com/watch?v=Tn6-PIqc4UM
https://blog.risingstack.com/the-history-of-react-js-on-a-timeline
https://react.dev/learn/installation
https://www.youtube.com/watch?v=hQAHSlTtcmY&t=158s
//download link
https://nodejs.org/en/download
https://www.geeksforgeeks.org/how-to-install-reactjs-on-windows/
Top comments (0)