Code in Pure React 🚀

Feb 09, 2021

4 min read

When I first started learning React, It wasn't easy for me because I felt like I need to completely know things like Webpack, Babel, Parcel, JSX, npm, and more. And as a person coming out of using good old school plain HTML, CSS, and javascript this thought will always come to your mind that why the heck do I have to use all of these? Why do I want to put my HTML in my javascript? Is this the React way? Why is React making it more complicated? What exactly React is? Is React a combination of all these? This kind of questions came to my mind and I was more worried about all these terms rather than React itself.

Pure React? 🌟

Pure React is just React. There is no Webpack, no babel, no Parcel, no JSX, nothing but javascript. This actually helped me understand what React does and those scary names were just tools that kind of help you build your React project. Let's jump in by writing some pure React.

Writing pure React 😆

I'll start by creating a new file index.html inside of a folder named src in our project directory and write the Standard HTML boilerplate

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code in Pure React 🚀</title>
  </head>
  <body></body>
</html>

Inside of the body tag, create a div with an id of 'root', this is where React will inject all of our code.

index.html

<div id="root"></div>

Now below that, we will add three script tags

one is for React library
second is for React DOM
And the last is for the javascript code that we'll write.

index.html

<script
  crossorigin
  src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="./app.js"></script>

Now inside of app.js, we will begin by writing what's called a component. See, in React you can break down your code into simple components, imagine them like functions that you can use wherever you want. App is a function component that is returning 'something'. Let's see what this 'something' is.

app.js

const App = () => {
  return React.createElement(
    'h1', 
    {}, 
    'Hello World 👋'
  );
};

React.createElement accepts 3 arguments

First is the name of the HTML element as a string that you want to create, here we're creating an h1 tag
Second will contain the properties that get passed to the components. Like if we want the h1 to have an id of title, we have to pass id : "title" inside the object like - { id : "title" }
Third argument contains the content that will go inside of h1

Now that we've created our h1, but you'll not see anything on the page itself because we've only created it, we've to render it on the page to see it. So below our App component, we will write:

app.js

ReactDOM.render(
  React.createElement(App), 
  document.getElementById('root')
);

ReactDOM.render will take the rendered component and put it in the DOM node. It takes two arguments

First is the rendered App component
Second is the place in DOM to render it

Now if you open the index.html file in a browser, it will display:

Congrats, you've written your first React Code 🤩. Now you can do all kinds of great stuff by nesting or adding different elements using React.createElement because this is essentially what React does. For example:

app.js

const App = () => {
  return React.createElement(
    'div',
    { class: 'wrapper' },
    React.createElement(
      'h2', 
      { class: 'heading' }, 
      "I'm a heading"
    ),
    React.createElement(
      'p',
      { class: 'paragraph' },
      "I'm just a useless line depicting paragraph"
    )
  );
};

ReactDOM.render(
  React.createElement(App), 
  document.getElementById('root')
);

It will display:

Conclusion

While this is a great way to understand how React works under the hood, you should not write React this way for many reasons like you've to think about where to put the elements, and repeat React.createElement. But I think this is more of a beginner approach when one starts learning React.

Resource

Complete Intro to React v5

⚡ Originally published at ayushcodes.hashnode.dev

If you found this article helpful, I would be grateful for your support.
"Buy me some paneer curry"

Previous Post Next Post