Introdution

React is one of the most useful frameworks for Javascript since it helps us make reusable parts for the UI (user interface). You can use it to quickly create the next section of your website when a button is clicked or lower the amount of html you need to make your next webpage. In this first part of the series on learning how to use React we'll understand how to import and render react. We'll also be going over the two versions of rendering react, since both are regularly used right now.

Importing React and ReactDom

To import React onto your Javascript file you use the keyword import REACT from 'react'. Next we import the react-dom, wich we use to render content into websites, by typing import ReactDom from 'react-dom.

import React from 'react';
import ReactDOM from 'react-dom';

Rendering Content (Two Versions)

There are two versions of rendering with ReactDom, the first version is old version of React known as ReactDom.render() while the second one uses the latest version React 18 knowwn as ReactDom.createRoot(). You can still use the old version, but you won't get the latest features of React since it'll be acting like it's still on React 17. So if you have an error saying you're not supposed to se ReactDom.render even though its running just fine, it's just suggesting that you use React.createRoot. I also suggest using the latest version since you'll miss the better features of the next React updates to come.

ReactDom.render

Now lets render our first react content onto our HTML by using the function ReactDom.render. Our first argument is the html we'll want to put in our html file, we'll start with an h1 element. Next we break to the next argument with a comma and writ where we want to render our h1 element. You can use a query selector or .getElementById to choose. If you look at the example below, we chose to render our h1 element in a div that has an id called "app". Notice how it says in the console i'm not supposed to use ReactDom.render, but as i said earlier, it's just suggesting you it, so it won't really effect you're rendering.

HTML

<html>
<body>
<div id="app"></div>
</body>
<html>

JS(React)

//Importing React 
import React from 'react';
import ReactDOM from 'react-dom';

// Rendering a header to the HTML!
ReactDOM.render(
  <h1>Learning React is fun!</h1>,
  document.getElementById('app')
);

ReactDom.createRoot

First we make a variable where inside it is ReactDom.createRoot, it's used to make or find a root where we'll render our content for later. Inside the createRoot function we'll use document.getElementByID to select the element with the id "app". Now we give the variable the render function where in it we put the components we want to render. In comparison to the older version of rendering we just seperated the second argument into a varaible. As you can see in this embed, even though it uses the latest version it still works the same way.

HTMl

<html>
<body>
<div id="app"></div>
</body>
<html>

JS(React)

//Importing React
import React from 'react';
import ReactDOM from 'react-dom';

// Rendering a header to the HTML!

var root = ReactDOM.createRoot(document.getElementById('app'));

root.render(<h1>Learning React is fun!</h1>);

Importing CSS

You can also import css stylesheets by simply typing import./name.css` simple as that (the name part should be filled as your stylesheets name). As you can see now the we imported our css our HTML looks way better!

Conclusion

There's also a way to import React functions and components from another file onto a different file, but we'll lean that when we actually know more about react functions and components, so we'll stick with single files. On part 2 of our series we'll learn about JSX, function components, and props, so stay tuned for my next few blogs! I hope you have a great day/night!