not an issue, but a question on where can I find a tutorial implement this

[j86schroeder]

Hi, I've got a website that i want to implement the react-diagram on so it can be used to create "mind maps", is there a tutorial somewhere on how to implement this? Thanks,

[j86schroeder]

Hello, I am new to react. I found this link below and followed the instructions and added it to my website.

(link#1) (https://mybibletopics.com)

(link#2) https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx

However, what I would like to do is figure out how to implement this link below on my website to I can utilize it to create my own mind maps for my bible topics.

(link#3) http://projectstorm.cloud/react-diagrams/?path=/story/simple-usage--simple-example

Any help would be greatly appreciated, thanks,

[j86schroeder]

My setup is using a hosted web server w/ IONOS, and my website is the mybibletopics.com

When I went (link#2), I followed the instructions and I was able to implement react onto my webserver, all it really was just some coding in html, and a javascript file. Pretty simple for me.

Again, what I would like to do now is install the react-diagrams on my webserver so I can utilize all the functions on making a pretty cool mind map.

[j86schroeder]

I wanted to also explain an example of how I want to use this react-diagrams. I want to implement it so I have the ability to create a mind map as you see here attached. Also, not sure if this is possible but would like the ability so that when you hover over a bible verse, it shows the reference data to the blueletterbible.org website. Inserting custom javascript from blueletterbible.org's website, is really the only way to get the bible data to my website.

[j86schroeder]

Do I just need to put one of these folders at the root of my web server in order to install and use the react-diagrams?

[renato-bohler]

Hey @j86schroeder

No, you shouldn't need to download the project code and embed it on your website.

I'm not sure if you know about npm, create-react-app, etc... but if you don't, I would recommend you to study the modern JS/frontend ecosystem before anything else.

Basically, to use react-diagrams, you'll have to:

1. Create a new React project (probably using create-react-app);
2. Add react-diagrams on your NPM project. There are a couple of dependencies that you should add, they are documented on the repository (README and/or issues :sweat_smile:);
3. Configure react-diagrams. Here, things will get more difficult. My recommendation would be to have a look at the "Dependents" page of this repository, looking for examples to learn from. You can check out the project where I use react-diagrams (https://github.com/renato-bohler/logossim), but I think this one might be over complicated for your use case;
4. You will most certainly run into a couple of problems. If you search in the issues of this repo, you'll probably find something helpful.

[j86schroeder]

Thanks @renato-bohler I actually just did the create-react-app, but I got an error message after following the tutorial, besidse not sure if that can even be implemented on a webserver?

https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

[renato-bohler]

This tutorial you're following seems a little bit outdated. Instead of using create-react-app (or any other tooling), it manually configures the project using Webpack. I would not recommend doing this unless you are really sure what you're doing.

You should probably follow the steps on the docs: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

Or, if you prefer, you can search something on YouTube, filtering to show only videos uploaded this year. You'll find a bunch videos like this one: https://www.youtube.com/watch?v=ycrhfkZUKT0. This might be a good starting point.

[j86schroeder]

Awesome, thank you. I was able to do the create-react-app, success!

You mentioned to add react-diagrams on this NPM project, do you know where I can find how to do that? Which readme? It's getting pretty confusing. If I can get it implemented then I'll see what I can figure out how the customization part of it.

[renato-bohler]

There are some instructions on the README on the root of this repository, but they seem outdated.

You have to add a couple of dependencies. I'm not 100% sure if these are all dependencies needed, though :sweat_smile:

npm install @emotion/core @emotion/styled @projectstorm/react-diagrams @projectstorm/react-diagrams-defaults closest dagre lodash pathfinding paths-js resize-observer-polyfill

[j86schroeder]

Thanks! I didn't have any luck with that command you provided, no big deal.

This is all starting to look a lot more complicated than I previously thought... as I am confused just on basic principles, which might be pretty obvious here.

However, what is Next.js with the notes below in mind?

A JavaScript build toolchain;

A package manager such as npm. A bundler such Parcel. A compiler such as Babel.

[renato-bohler]

Next.js is a React framework that allows server-side rendered applications. Basically, it's another way to generate a React project, but it has other features included. It's create-react-app on steroids hehe... but I wouldn't recommend using it unless you can take advantage of the features they provide.