Javascript React how do I display Homepage?

Good Day Experts!

I am working on a Group project.  The front end person used React.  The homepage looks great.  But,  I am having a heck of a time trying to figure how to display the homepage from my server.js file. I am trying to do that since that is the only way I know how to from past experiences.  I am wanting to use express, models, sequelize. mysql etc.  Is there a different way I need to go about this?  When I look at the index.html file there is "nothing" in it.  Then there is a home.jsx file and a App.js file.  

Do I have to scrap the server.js file "call" the homepage a different way since React was used?  I just don't understand.

Is there a good reference piece that you think can help me out here?

Thanks,
jimbo99999
Jimbo99999Asked:
Who is Participating?
 
Julian HansenCommented:
React is a library that creates (and manages) the view of an application.

JSX is the means by which the page layout and interactions are defined.

A React page works like any other HTML page.

You have your index.html page
This loads scripts and CSS files

The script that is downloaded then builds and manages the page.

So when you look at the main page and see an "empty" page - this is normal. When the React library loads (I assume this is in the app.js file) the page should be generated by the code in the JSX file which interacts with React to produce the view.

Bear in mind that many react pages are compiled from other sources and then packed to form the distributable. This won't affect running the page but if you want to update the code you will probably need the source from which it was created (assuming the code was packed).
0
 
David Johnson, CD, MVPOwnerCommented:
react is simply another javascript library.
and you can load the code via a cdn
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Open in new window

https://reactjs.org/docs/hello-world.html
0
 
Jimbo99999Author Commented:
Hello.  Thank you for your replies.  Ok, I understand conceptually about this React thing.  I have attached a file with screen prints of what I was given from the group member working on the front end.  The last screen shot was my attempt at putting in place my models, routes, controllers and server.js file stuff.  This is how I have done it in the past with my Node apps.  <--I have a feeling this is not correct.

"When the React library loads (I assume this is in the app.js file)"...am I using the app.js file instead of the server.js?  Or do I still use server.js and have to run the App.js file to load the React library from there?

Thank you for helping,
jimbo99999
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Julian HansenCommented:
Nothing attached.

You do exactly as you would for any other HTML file. There is absolutely no difference. Once React has been compiled it is just scripts that get included in your page - as with any other HTML page.
0
 
Jimbo99999Author Commented:
Sorry about that.
SPs.docx
0
 
Julian HansenCommented:
There should be a build process that you run to create a distribution from your source. Something like

ng build

Depends on your setup though.
0
 
Julian HansenCommented:
Correction - ng is an Angular CLI command

The build command for react should be something like

npm run build

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.