ReactJS Tutorial for Beginners - 1 - Introduction

Author:
In this introductory chapter, we will discuss what is React, how does React works, and react features.

What is React?

React is an open-source JavaScript library for building user interfaces.
There are two key points in this definition the first one is that react is a JavaScript library and it is not a framework. The second part building user interfaces so react does not focus on the other aspects of your application like routing or HTTP requests, it is responsible only for building rich user interfaces.

React has a rich ecosystem and plays really well with other libraries and is more than capable of building full-fledged web applications.

Let me keep it simple. Here is a summary of what is React:

  • React is a JavaScript library - one of the most popular ones, with over 100,000 stars on GitHub.
  • React is not a framework (unlike Angular, which is more opinionated).
  • React is an open-source project created by Facebook.
  • React is used to build user interfaces (UI) on the front end.
  • React is the view layer of an MVC application (Model View Controller)
One of the most important aspects of React is the fact that you can create components, which are like custom, reusable HTML elements, to quickly and efficiently build user interfaces.

How does React work?

React creates a VIRTUAL DOM in memory - Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.
React only changes what needs to be changed - React finds out what changes have been made, and changes only what needs to be changed.

React Features

JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
Components − React is all about components. You need to think of everything as a component. This will help you maintain the code when working on larger scale projects.
Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps to keep your data unidirectional.
License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0.

Prerequisites

There are a few things you should know in advance before you start playing around with React.

Here are what I consider to be React prerequisites.
All right, let's create a simple React hello-world application to understand React in an action.

React Directly in HTML

The quickest way to start learning React is to write React directly in your HTML files.

Let's create the React app manually step by step.

Step 1 - index.html

Let's create index.html file and add the following content to it:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.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">
      // React code will go here
    </script>
  </body>
</html>
Note that we have added three CDNs in the head - React, React DOM, and Babel. We have added a div with an id called root, and finally, we created a script tag where your custom code will live.
Note that we have used below libraries:
  • React - the React top-level API
  • React DOM - adds DOM-specific methods
  • Babel - a JavaScript compiler that lets us use ES6+ in old browsers
The entry point for our app will be the <div id="root"></div> element, which is named by convention. You'll also notice the text/babel script type, which is mandatory for using Babel.

Step 2 - Create an App Component

Let's use ES6 classes to create a React component called App.
class App extends React.Component {
  //...
}
Now we'll add the render() method, the only required method in a class component, which is used to render DOM nodes.
class App extends React.Component {
  render() {
      return (
          //...
      );
  }
}
Note that inside the return, we're going to put what looks like a simple HTML element:
class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

Step 3 - React DOM render() method

Finally, we're going to use the React DOM render() method to render the App class we created into the root div in our HTML.
ReactDOM.render(<App />, document.getElementById('root'))

Complete code for index.html

Here is the full code for our 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>

Demo

Now if you view your index.html in the browser, you'll see the h1 tag we created rendered to the DOM.

We've done this React application for demonstration purposes, but from here out we're going to use another method: Create React App.

What's Next?


In this chapter, we have learned what is React, how does React works, and react features etc.  In the next chapter, we will create a simple React hello world application using create-react-app CLI.

Comments

Post a Comment