General questions about JS and React

JavaScript
#1

Hi everyone, I am new to this forum and to Javascript. I have a few general questions that haven’t been answered because I am learning Javascript on my own. My first question is when are classes used, I cannot find a real world example of what they are used for even though I understand the logic and how constructors and objects work.

My second question is about React. There seem to be 2 ways to set React up, you can just add links to a file, or you can actually start it using terminal on your localhost. I have installed node and started it in a terminal, but not sure if this is how everyone else is doing it. I am also not sure what React is used for or why I should learn it, but it seems to be in many front end developer job descriptions.

#2

They are used for creating objects. You have data structures (objects) representing types of things, with some data + some functions that work on the data, and you make your programs out of these. Classes are one way of creating these types of things. So like maybe you have a class that represents an array (note that this won’t work because there’s already a class called Array built into the language, change the name if you want to run it in a browser or wherever):

class Array {
  length = 0;

  push(value) {
    this[this.length] = value;
    this.length++;
    return this.length;
  }

  pop() {
    if (this.length > 0) {
      const popped = this[this.length - 1];
      this.length--;
      return popped;
    }
  }

  toString() {
    let str = `[`
    for (let i = 0; i < this.length; i++) {
      str += (i === this.length - 1) ? i : `${i}, `;
    }
    return `${str}]`;
  }
}

Then you can do

const myArr = new Array();
myArr.length; // 0
myArr.toString(); // "[]"
myArr.push("hello"); // 1
myArr.length; // 1
myArr.toString(); // "['hello']"
myArr.pop(); // "hello"
myArr.toString(); // "[]"
myArr.length; // 0

This is Object-Oriented programming, and OO is most commonly done using classes.

It’s just a JavaScript library. You aren’t starting React from the terminal (via a tool like Create React App), you are starting a web server + some other tools that take the code you write (often in a form that’s easier to develop against) and convert it to basic HTML/CSS/JavaScript, which is then shown in a browser as a webpage via the server.

It is one of several libraries for helping to write user interfaces, generally as single page apps (a single HTML page in which a JavaScript application that behaves much like a desktop app lives)

#3

Hi DanCouper, thank you so much for your reply. With regards to Classes and Objects, I completely understand them and presume that that is OOP. But the only real world application I can think of that it can be used in since Javascript acts on basically what is already loaded in your browser, is if you have a web page that maybe has a bunch of posts on it. You could use a class to create a search filter that would allow a user to search through different things and even extend it to sub categories. Otherwise, I don’t know when a class would ever be used. Am I missing something here as to why they invented it?

Then with regards to React, I don’t understand what you mean you aren’t starting React form terminal, you are starting a web server. How would you then start the web server if you weren’t starting it from terminal? I understand that in a production environment, React is started in the terminal, but when you load it onto cpanel in a live server, you create a build. Not sure which way I am supposed to use it still though. In the w3schools React tutorial, they say that React files being included in the header should only be used in a testing environment. So, they say I can’t set up a website just by including the files in the header, and then they show you how to start it in terminal.

#4

There are a lot of applications. It’s just a way of organizing data. Do you keep your clothes in one big pile in the corner or do you sort them and fold them and match the socks and put them in the correct drawers? With small amounts of data it may not matter much. With large amounts of data it becomes crucial.

Classes are a special way to think about data - you mention OOP. Remember that classes in JS are just templates for objects and aren’t true OOP. JS is not OOP, but is OOP-ish in some cases.

Older versions of React use classes for components. Modern React doesn’t use them much. But you still have to learn them.

Then with regards to React, I don’t understand what you mean you aren’t starting React form terminal, you are starting a web server.

I think I understand what the original OP meant.

In older React tutorials, you would manually grab the libraries with script tags. This is what you mean by “you can just add links to a file”.

What you mean by “node and started it in a terminal” is setting it up locally with something like webpack or create-react-app or whatever. But in that case, you are just creating a local web server and connecting to that with your browser.

This second approach is a better, more scalable one.

#5

Thank you kevinSmith, I appreciate your response too. So with regards to React, how do people who use it normally set it up? Am I doing it right, I don’t know anyone locally who even uses it so I have no one to ask what the right procedure is.

I think it is important for me to learn React and use it as I see many international companies are using it extensively.

And with regards to classes, so cool, I do get the sorting thing, I understand how they work, no problem, what I don’t understand is where are the classes getting the info from? What is the cupboard with all the clothes etc that classes get to sort? I mean, JS is not connecting to a database and sorting through info right? I can create my own massive array and then use classes to sort it all out, but what I want to know is what information is it that classes are used to sort out, where is that information coming from? I don’t know if that makes sense? Maybe if I ask, what instances would classes be used for?

#6

When you program, it is useful to be able to split the program up into small parts that interact with each other rather than just writing “do this then do this then do this then do this then do this”. The latter is exceptionally difficult to deal with for anything except the simplest things.

So organising the program into self contained objects is one extremely common way to handle the issue. JavaScript works like this – you have Array and String and Map and Set and so on and so forth, built in objects that store data and provide functions attached to them. You don’t need to use classes in JS (JS has modules as well which are another way of organising programs) and you can create objects without using classes. Java and C# and Ruby are examples of completely class-based OO languages – classes are used for everything in those languages.

React is just a JavaScript library, it’s just a bundle of JavaScript code with some useful functions: you don’t “start React”, what you are talking about is starting a web server (a program that sends and receives data via HTTP, so a browser can connect to it) plus some tools which do various things to the code you work on while you work on it. You don’t need those things, you can just have an HTML file and add JavaScript to it via <script> tags, but there are significant benefits to having this environment with tools built in to help you when programming.

React code tends to be written with something called JSX, which is an extension to JavaScript that makes it easier to code but that browsers don’t understand. So before the code can be ran in a browser, that JSX needs to be converted to actual JS by another program. You can do that in a script in the browser, while everything is running, but that is slow. It is faster to convert the JSX to JavaScript before you put it live on the web, which is what [some of] the terminal tools are for. That is why it is recommended to run thing in the terminal when you are developing. The tools will just spit out HTML/JS/etc file that you can open in a browser or copy to a computer running a server online

#7

Why can’t it?

I can create my own massive array and then use classes to sort it all out, but what I want to know is what information is it that classes are used to sort out, where is that information coming from?

Wherever you want. For example, if I have an app for a book store. I’m going to make server calls to get data. I’ll make a call to my server to get information for that use. Then I’ll make a call to my server to get a list of books. In my app, those could be an array of objects, each object being a book. How will I create and work on those objects? Creating classes for them is one way to do it.

#8

I’m really sorry DanCouper, I still don’t understand, perhaps I am not explaining properly. I know how classes work, I just don’t know what or where the information is coming from that makes it that I should use a class. I am very new to Javascript, so maybe the answer to this is so obvious to others but not to me.

And I know that a user would just open the web browser and see a web page, but I don’t understand if there is anything I am supposed to do in order to use React in my developing. I can just copy across an index.html file and a style.css file and create a website, I can then just add the React script tags and use React coding on the website and show it to users, but apparantly I am not supposed to do it that way. I am supposed to ‘build’ the ‘app’ into cpanel? I’m really confused.

#9

You can’t just put it live unless you avoid using JSX. So

function Example () {
  return (
    <p>I am an example</p>
  )
}

So that’s an example of a React component. The third line, that isn’t JavaScript that the browser understands. It’s JSX. So you either need to run a tool in the browser that reads that JavaScript code that includes the JSX, and rewrites it to JavaScript the browser understands (which is slow), or you run a tool that does the same thing while your developing and produces plain JavaScript code on your local computer. If you do the latter, then you can just use the plain JavaScript code as the thing you put live.

It’s just a way to create types of objects, you’re already doing it. It’s just one way to organise code into discrete parts that you can understand in your head to allow you to program.

const example = [1,2,3]

// same as
const example = new Array()
example[0] = 1
example[1] = 2
example[2] = 3
#10

When you say ‘make a call to my server’, you could mean get information from a database right? Because that would make sense then, classes would be very handy.

#11

Ok, so, what you are saying is that live web servers can read React natively and there is nothing I need to do. Just put the web files onto the server and it will work. It is just for localhost that I would have to create a virtual server in order for React to run?

#12

The above statement is true and correct. But let me take a step back hoping this will help clarify things up for you.

A website is “just” HTML, CSS and JS (for a bit of interactivity). At the core there’s nothing more to it.
So yeah, you can build website this way.

And for a long time it was the de-facto standard.
But with years and technology people started evolving the way they develop locally to solve some common problems.

Like.

1 - I wish there was a way for me to serve my webpage locally, and maybe refresh it after each change, so I can develop faster.

Enters a local dev server.

2- The more pages I built, more logic I need to add. And my files are becoming bigger and bigger and harder to navigate and edit. I sure wish there was some way to split them, but then “merge” them together when deploying so the page is correct.

Enters bundler.

3- I really like this open source library, I wish there was a way for me to integrate it with my code and make it work with what I have.

Enters bundler.

[etc…etc]

So, tools like create-react-app were born simply to quickly scaffold a local dev environment for you, with a set of tools that eventually, if you scale, you will need.

A transpiler for older browsers. A bundler for your code. A local server that refreshes after changes…etc…etc…

So yeah, you sure can make website with nothing more than a file, but eventually you will hit some problems (maybe, maybe not), and you will need some tools to solve them.

I hope it clarifies thing a bit more in regards of “why do I need all this stuff to develop” dilemma. As it’s hard to see until you reach the point where you need those tools.

Good luck and happy coding :sparkles:

#13

Thank you so much for being so patient so far guys! I only just figured out now how to quote your reply in my replies to you. The use of classes is starting to make sense if I put it into the setting that I am getting a hell of a lot of info from a database, then sorting out that info with a class and extends is fabulous.

How to setup React on a live server is still not really making sense. I had to install node.js and do a whole bunch of stuff on my localhost to get it to work, and not sure if that also needs to be setup on a live server (cpanel) like that too. I may need to see if I can find someone locally that I can call who knows React that can explain it to me.

#14

Programs and applications have to live on a specific computer. A server is a type of application that runs on a computer that is connected to a network. So you have a computer with some functionality that other computers need to access: a server will look at incoming requests that come in and respond in some way. For an HTTP server, the computer the server lives in is going to be assigned an address. When you make a request to that address from a client (eg a browser), the server application will see that and respond to the client.

At a basic level for a web page you only need an HTML file. A React app is JS, so in addition to that HTML file, there’s going to be a JS file in the same place on the computer. If it’s put online, then those two files will need to be on a server, but there innumerable services that handle this for you so you don’t need to set the underlying things up yourself. Locally, tools like create react app also handle the complexity.

No, React is just a library, a bundle of JavaScript functions that help developers write user interfaces for web applications. React happens to make use of this thing called JSX which needs some extra work to convert it to plain JavaScript.

The thing you are running in the terminal is a set of tools that help with development. The local web server is one of those tools.

#15

Normally you would call a server that would call that DB and then serve the info it gets from there. But that’s getting into backend work.

Web dev is a big, complicated subject. You can’t learn it all at once. If I’m teaching someone math, we start with counting. They may not be able to see how that is going to relate to the calculus they want to learn some day. But at some point you just need to learn it and move onto the next thing and the next thing. If the student stops and wants an explanation of how this will relate to every aspect of mathematics, they will be paralyzed.

Asking questions is good, but you also don’t want to get tripped up. At some point it’s just good to keep learning and trust that things will fall into place as you learn more.

Just keep learning. Learn at the level where you are. Don’t worry too much about the higher levels until you get there.

#16

Hi Marmiz, thank you kindly for your response! So, some of what you said makes sense to me, I have React setup on my localhost and it is working great. It makes changes instantly on save, it is lovely, like magic, that is all great. But now, lets say my client wants me to build a React website and it is going to be put on a LIVE server, like I’m copying the web files into the file manager on Cpanel, how do I make it a ‘React’ website on the server? Am I installing node.js on the server, am I making a ‘build’, and I just including the React files as script tags in the header? Cos I mean what is the point of creating a lovely React website on my localhost if it only works on my localhost, how is React made live?

And DanCouper, I hav no idea what JSX is.

#17

So here from Google …

Simple Steps on how to Deploy or Host your ReactJS App in cPanel
create a react project.
Add homepage attribute to the package.json file of your react project.
add .htaccess to the public folder.
.htaccess configuration.
react build folder contents.
upload build contents to cpanel with FTP. …
etc

It doesn’t mention ‘copy react-app files’, or alternately, ‘include react links in script tags’.

#18 
function Example () {
  return (
    <p>I am an example</p> <--- this is JSX
  )
}

The third line, the one that looks like HTML and doesn’t look like JS.

#19

This all depends on where and how you will deploy it. I see you have found info specific for cPanel (and that’s great).

Then all you are missing is finding a proper way to bundle your local app optimised for production.
And this yet again depends on the tools you are using locally.

If you are indeed using create-react-app then they have a command specific for that: npm run build.

But again, the answer vary depending on which tools you decided to use.
There are many :slight_smile:

#20

Ok, thank you for this. My main plan here was to really just use JS for work on the DOM, so I will concentrate on that. I am a PHP developer learning Javascript, so maybe I am wanting to know too much too soon about Javascript and just need to slow it all down. I just want my learning to be relevant and practical and hate learning something that doesn’t have a practical application, like at present, I can’t use Javascript to get information from a database to process it in classes (I don’t even know if it is possible in JS). I can obviously do it with PHP and MySQL, no problem at all, but I am learning Javascript here.