React.JS and HTML?


#1

hi everyone! I was wondering if React.JS allows me to “change” a console.log statement to log to a webpage? (that was just an example.) My question is can React.JS be used in combination HTML to put stuff from JavaScript onto a webpage?


#2

I think you need familiarize yourself with the following terms:

window: https://developer.mozilla.org/en-US/docs/Web/API/Window
document: https://developer.mozilla.org/en-US/docs/Web/API/Document
console: https://developer.mozilla.org/en-US/docs/Web/API/console

understand this, should help you answer part of the question, what you do not understand, you should be able to rephrase into a better question.

Feel free to google additional things which are unclear in the MDN documentation


#3

um… I thought people would answer with a simple yes or no, then add to allow it to post :smiley: wasn’t expecting the links


#4

Can i be honest? Your question is phrased in such a way, that a simple yes or no answer isn’t possible

codecademy uses the console so the focus can be put on learning Javascript

lets look at the documentation, the first line of Window documentation:

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window.

So if we write html code:

<!DOCTYPE html>
<html>
  <head>
     <title>hello</title>
  </head>
  <body>
     <p id="paragraph">hello world</p>
  </body>
</html>

we can then save this file as html document, which has a dom tree, as explained here:

https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core

so all the different elements on the page are part of the DOM (document object model)

with JS we can get something from the document:

var example = document.getElementById("example")

see how we use document here? It means we want to get something from the html document.

now look at console.log:

console.log()

here we use console. So we have console, and we have document

with document we can get something from the webpage (or insert something), where as console is something different entirely (its often used for debugging, all browsers ship with a console, just google how you can find and use it)

so we can use reactJS to manipulate the document, which its used for

of course, if we need to debug during building our react app, we can add console.log() to log additional information to the console which we do not want to display on the webpage

understanding what is what, and how the different pieces fit together can be tricky at first


#5

oops… in my mind it looks like it’s phrased like a simple yes or no… I kinda understand… I always seem to forget that console.log() is used for debugging, not logging to a webpage


#6

JS = javascript

log is a method belonging to console.

i am currently building a react app, i used console.log from time to time for debugging. But reactJS is mostly focusing on the webpage itself. (manipulating document)

reactJS is javascript in a sense, we need to compile (convert) reactJS to Javascript so the browser can understand it (browsers only understand JS, it doesn’t understand reactJS)

reactJS is a great library if we need extensive DOM manipulation, for simple DOM manipulation something like jquery is easier. We can even manipulate the document with Javascript (without any libraries like reactJS or jquery). What libraries you should use depends on a variety of factors

lets do one attempt to answer this question:

yes

given there are so many javascript libraries, javascript is sometimes referred to as vanilla javascript.