jedireza/aqua

New to React. Got Aqua running. Now What?

Closed this issue · 1 comments

Trying to update the home page. I've been manipulating the code at server/web/home/index.jsx with little success as I need to include a few .js files (specifically google maps api scripts).

I tried looking at the React documentation, but I can't find any information regarding the format being used with Aqua.

How do I add additional .js files to the home page outside of const feet/neck and how exactly does react deal with the object in the return call.

Thanks,
A new and confused user.

👋 thanks for opening an issue.

You may be diving in too deep right away. Aqua is built with a bunch of tools, React being one of them. If you're comfortable with JavaScript and Node (which I think is a prerequisite), you should be able to follow the execution paths and learn how things work. I have yet drafted an official annotated guide of the codebase, but someone did contribute this wiki page, which may help: https://github.com/jedireza/aqua/wiki/Page-Structure-&-How-to-add-new-page

Trying to update the home page. I've been manipulating the code at server/web/home/index.jsx with little success as I need to include a few .js files (specifically google maps api scripts).

This can be tricky sometimes. Sometimes changes might not be seen without restarting the server. We probably need to make the nodemon/webpack tasks smarter. Though I have some other changes in mind, which may partially avoid some of these paper-cuts.

I tried looking at the React documentation, but I can't find any information regarding the format being used with Aqua.

The React docs are great. I'm not sure what you mean by the format being used in Aqua though.

I need to include a few .js files (specifically google maps api scripts).

How do I add additional .js files to the home page outside of const feet/neck and how exactly does react deal with the object in the return call.

A general rule of thumb that I live by when working with React is to avoid changing the DOM that React manages. And I let React manage it all.

This is discussed a bit here:
https://stackoverflow.com/questions/23530716/react-how-much-can-i-manipulate-the-dom-react-has-rendered

One of the React developers says:

Broadly speaking, you shouldn't manipulate by hand the DOM that React has created. It's 100% kosher to create an empty <div> in React and populate it by hand; it's even okay to modify the properties of a React-rendered element as long as you don't later try to change its properties in React (causing React to perform DOM updates), but if you move an element, React may look for it and get confused when it can't find it.


I hope this helps. Feel free to ask questions, though try to make it specific about Aqua. The tools used all have great documentation. Happy hunting. 👍