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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.