Difference between revisions of "ReactJs"

From Grundy
Jump to navigation Jump to search
Line 62: Line 62:
 
*Babel - a JavaScript compiler that lets us use ES6+ in old browsers
 
*Babel - a JavaScript compiler that lets us use ES6+ in old browsers
  
We have used the React DOM render() method to render the App class we created into the root div in our HTML. The App class is a react component which when called , the render() method is executed which returns the HTML <code> <nowiki> <h1>Hello world!</h1> </nowiki></code>. Thus when run in the browser, we will see the <h1> tag content rendered in the <div> with id="root".
+
We have used the React DOM render() method to render the App class we created into the root div in our HTML. The App class is a react component which when called , the render() method is executed which returns the HTML <code> <nowiki> <h1>Hello world!</h1> </nowiki></code>. Thus when run in the browser, we will see the <nowiki><h1></nowiki> tag content rendered in the <nowiki><div></nowiki> with id="root".
  
 
==Conclusion==
 
==Conclusion==

Revision as of 20:34, 16 May 2020

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

JavaScript is a scripting or programming language that allows you to implement complex features on web pages. JavaScript libraries are collections of pre-written JavaScript code that can be used for common JS tasks, allowing you to bypass the time-intensive (and unnecessary) process of coding by hand. There are a lot of different JS libraries out there and React JS is one of them. React is a JavaScript library that specializes in helping developers build user interfaces or UIs.

Why React?

React is a JavaScript library that specializes in helping developers build user interfaces, or UIs. In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app. Before React JS, developers were stuck building UIs by hand with “vanilla JavaScript” (developer speak for the raw JavaScript language on its own) or with less UI-focused React predecessors like jQuery. That meant longer development times and plenty of opportunities for errors and bugs. So, in 2011, Facebook engineer Jordan Walke created React JS specifically to improve UI development.

  • Virtual DOM : At the heart of any basic website are HTML documents. Web browsers read these documents and display them on your computer, tablet, or phone as web pages. During this process, browsers create something called a Document Object Model (DOM), a representational tree of how the web page is arranged. Developers can then add dynamic content to their projects by modifying the DOM with languages like JavaScript. If you’re not using React Js, your website will use HTML to update its DOM (the process that makes things “change” on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh.
    However, React JS creates something called a Virtual DOM. The Virtual DOM as the name implies is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens. Only those parts are updated and the changes are reflected. This kind of selective updating takes less computing power and less loading time, which might not sound like much but when you start to think about all the dynamics and updating associated with even a slightly complex website—you’ll realize it adds up to a lot.
  • JSX : React can be used with JSX. JSX is an XML/HTML-like syntax used by React so that HTML-like text can co-exist with JavaScript/React code. Basically, by using JSX Instead of separating technologies by putting markup(HTML) and logic(JS) in separate files, you can write concise HTML structures in the same file as you write JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

Learning React

Prerequisites

  • Basic familiarity with HTML & CSS - Html elements are the building blocks of web pages. CSS controls the style and layout of the web pages
  • Knowledge of JavaScript Basics - JavaScript is a scripting or programming language that allows you to implement complex features on web pages
  • Familiarity with ES6 syntax and features- ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript. It is a major enhancement to the JavaScript language and adds many more features intended to make large-scale software development easier.

Setup and Installation

There are a few ways to set up React. Here we will discuss two major ways in which you can setup React and start using it. Remember that React is a JS library.

  • Static HTML File

This is not a very common way of using React but we will use it to get familiar and understand the use of ReactJs.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

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

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
  </body>
</html>

In this code, you can observe we have imported three scripts. These scripts are for importing the libraries required for implementing React - React, React DOM and Babel. The code has been written in the index.html file. We write the React code inside the script "text/babel" where babel is a Javascript Compiler.

  • React - the React top level API
  • React DOM - adds DOM-specific methods
  • Babel - a JavaScript compiler that lets us use ES6+ in old browsers

We have used the React DOM render() method to render the App class we created into the root div in our HTML. The App class is a react component which when called , the render() method is executed which returns the HTML <h1>Hello world!</h1> . Thus when run in the browser, we will see the <h1> tag content rendered in the <div> with id="root".

Conclusion

I hope you had a good time learning about Django and we hope we have convinced you that if you are thinking about web development learning Django is a good step forward. Even if you want to just start with developing anything but you aren't really sure which direction to do, learning Django would still be a good step forward. The strong focus on good developing principles, great documentation and community are all necessary if you want to be a good developer. We also hope that we have pointed you in the right direction to learn Django and all the tutorials linked over here were helpful to you. You are most welcome to correct any kind of errors you find in this article. Cheers!

See also