In this article we will perform a basic demo with React JS, and we will try to explain each step in detail, in order to understand most of the concepts that revolve around the development of an Application with React JS.

For this basic demo we will use 3 main concepts, which are:

  • React JS
  • Babel JS
  • Webpack

WHAT IS REACT JS?

According to their authors React JS was built with a main objective: That the construction and maintenance of large applications with data that change over time, be as simple as possible .

React JS is a Javascript library whose main focus is on user interface (view) management. React JS will automatically manage UI updates when it detects changes to the internal data that each component of the view will have. When the data changes, React JS updates only those parts that have changed , is almost magical and very good for application performance, does not need to map, or make changes throughout the DOM unnecessarily.

Please do not confuse React JS with a framework.

WHAT IS A COMPONENT IN REACT JS?

When designing interfaces, it is customary to break down common design elements (sections, buttons, form fields, etc.) into reusable components with well-defined interfaces. React JS uses this theoretical concept for its components, so a component can be any element of our user interface.

React JS is entirely designed for the construction of reusable components. In fact, with React JS virtually all you do is build and manage components.

Because the components in React JS are so encapsulated, they make code reuse, testing, and separation of responsibilities an easier task.

The main requirement is that a React JS component must override the render () method, since when the component is initialized the render method is automatically called, and it generates a logical representation of the view. From that logical representation React JS can form a markup, and inject it into the DOM.

When the data changes, the render method is called again, React JS compares the previously returned value with the new one, that comparison gets a minimal set of changes to be applied to the DOM, obviously this update is much more efficient.

The components are the heart of React JS, in these demos we will spend creating, administering and knowing in depth the components in React JS.

WHAT IS JSX?

JSX is an extension of the JavaScript syntax, it has a similar appearance to XML, which is similar to our well-known HTML syntax, so it will quickly make us very familiar.

XML has the benefit of opening and closing tags. This makes large tree structures easier to read than literal JavaScript functions or objects.

It is not strictly necessary to use JSX with React. You can also use pure Javascript to perform this task. However, it is recommended to use JSX because it is a concise and familiar syntax for the definition of tree structures and their attributes.

At the moment for this basic demo that’s all we need to know about React JS, in the next articles we will go deeper into the concepts of React JS.

WHAT IS BABEL JS?

Babel is a multipurpose compiler for Javascript. Using Babel we can code in the new version of the ECMAScript standard today, yes, today!.

Javascript is a language in constant evolution, with new proposals, specifications and new functionalities all the time. Babel will allow us to use many of these features before they are available everywhere.

What Babel does is to take the Javascript code written with the latest standards and compile it to its version in ES5. This process is called source-to-source compilation, commonly known as transpiling.

Babel has pre-installed plugins and plug-ins for ES2015 and React JS.

WHAT IS ECMASCRIPT 2015 (ES2015)?

ECMAScript 2015 is the new version of the ECMAScript standard, and as we know Javascript is based on this standard. This standard was ratified in June 2015. ES2015 is an important update of this standard, and is the first major update since ES5, which was standardized in 2009, ie more than 7 years ago.

The features of ES2015 are being implemented in Node.JS and little by little in most current browsers, because of this we will use ES2015 to code all demos with React JS.

WHAT IS WEBPACK?

Webpack is a packager of modules, takes modules that usually have dependencies and generates static files corresponding to those modules.

Webpack collects and processes a variety of web resources and packs them into a package that can be served on the client side. Although this sounds simple, it is actually a difficult problem that becomes more complex when a web application grows.

Because React JS uses components as if they were building blocks for ever bigger applications and Webpack works very well with that concept, we will use it in our demos, in addition Webpack gives superpowers to the require and import s of Node.JS, This makes it so much cooler.

In addition to Webpack we could also use Browserifyjspm or other tools to do the work with React JS, but for these workshops I chose Webpack since I really enjoyed working with your dev-server, let’s see what it deals with in the following concept.

WHAT IS WEBPACK-DEV-SERVER?

Webpack-dev-server is a small express server, which uses webpack-dev-middleware to serve a package built with Webpack. The server issues information about the build status to the client via Socket.IO, and the client reacts to those events.

There are several ways to work with webpack-dev-server, but for our case we will use these events to reload only the components that have been updated, that way we can speed up our development.

WHAT IS A WEBPACK LOADER?

Loaders are transformations that are applied to a source file. They are functions (which run in Node.JS) that take the source code of a file as a parameter and return that source code by applying some transformation.

For our demo we will use babel-loader, which is a Webpack plugin for transpiling Javascript files. And we will do it through the presets of Babel, also known as preset lists of plugins . For our case we will use the list of plugins for es2015and react.

Knowing these basic concepts we can begin to make our demo, so let’s get down to work!.

PRE REQUIREMENTS

Before starting we need to have installed Node.JS in its version 8.2.1.

If you want you can install lower or  a bigger version just for these demos, do not worry for that there is a big and small package Node.JS called in, which solves this situation in a great way.

In addition we need our text editor to recognize the syntax .jsxand ES2015, so depending on your editor you will have to install those packages or plugins.

Solved this now we proceed to create the project from scratch and install the dependencies and development dependencies we will need.

STARTING THE PROJECT

We created our folder for the first React JS web workshop and entered it.


mkdir react-1 && cd react-1

Then we will start our project by interactively creating our file package.json, with the following instruction:


npm init --force

By instructing npm init --forceor npm init -favoiding all the uncomfortable questions of npm init.

INSTALLATION OF DEPENDENCIES

First we install the main dependencies of our project, which are: reactand react-dom:

npm i -S react react-dom

By means of the instruction npm i -Swe can install the dependencies of our project, this will make that in our file package.json the key is added dependenciesand there the main dependencies of our project are stored.

INSTALLING DEVELOPMENT DEPENDENCIES

Then we install the development dependencies that we will use for Webpack

npm i -SD webpack webpack-dev-server

Then we install the development dependencies that we will use for Babel JS

npm i -SD babel-loader babel-preset-es2015 babel-preset-react

By means of the instruction npm i -SDwe can install the development dependencies of our project, this will make that in our file package.json the key is added devDependenciesand there the development dependencies of our project are stored.

With this we have installed all the dependencies of our project, now we begin to develop our first workshop!.

REACT WORKSHOP JS 1

For our first workshop we will simply create a component called Header, which will contain a label <h1>with a dynamic title, through the dynamic title we will see how propsthe components in React JS work.

Initially to perform this demo we will write the following files:

  • public/index.html
  • App / React1.jsx
  • App / components / Header.jsx

PUBLIC / INDEX.HTML

In the index.html file we will write a new document very simple html, in which we will add a div with the id:, divReact1inside this div is where React JS will render our Application. In addition we will add the call to scriptworkshopReact1.js, in this file will be all the code necessary for the execution of our Application.

Our index.html file should look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React1</title>
  </head>
  <body>
      <div id="divReact1"></div>
    <script type="text/javascript" src="React1.js"></script>
  </body>
</html>

APP / COMPONENTS / HEADER.JSX

Then we will create the app / components / Header.jsx file in which we will declare the class Header, which as we can see inherits all that the class offers React.Component, using the keyword extends.

Then we will overwrite the method render(), inserting the content of our component. For this component example we will return a divcontaining a tag <h1>, inside of which we will write {this.props.title}to show the value of the property titleof our component. Finally we export our component Headerthrough export default class Header. `

 In this way our new Header component

Header` can be used / called independently by any other component or application.

Our Header.jsx file should look like this:

import React from 'react';

export default class Header extends React.Component {
    render() {
      return (
        <div>
          <h1>{this.props.title}</h1>
        </div>
      );
    }
}

APP / REACT1.JSX

We create the file: app / React1.jsx , where we import reactreact-domand our component previously created Header.

We declare the constant header, which will contain an instance of our component Headerand also assigning its title property the value: ‘Web Workshop React JS’.

Then we define the constant Container node will be the html node that will contain our component, which in this case is a div with id: divReact1.

Then we define the function Rendering, in which we will simply render the instance of our component Header, within the one Node Containerof our Application, using the render()ReactDOM method.

Finally we execute the function Rendering.

Our React1.jsx file should look like this:

import React from 'react';
import ReactDOM from 'react-dom';

import Header from './components/Header';

const header = <Header title="Web React JS" />;
const Node Container = document.getElementById('divReact1');

const Rendering = () => {
  ReactDOM.render(header, Node Container);
}

Rendering();

Note: Within the component the value of the property title can be captured by the following statement: {this.prop.title}.

The file: app / React1.jsx , will be the starting point of our example application, but as we know the browser will not recognize the .jsx extension, nor the ES2015 version of Javascript, so we need to convert it into a .js file based In ES5, for that we will use webpack and babel.

WEBPACK.CONFIG.JS


var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.join(ROOT_PATH, '/public/static/js/');

module.exports = {
  entry: {
    React1: ['webpack/hot/dev-server', './app/React1']
  },
  output: {
    path: BUILD_PATH,
    filename: '[name].js',
    chunkFilename: '[id].js'
  },
  resolve: {
    extensions: ['', '.jsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

PACKAGE.JSON


{
  "name": "react-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server --inline --hot --content-base ./public/",
    "build": "webpack -w -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  },
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

The main idea is to form an online community of React JS, and that you participate commenting improvements, doubts or parts that are not clear to be able to strengthen the article and the basic demos, this way we can form a strong article among all, That helps us all to understand React JS in the best way, this means that this article will be changing and improving based on their contributions.

Author

Am horla

Pin It