Difference between revisions of "ReactJs"

From Grundy
Jump to navigation Jump to search
Line 115: Line 115:
 
* Once you are familiar with the fundamentals, you may want to move on to advanced topics like [https://blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2 Fetching Apis in React]
 
* Once you are familiar with the fundamentals, you may want to move on to advanced topics like [https://blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2 Fetching Apis in React]
  
=== Beginner Projects ===
+
=== Example Projects ===
  
 
Now you should move on to try out a few projects involving making your own sites or components.   
 
Now you should move on to try out a few projects involving making your own sites or components.   
Line 121: Line 121:
 
* [https://www.golangprograms.com/google-map-in-react-js.html Google Map React] component.
 
* [https://www.golangprograms.com/google-map-in-react-js.html Google Map React] component.
 
* [https://www.golangprograms.com/search-autocomplete-in-react-js.html Autocomplete Search] component
 
* [https://www.golangprograms.com/search-autocomplete-in-react-js.html Autocomplete Search] component
* [https://www.codementor.io/@blizzerand/building-forms-using-react-everything-you-need-to-know-iz3eyoq4y Forms in React] - This is a detailed tutorial explaining how to make forms in React. Forms are integral to any modern application. They serve as a basic medium for users to interact with your app.
+
* [https://www.codementor.io/@blizzerand/building-forms-using-react-everything-you-need-to-know-iz3eyoq4y Forms in React] - This is a detailed tutorial explaining how to make forms in React. Forms are integral to any modern application. They serve as a basic medium for users to interact with your app. This is not just for beginners but for everyone to understand best practices to follow while using forms in React.
  
 
== See also ==
 
== See also ==

Revision as of 21:54, 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.

Getting started with 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> element.

  • Create React App

The method used above of loading JavaScript libraries into a static HTML page and rendering the React and Babel on the fly is not very efficient, and is hard to maintain. Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app.

First you will have to install Node on your system. You can refer this for instructions for installation.

Once Node is installed , run the following code in the terminal to create a React App

npx create-react-app react-tutorial
cd react-tutorial
npm start

Once you run this command, a new window will popup at localhost:3000 with your new React app. If you look into the project structure, you'll see a /public and /src directory.

In /public, the important file is index.html, which is very similar to the static index.html file shown in the previous section - just a root div. This time, no libraries or scripts are being loaded in. The /src directory will contain all our React code.

Go ahead and delete all the files out of the /src directory, and we'll create our own boilerplate file. Just keep index.js.

src/index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

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

If you go back to localhost:3000, you'll see "Hello, React!" just like before. We have the beginnings of a React app now.

As compared to the previous section, here we have imported the react and react dom in the src/index.js file. The root element is in the public/index.html file. The advantage of React is that the HTML code can now be included in the JS file itself through elements. Elements are the smallest building blocks of React apps.

Learning React

So far you must have got a good idea about React and some familiarity with it's usage. The next step is to try out a few tutorials and go through the main concepts of React to get familiar with them and to be able to implement them.

  • This tutorial is a great starting point. It compiles all the important and relevant concepts for beginners in an easy to follow order.
  • Next you can try the official tutorial on the React website. This again starts from scratch and will show how to build an interactive tic-tac-toe game with React meanwhile explaining and utilising all relevant concepts.
  • If you are more comfortable with video tutorials here is one which explains the entire process starting from basics and in great detail.
  • Once you go through a basic tutorial, at least one of the above three, you should move on to read the Main Concepts section on the official website starting with this.
  • This is also a summarised or compiled version of all fundamentals of React. Refer this for like a revision of the fundamentals.
  • Once you are familiar with the fundamentals, you may want to move on to advanced topics like Fetching Apis in React

Example Projects

Now you should move on to try out a few projects involving making your own sites or components.

  • Google Map React component.
  • Autocomplete Search component
  • Forms in React - This is a detailed tutorial explaining how to make forms in React. Forms are integral to any modern application. They serve as a basic medium for users to interact with your app. This is not just for beginners but for everyone to understand best practices to follow while using forms in React.

See also