Skip to main content

What is React

What is React?

React is a JavaScript library for building interactive user interfaces (UIs). Which can be clicked on-screen by the users.

In terms of library, React provide helpful APIs to build the UI! It is up to the developer on how to use those APIs to build what they want to build to present to the user.

However, using React by itself, requires some configuration that the developer would have to do, web frameworks such as Next.js configures React for you right out of the box, and provide additional structure, features, and optimization for your application.

Rendering User Interface

Having some solid understanding of how browser interprets the user interface is fundamental to understanding how React works.

When a user visits a web page, the server returns a HTML page back to the client (Browser in this case) which may look something like

<html>
    <body>
        <p>Hello world!</p>
    </body>
</html>

The browser then reads the HTML and creates the Document Object Model (DOM).

What is DOM?

The DOM is an object representation of the HTML elements. It acts as the bridge between your code and the user interface and has a tree like structure with parent and child relationships.

image.png

You can manipulate the DOM by using JavaScript APIs, in which then the browser will render the result back to the user.

Using Plain JavaScript vs React

If you use plain JavaScript to say create a page that will insert a header text it will look something like below: 

<html>
    <body>
        <div id="app"></div>
        <script type="text/javascript">
            const app = document.getElementById("app");
            
            const header = document.createElement("h1");
            
            const text = "This is a sample text hello world!";
            const headerContent = document.createTextNode(text);
            
            header.appendChild(headerContent);
            
            app.appendChild(header);
        </script>
    </body>
</html>

However, as you can see this is pretty verbose just to append a header element into the DOM. With React it simplifies a lot of the flow.

Now without having  to install node or do any compiler configuring, you can start using React by just importing the main library scripts from CDNs:

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  • react: This is the core library
  • react-dom: This provides DOM-specific methods that let you use React with DOM

Now we can try to translate the verbose pure JavaScript code that we wrote to using React.

<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script type="text/javascript">
            const app = document.getElementById("app");
            const root = ReactDOM.createRoot(app);
            root.render(<h1>Hello world!</h1>);
        </script>
    </body>
</html>

Does It Work?

Now if you open the file in the browser, there will be nothing rendered and if you inspect the console output it will look something like:

 

Uncaught SyntaxError: expected expression, got '<'

 

 

 

 

 

 

 

 

Back to top