frankvp11 commented 1 year ago

Hello! Recently I decided that I wanted to start a new project, and quickly realized that one of the problems that I would need to solve it visualizing a N-ary tree. I was then referred to this project by someone, so I decided to take a look at it. This was/is exactly what I needed. The problem for me is though, I am a complete noob to React and most things related to Javascript (besides basic programming paradigms). I was wondering if someone could guide me through setting this project up so that I'd be able to create my application ontop. (Btw the application that I am trying to make is a JSON visualizer). I know that this isn't really an appropriate spot to ask for help, but I wouldn't know where else to ask. So, if you're up to the challenge, I'd really appreciate it if someone could guide me from the start to finish of running even just a demo, or send me to a place where they do this for me (medium.com article, youtube, etc). Edit: To add, saying "just copy/paste this code into a workspace (like this: https://github.com/bkrem/react-d3-tree#usage) isn't going to be very helpful...

StephanPraetsch commented 1 year ago

As I were just doing that and learning react and learning this d3 tree, try

install nvm

see https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/

nvm use 19

install yarn

see https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable

npm install --global yarn

create hello world react app

see https://create-react-app.dev/docs/getting-started/

yarn create react-app my-app --template typescript
cd my-app

add react-d3-tree dependency

yarn add react-d3-tree

example data

copy content of https://github.com/bkrem/react-d3-tree#usage to src/OrgChartTree.tsx

adjust src/App.tsx

add import

import OrgChartTree from "./OrgChartTree";

add example data next line after </header>

      <main className="App-main">
        <OrgChartTree />
      </main>

start app

yarn start

browser opens http://localhost:3000

(scroll to bottom)