0

I have received code from a friend to be able to use as a template for my portfolio website. The website is coded in javascript, react, html and css.

I uploaded the code to a repository on GitHub to see what it looks like. I have published the website at ruben-olmos.github.io. However upon navigating to the website address all I see is the meta data in the tab and a blank page. It seems that the index.html file is read but the rest is not. I think this might have to do with the fact that it was coded in javascript.

The javascript portion of the code does not seem to be read by the site. I have gone through the code and everything seems to be fine with the code. Here is a link to the repository. https://github.com/ruben-olmos/ruben-olmos.github.io.

I have previously launched websites but they have not given me this problem. Any ideas?

Improve this question
1
  • My answer was updated with some new info you might find helpful. Commented Oct 4, 2020 at 15:32

2 Answers 2

Reset to default
3

Your friend may not have done you a great favor.

React code is not immediately uploadable; it must be processed by a packaging system (like webpack or parcel) where the javascript code creates the HTML/CSS that is then rendered onto the web page. Usually, it is used in tandem with a GIT (code versioning) system.

The advantage of React (as the name suggests) is that this coding system (intended for collaborative (group/team) coding) can react quickly and efficiently to multiple streams of data happening in multiple places on a web page. The disadvantage is that it is not your grandmother's html/css/js Notepad++ coding template. Learning react is not rudimentary - it takes time and effort.

If you are looking to become a professional developer and wish to study one of the hottest, most advanced development systems currently in use, by all means dig into React or Angular or Vue or etc. But don't expect it to be a quick study, or to have a great portfolio website in a few hours or days (unless, of course, you have a React adept sitting beside you and guiding you through the learning process).

But if you want a quick, free, website template, may I suggest that you look at the much simpler Bootstrap templates on W3Schools. The Company Theme tutorial takes about 20 minutes to complete and an hour or two to customize into a final product.

By contrast, you could spend many days (MANY days) learning React.

Update:

Here is an article that may help you understand some of the javascript concepts to brush-up on before jumping into React:

https://blog.logrocket.com/javascript-concepts-before-learning-react/

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Wow thanks I had no idea about this and you enlightened me a good amount. Okay so would it be difficult to process. I pretty much want to keep the same structure but change some stylistic elements, sources and animation, do you think that this would be difficult to do? I am planning on working on this on the side and uploading a more simple one like you suggested.
When you change the js/jsx/css/scss file, how do you "upload" it? You can't just copy the changed file to the web site - there is a packager that does this. Do you have that set up and configured? React works with Node.js - do you have Nodejs installed on your workstation? Do you have the node module dependencies installed (via npm)? If everything is configured already and you can make the desired changes to a css file and upload/publishing automation is all configured, then Yes - you can do that pretty easily. However, if you need to set all that up... then no. You need to do all that first.
A simple answer. It isn't a jquery plugin where you will copy and paste and hope it works with fingers crossed.
Thanks a lot. I was previously working from the GitHub desktop app. My command line has all that is mentioned with the exception of the packager, I think that I am more likely to encounter a success if I deploy from the command line. I will try to work from the command line and see if I can use a packager. I have found some useful information pertaining to how to deploy a react app, do you think that there will be much of a difference?
@lambdaepsilon Have you ever used Lynda.com? Can you login via the "Organizational Portal" using your library card? (To my surprise, living on an island north of Seattle, I can - so maybe you can also). Anyway, on Lynda.com they have several video tutorials to get you started on React. I suggest you look at one or two of these - Building Modern Projects with React by Shaun Wassell looks like a promising 3.5hr course that will give you a good idea what you are dealing with. At the least, it will get you set up with the necessary environment.
|
0

I don't think you ever included your index.js on the index.html page. So react is never loaded in to take over the DOM

Improve this answer

1 Comment

How exactly would this be done? and after doing this would I have to process it as mentioned above by @cssyphus would I jus

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.