I am currenty reading code of Excalidraw and trying to understand how app works. I started from first commit and see that code
const rootElement = document.getElementById("root");
function drawScene() {
ReactDOM.render(<App />, rootElement);
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
}
drawScene();
Everything works fine ,but when I do my version
const root = ReactDOM.createRoot(document.getElementById("root"));
const drawScene = () => {
root.render(<App />);
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
};
drawScene();
Canvas is NULL, but it renders. I understand that I use different version of React,but can you tell me and give me the link why in the first case canvas is normal value , in mine is Null.
the project was initially created 3 years ago and that version of react was used, now I use the last version of it. I understand that to write code the way is quite messy, but I follow commits and want to go step by step.