What is React ?

Web Development

Learn what react is and how to create your first react app in this web development tutorial.

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript Framework, or kind of.

What is react

Actually React is a JavaScript library that is declarative, efficient, and flexible for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

React.js aka REACTJS

It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.
React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js.

React library

However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

How dos React work ?

How react works
How react works

React functions by using a couple of tools like

React tools
React tools

Declarative programming in React

Declarative programming paradigm is React core philosophy. This means that you will design views for each state of an application, and React updates by rendering each component when data changes.

React Components

React code is made of entities called components. These components are reusable and must be formed in the SRC folder following the Pascal Case as its naming convention (capitalize camelCase). Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass the values between components through “props”

What is JSX?

JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax. The nice thing about JSX is that apart from following three JSX rules, you don’t need to learn any new symbols or syntax outside of HTML and JavaScript.

Note that browsers don’t understand JSX out of the box, so you’ll need a JavaScript compiler, such as a Babel, to transform your JSX code into regular JavaScript.

Run React

HTML vs the DOM

If you look at the DOM elements inside your browser developer tools, you will notice the DOM includes the <h1>element. The DOM of the page is different from the source code – or in other words, the original HTML file you created.
This is because the HTML represents the initial page content, whereas the DOM represents the updated page content which was changed by the JavaScript code you wrote.

Updating the DOM with plain JavaScript is very powerful but verbose. You’ve written all this code to add an <h1>element with some text:

Getting Started with React

To use React in your project, you can load two React scripts from an external website called unpkg.com:

UNPKG : https://unpkg.com/

react is the core React library.

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

react-dom provides DOM-specific methods that enable you to use React with the DOM.

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

Instead of directly manipulating the DOM with vanilla JavaScript, you can use the ReactDOM.render() method from react-dom to tell React to render our<h1> title inside our #app element.

ReactDOM.render(<h1>My React App</h1>, app);

But if you try to run this code in the browser, you will get a syntax error:

This is because<h1>...</h1> is not valid Javascript. This piece of code is JSX.

Add JavaScript compiler, Babel to your project
To add Babel to your project, copy and paste the following script in your index.html file:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Video Tutorial

For a more in depth understanding of the subject, check out the video tutorial.

What is React

Source Code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

    <h1>What is React js</h1>

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

    <script type="text/javascript">
      // Select the div element with 'app' id
      const app = document.getElementById("app");
      // Use DOM Methods
      // Create a new H1 element
      const header = document.createElement("h1");

      // Create a new text node for the H1 element
      const headerContent = document.createTextNode("My First React App 🚀");

      // Append the text to the H1 element

      // Place the H1 element inside the div
    <!-- Babel -->

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/jsx">
      const app = document.getElementById("app")
      ReactDOM.render(<h1>My first React App 🚀</h1>, app)

Become a Web Developer

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.