Exploring React: Using React without JSX or npm
Tags: react, beginners, javascript, webdev
Published: 2023-12-07 14:47:38

Are you a React newbie? Did you kick off your React journey with create-react-app? If you did or plan to, then this message is for you. create-react-app generates a boilerplate for you setting up all the things you need to start developing apps on react, but it will take away your attention from learning how to set up a react app manually. I'm here to give you a brief walk around with it. 

React is a library that can help you create kickass websites that are responsive and look cool. However, before getting into React, you should have a solid understanding of JavaScript. Imagine driving a car without knowing the traffic signs and signals. Not cool, right?

So, if you're not familiar with JS, then you should learn it first. No biggie, I've got your back. I won't bore you with anything too complicated, just a manual setup and a walk-through of React.

I know you're busy, and your time is precious, but trust me, this is worth your time. Let's get started!

## React from a CDN

Let's get started with using React without npm or JSX. You are probably thinking how, 
First of all, create yourself a project directory that we can work on -
I've chosen a fancy name. Pick yours

```
mkdir noBoilerplateYo
cd noBoilerplateYo
```
that was easy. Now I'm creating an `index.html`.
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>No BoilerPlate Yo</title>
</head>
<body>
    <div id="root"></div>    
</body>
</html>
```
Now you are probably wondering why is there a `<div id="#root"></div>`

well, we are interacting with the DOM through this one. In other words, the React elements and Components we create using React, are rendered inside this div.

You will understand. Just go forward.

Okay to work with React, we need React first of all. lol.

Let's include it in our project.
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>No Boilerplate Yo</title>
  </head>
  <body>
    <div id="root"></div>
<!-- Include the React library CDN -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"></script>
  </body>
</html>
```
Okay. I'm not talking about crossorigin here. But I suggest you take a look at it on the web.
So, is that it?
Well, we have included React's core library here. No, But to interact and update the changes to the DOM, we have a special library from react - The `react-dom`.

Why is it? In simple words, React is platform-independent. Which means we can use it on web, mobile and even desktop applications. They all have one core library `react`. But to interact with each platform, react provides separate packages and libraries. We are developing a website here, so we will be using `react-dom`.
let's include that one too.
```html
 <body>
    <div id="root"></div>

    <!-- Include the React library CDN -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"></script>

    <!-- Include the react-dom cdn -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  </body>

```

wooh, and now our project is ready to run react !!
wait, what does that`.development.js` in those CDN links mean?
it means that the files are for development purposes.
React also gives us the production versions of these files. they will be optimized for production. We just have to replace the `.development.js` with `.production.js` to include them instead of the development version.
We don't need it now, since we are developing the app.

That's it. Now let's dive into creating some elements and render them in React.

we need a space to write the JavaScript for that.
we can use a `script` tag for that and write them within the `index.html` file like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Include the React library CDN -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"></script>

    <!-- Include the react-dom cdn -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- work with react -->
    <script>
      const element = React.createElement("h1", {}, "Hello world");
      // Render the component to the DOM
      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
```
Yo, wait there. Don't sneak into what's inside it. I'll explain it to you in a moment.
I don't like writing inline JS, to be honest. So, let's create an `index.js` file for that, shall we? You are free to copy and paste the content I told you not to sneak into, or just look and type it yourself.

anyway, this is what it will look like.
`index.html`
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>No Boilerplate Yo</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Include the React library CDN -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"></script>

    <!-- Include the react-dom cdn -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!--Link our JavaScript here-->
    <script src="./index.js"></script>
  </body>
</html>
```
`index.js`
```javascript
const element = React.createElement("h1", {}, "Hello World");

// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(element);
```
I'll explain what's in the JS now,
we are creating a React element using 
```javascript
const element = React.createElement("h1",{},"Hello World");
```
`React.createElement()` accepts 3 parameters. The `tag` which the element should have, an object containing `attributes` and `props` the element should have and the content to be inserted into the element.

Then we are using the `createRoot()` method provided by ReactDOM to create a root element where the react elements are to be inserted into the DOM. We are getting the element using the `getElementById()` method here. And the `id` is `#root` here. It can be anything you like, but this is usually the standard.
Oh, but the changes won't be applied to the DOM here, for that we have to call the `render()` method and provide the react element to be inserted into the DOM.
just like this:

```javascript
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(element);
```
and if I open the `index.html` in the browser now, we will see :

![how the website looks like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a08q4og106yajv8x0k0k.png)
if I inspect the page, 

![hello world - dom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwoppg533kfxihq56t3o.png)
You see that ??? 
We just rendered our first react element into the browser.

Okay now, What if I want to nest this element inside a parent element? Oh we got solution for that !!
```javascript
const parent = React.createElement('div',{id:'parent'},element);
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(parent);
```
You might be wondering what is the need of `{id:'parent'}` here. Well, it's not required. I just wanted to let you know that this is how we pass `attributes` and `props` to element.
Now, if I inspect the page, 

![Hell world with parent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n3jopbn8d897vxi0dr4.png)
see, this is how we do it. We just pass the element we have as the last argument and render the parent.
But what if I have to render multiple children?
```javascript
const element = React.createElement("h1", {}, "Hello World");
const element2 = React.createElement("p", {}, "Rendered by React");

// pass the children as array
const parent = React.createElement('div',{id:'parent'},[element, element2]);

// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(parent);
```
This is how we do it. We just pass the children in an array 
Or just pass them one by one like this:
```javascript
// pass the children one by one.
const parent = React.createElement('div',{id:'parent'},element,element2);
```
Take a look at the result:

![multiple children](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyk227ffdt50lcxafzfi.png)


![multiple children inspected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2wcyrhx5ucx6ravlmtu.png)
So, is this how we develop react apps? Well, it's not the prefered way! We can make the development a lot easier and better using **JSX**: A syntax extension for JS. It allows us to write HTML-like syntax in JavaScript, which allows to write React elements and Components with ease.
```javascript
// without JSX 
const element = React.createElement("h1", {}, "Hello World");

// with JSX
const element = <h1>Hello World</h1>

// nesting with JSX
const parent = <div id='parent'>{element}</div>
```
See, How easy it is!
Im not diving deep into JSX for now. Note that to make use JSX we will have to use a transpiler like babel. Instead of using the CDN for everything, we will be using Node and npm to develop our application( this is the preferred method to develop react apps ).