Elvis Ansima

Posted on May 11, 2023 • Edited on May 12, 2023

React vs Vue.js: A Beginner's Guide to Creating Components in the Browser without a Toolchain

#webdev #react #vue

Disclaimer : This article was created with the help of AI

In web development, a toolchain is a fancy term for a set of tools and software used to build web applications. These tools help developers write better code and make it easier to test and deploy their applications.

For example, when working on a React or Vue.js project, developers typically use a toolchain that includes a code editor, a version control system, a module bundler, a transpiler, and a testing framework. These tools work together to make the development process smoother and more efficient.

However, sometimes you may want to experiment with React or Vue.js without using a toolchain. This can be useful for quickly trying out a new idea or learning the basics of the framework without getting bogged down in setup and configuration. To do this, you can create a simple HTML file that includes the React or Vue.js library and write your code directly in the file without using any additional tools.

How to set up a basic React or Vue.js application in the browser with no toolchain

For both we need a HTML file that serve as the basis for the entire application

<html>
    <head>
      <!-- Load libraries here -->
    </head>
    <body>
        <div id="root"></div>
        <!-- Necessary business logic here -->
    </body>
</html>

As you noticed, we have nothing special in our file, yet a basic html file.

Setting up React in our app

In a React project, you'll use different libraries and tools to create your app. Here are three important ones:

React Libraries: These are the main libraries that you'll use to build your React components. They help you manage the way your app looks and behaves, and handle things like data and user interactions.
React DOM: This is a library that connects React with the browser. It helps you display your components on the screen and updates them when things change.
Babel: This is a tool that helps you write modern JavaScript code and makes it work in older browsers. It's important because it allows you to use new and powerful features in your React code, even if they aren't supported by all browsers yet.

We are going to load all these libraries from their respective cdn link inside our index.html file

<html>
    <head>
        <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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <!-- Necessary business logic here -->
    </body>
</html>

For now we are ready to start using React in our application.
To print 'hello world' in the browser and start manipulating the DOM we need to pull up the ReactDOM lib as follow:

   ReactDOM.render(<h1>hello World</h1>,document.getElementById('root'))

In the code above, the first argument passed to ReactDOM.render() is not a string, but an object created using JSX syntax. It represents an <h1> HTML tag with the text "hello world" inside it.

React then takes this object and translates it into the equivalent JavaScript code that can be understood by the browser. This process is called transpiling and it's done by Babel behind the scenes.

So well, let put thing together

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React Demo</title>
  <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="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    //Don't forget to specify type as we are using special syntax here
    ReactDOM.render(<h1>hello World</h1>, document.getElementById('root'))
  </script>
</body>

</html>

Notice the h1 we are passing to the render function introduce what we call component in react. Please see this demo for a more explanatory example

Setting up Vue in our app

For a basic setup for our Vue project we only need load the Vuejs core library.

<html>
    <head>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="root"></div>
        <!-- Necessary business logic here -->
    </body>
</html>

There we go, we our app can now start being powered by Vuejs.
As we need to print hello world in the browser the index.html file is going to look like :

<html>
    <head>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="root">
          <hello-world/>
        </div>
        <script>
          const app = Vue.createApp({})
          app.component("hello-world",{
            template : `<h1>Hello World</h1>`
          })
          app.mount('#root')
        </script>
    </body>
</html>

The script tag at the bottom creates a Vue.js application using the createApp function and assigns it to a constant variable "app". We then use the component function of the app to register a new component called "hello-world".

The "hello-world" component is a simple component that just displays "Hello World" text. It is defined using the template property that contains a string of HTML.

Finally, we use the mount method of the app to mount our Vue.js application to the "root" div element.

You can view this example live here

Wrapping Up

In conclusion, setting up a basic React or Vue.js application in the browser without any toolchain is a simple process that can be done quickly and easily. Both React and Vue.js have their own strengths and weaknesses, and choosing which one to use ultimately depends on the specific needs of your project.

React is a popular choice for its large community and extensive documentation, while Vue.js is known for its simplicity and ease of use. Both frameworks have their own unique syntax and structure, but they both provide powerful tools for building interactive and dynamic user interfaces.

Overall, whether you're just getting started with web development or you're an experienced developer looking to try out a new framework, React and Vue.js are great options to consider. With a bit of practice, you'll be able to create amazing web applications that are both efficient and user-friendly.

You can also find more information at the official documentation pages. here are the links to the official documentation for React and Vue.js:
React documentation: https://react.dev/
Vue.js documentation: https://vuejs.org/guide/introduction.html

Top comments (4)

John Santos • May 11 '23 • Edited

Great article Elvis! I appreciate the step-by-step instructions and clear explanations of each step. One thing I would suggest (maybe in the next article), is adding information on how to handle data management within the app(react vs vue with : Redux or React Context API, vuex...)

Great article so far. Like it!

Elvis Ansima • May 11 '23

Thanks John!
Love your advice brother and will definitely write an article about that 👌

Sloan the DEV Moderator • May 12 '23

Hey, this article seems like it may have been generated with the assistance of ChatGPT.

We allow our community members to use AI assistance when writing articles as long as they abide by our guidelines. Could you review the guidelines and edit your post to add a disclaimer?