getting star te d wi th r eactjs - attuneww.com€¦ · . contents preface about this guide...

Getting Started with ReactJS By Juned Laliwala

About this ReactJS e-Book.

● Basic Understanding of ReactJS

● Concept of JSX

● Use of Refs and Keys

● Practical Demonstrations

● Animation in ReactJS

@2016 Attune World Wide All right reserved

www.attuneww.com

Contents Preface

About this Guide

Intended Audience

Revision History

Introduction

Features

Advantages

Installation of ReactJS

Installing Global Packages

Adding ReactJS Dependencies and plugins

Installing React

Creation of a File

Changes in Package.Json File

Understanding JSX

Stateless

Statefull

Examples using Props

Another Way of Using Props

Concept of SetState() method

Concept of Updating a Value

Using Refs and Keys

Routing Concept in ReactJS

Import Necessary Dependencies

Use of Render

Concept of Flux

Elements of the Flux

Using Flux

ReactJS Last Updated: September 2016 | of 39

Creating Files

Creating Actions

Creating Reducers

Creating Store

App Component

Creating Other Components

Concept of Animation

Installing Dependencies

Applying Animation

Summary


Preface

About this Guide

In this guide you will come across many aspects of the advanced Java Scripts. This java script is basically a simple and traditional approach with which a very fruitful mobile or web applications can be built. In this guide, we will see some basic demonstration of the React, their Advantages and the overall descriptions about this JavaScript. This JavaScript is nothing but the combination of HTML, JS and CSS. With the help of this javascript we will come across the animation part of the data or the message that we are passing to our application.

Intended Audience

This guide is particularly intended for the developers or the users who have just started learning the technologies of the JavaScript. This guide will be very helpful for the learners who are having the basic idea of normal javascripts and also having practical knowledge of the HTML language.

Revision History

This is the first version of the ReactJs. So this guide will cover all the basic infrastructure of the ReactJs.


Introduction

One of the well-known organization from all over the globe, Facebook has developed JavaScript named “REACTJS”. ReactJS is particularly useful for both the Web Applications and the Mobile Applications. With the help of using UI Components repeatedly is the core part of this JavaScript. This JavaScript basically provides the Animation Part for the application. The performance of the Application is also better maintained with this script.

Features

● JSX is one of the most important feature of ReactJS. It is nothing but we can say HTML file in the form of Javascript.

● We can create more component as desired by the developers who are building application.

● The Data Flow of the Application is Uni-Directional, which means the data will flow in one and only one direction.

Advantages

● With the help of DOM, ReactJS becomes more powerful with reference to the other JavaScripts. With the help of the DOM, the performance of the application will gradually increase.

● Client-Server Side Applicable

● Larger Applications which are having larger data will eventually be systematically handled by this JavaScript in order to handle the Application in a perfect sense.

● React can be easily integrate with other frameworks.


Installation of ReactJS

The installation of the ReactJs is usually performed using npm package installer. An alternate option for installing is to download the zip file from the official website of the ReactJS. Currently in this guide we will use npm to install the ReactJS. First, we are going to make a project folder. Inside that folder we will work with our application.

Installing Global Packages

Usually, there are many packages that needs to be mandatorily installed before invoking our ReactJS Application. So the main package that needs to be installed is Babel and their corresponding dependencies.

Fig: Installing Babel Dependency

Fig: Installing Babel-cli

Same way we will install the Babel-Core

Fig: Installing Babel-Core

Similarly install:

npm install babel-loader


npm install babel-preset-react

npm install babel-preset-es2015

From the above figures, we can see that we have installed the Babel and its CLI. So we will now proceed with installing the real React Server onto our application. Now Inside the project folder Initialize the application using “npm init”. The list of questions will arise if you want you can answer or just press enter to set the default values. This default values will be generated automatically in the package.json file. This json file is nothing but the core part of any JS Applications. Remember one thing that the name of the project should be in lowercase only.

Fig: Npm Init for Application

Adding ReactJS Dependencies and plugins

There are several plugins that needs to be installed into our application that the developers or the user desires. In our case, we are going to install the Web Pack server and its corresponding dependencies into our application.

Fig: Installing WebPack into our Application

Fig: Installing the Webpack related Dependencies into our Application

So, we have installed both the WebPack server and its corresponding dependencies. Now we will install the React on to our Application.

Installing React

React is installed using the following command as shown in the figure.


Fig: Installing React

Now, we will install the DOM elements of the React Server onto our Application.

Fig: Installing React DOM


Creation of a File

This section involves the main part of the ReactJS Application. Now we will create the main files which will make our application in demand. Currently we will make four important files.

1. Index.html

2. App.jsx

3. Main.js

4. Webpack.config.js

Make a new file webpack.config.js


From the above figure, we can see that we are configuring the configuration file of the Web Pack server. If we look closely at the file then there is an entry path into our application. This entry path is nothing but the file that is currently running onto our server. Whereas the corresponding output that we get will be served into our output path. The Port on which our application is running is defined as 3100, this port can be defined by any port number as per the developer’s convenience. The loader that loads the file is set as “Babel” loader that we have previously installed.

Changes in Package.Json File

Now we are having the package.json file inside our project folder. We are currently removing the test part as shown in the figure by the start parameter which will currently invoke the webpack server configuration.

Fig: Current Package.json

Replace the test part with the “start” part.


Fig: Updated Package.json


Now we are going to open index.html file to view the application:

Fig: index.html

In the ReactJS Application, App.jsx is the file which will also handle the view part of the application. The basic example of Jsx file is shown in the figure below.

Fig: App.jsx

From the above figure, we can see that we are importing the React from the react parameter. This parameter is nothing but the package that we have installed into our application during installation. For simple demonstration we are extending the main App Class with React


Component. Now this class is being applied by the render() method. The main function of the Render method is that it will invoke the functions that have been defined into our application. Inside this App we are simply returning a message as header part. So now we will just take a look at the main.js file which is handling this App.jsx file and then we will run the application.

Fig: Main.js

From the above figure, we can easily see that we are importing the React and their corresponding DOM. The App class that we have defined in the previous section is also imported. Now when we run the application, the compiler will find the ReactDOM element as will run the application based on it. So inside that method we are importing App, which means that whatever the contents are being involved into App will be run into the server and the Corresponding output will be as follows. To run the application, we will have to give the command “npm start”.

Fig: Output of First Example


Understanding JSX The use of JSX in React is mandatory, but it works the same way as regular Javascript in other languages. The template section of the application is being handled by JSX in the ReactJS Application. So whatever HTML part we were doing in the regular JS, that part will be now handled by JSX.

Stateless

Consider the figure shown below, we are making one App class and inside that app class we are keeping two tags namely <Demo1/> and <Demo2/>. Stateless means that we have to first create the methods that we need to be invoked. After that, we will have to call this methods to run the tags.

Fig: Part I of Stateless

From the figure shown below, we can see that we have called the two tags by using the class name of that tag. This tag is now extending the same React Component. To demonstrate a simple example, we have just deployed a simple header message onto our application. So we can see that we have first defined the two methods and then we have called that methods. This concept is known as “Stateless”.


Fig: App.Jsx in Stateless Mode

Fig: Output of Stateless


Statefull

Step 1: In the main App, first create the constructor and apply the Super method to it by giving some static values into it.

Fig: Part I of Stateful

Now inside the render method, we deploying “Table” which indicates that we have to make a table using a parameter named “person”.

Fig: Part II of Stateful


Fig: Part III of Stateful

In the above figure we can see that we are just passing the table values into the desired format of table. So the desired output will be as follows:

Fig: Output of Stateful

Examples using Props

So far we have seen various examples to demonstrate simple messages. Now in the statefull component, we can simplify it using States. States denotes the location, the actual data comes from.


Fig: Example using Props


Another Way of Using Props

Fig: Another way of Using Props


Concept of SetState() method SetState() is a method which will call the function again and again whenever the user clicks on the particular button. In this concept, we are preferring one parameter named “setAttuneDefaultHandler”, this parameter is associated with the bind. So in the next line we can see that we have by default set the values to “AttuneWW”. This has been allocated to the array push, which means that whenever this functions will be called “AttuneWW” will be printed.

Fig: SetState()

From the above figure we can see that we have put one button, and inside that button we are calling our setState method as “setAttuneDefaultHandler” which is having the message as “AttuneWW”. So whenever this button will be clicked the user will be able to see the number of times the same message as shown in the above figure.


Fig: Output using SetState()


Concept of Updating a Value In this section, we will come across values updation that we have already inserted into the textbox. By default, we will enter the values into the textbox and then we will call the function to update the values. Inside the constructor we are applying update state method and outside the constructor we are calling that method.

Fig: Update Values

From the figure shown above we can say that inside the render methods we have applied one text box and inside that the values have been assigned as the method that we have defined in the constructor. After that we are calling that updated value.


Fig: Output of Updated Value

Using Refs and Keys Refs in ReactJS is nothing but the reference to the particular method. In this case, we are entering the values into the textbox and making one function named to clear the input values. So inside the input tag we are calling refs to reference to “myInput”. This “myInput” will now be considered to be the value that we need to update or clear.

Fig: Use of Refs


Fig: Output using Refs


Routing Concept in ReactJS As we know that the main use of the routing is that we can move or relocate from one page to another by specifying certain parameters. In reactJS, as compared to other Javscripts, we are going to install the necessary plugins for the Router and that plugin is “react-router”. The “react-router” can be installed using the npm package manager.

Fig: Installing React Router

As we know that, all the major functionalities are being performed in “App.Jsx” file. So we will make the routing concept in this file.

Import Necessary Dependencies

Fig: Importing Dependencies

The above figure shows that “react-router” is going to perform the Routing functionalities and the parameters that we are going to use in this scenario are defined as “Router, Route, Link”. The details of these parameters will be discussed in the coming section as we will see the practical demonstration of the Application.

Now in this Application, for the demonstration part we are making only three pages to get the basic understanding of the Routing.


Fig: App Component

The above figure suggests that App Component is going to handle the Master page along with the menu of the applications. So we can see that currently we are having three main links or the pages for the application.

Fig: Main App Page Content

This is the Home Page of the Application. We can see that the above three links along with the header will remain same in all the pages of the application. Now we are having three links, so we will be having three classes just as we have made for the App class. So let us now create the pages for the remaining three Pages.


The Figure shows that we have made one class named “About” and inside that class we are returning simple html pages for demonstration of the particular page.

Use of Render

The main use of the render is to handle the view part of the application. Whatever the content we are displaying onto any of the page then we need to render it as rendering is the most important aspects of the ReactJS Application. As just stated above that we are currently having three pages so that we will be using this three pages inside the render page.

In the App component, we have defined “home” which links to a particular page. Now this particular page is being handled by a Component named “Home”. So all the functionalities will be now combined and used by the render to make our application run.

Fig: Render in App.jsx


Fig: Home Page through routing

So we can easily see that the routing functionalities is working successfully by using the react-router dependencies.


Concept of Flux

The Uni-directional Flow of the data is usually maintained by Flux. Whenever the data is entered into the Application then the data will flow in only one direction to display the output on the screen.

Elements of the Flux

Actions The change in the data of our application are basically sent to the dispatcher for handling the data flow.

Dispatcher It is in the centre of the Application. The data that has been configured or dispatched will be now sent to the store.

Store The location where the data and its dependencies exist is the Store. Whenever any changes is to be made into the data then the data will be taken from the store.

View Viewing of the data in our application is handled by this section.

Using Flux

For using the flux, we will be installing the dependencies for the application. React-redux is the name of the dependencies that we will need to work with flux. So we will now install this dependency using npm into project folder.

Fig: Installing React-Redux

Creating Files

After installing the react-redux, we will make some files and folder as per the above table mentioned below:

Folder Name Files inside the Folder

actions actions.js


components AddEmployee.jsx, Employee.jsx, EmployeeList.jsx

reducers reducers.js

Remaining files and folders will remain the same.

So, let us now create the files and folder as depicted in the above table.

Creating Actions

Actions are usually representing the data to the application. This data is to be sent to the dispatcher for further processing. So now in our case, we are going to make one action of adding Employee to the Application.

Fig: actions/actions.js

From the above figure, we can see that we have made one constant named “ADD_EMPLOYEES’ and their default value is being assigned. Now we are giving the Employee ID to the Employees whosoever enters into the application. So currently we have assigned the value to 0. At last, we have made one function to add Employees by incrementing their corresponding IDs.

Creating Reducers

Reducers specify the changes that we are applying in the Actions part. With the help of the switch statement, we will add Employee details onto the application. Reducer will basically take two parameters namely “state” and “actions”. State will be responsible for creating a new Employee and the “actions” will add that particular Employee into the list.

In the figure shown below, we can see that we are using “combineReducers” for the future use when we want to add some more functionalities to the Employees list.


Fig: reducers.js

Creating Store

Application’s state is being handled by the store. Whatever the functionalities that you make during the application, will be automatically handled by this store. When the user or the developer is having the reducer, it becomes ease for him to create a store.


Fig: main.js

In the file shown above, we can see that we have made one variable, named store, and passed the method as the name of the App that we have made in the reducer file.

App Component

App component is the core part of any ReactJS Application. The functionalities done by the redux should be handled by only App Component. With the help of “connect” we can connect App Component to the store.


Fig: App.jsx

The select function in the above figure shows that the states has been accepted for the application and hence we have renamed it to visibleEmployees. We can also see that various functionalities or the files that we have created are imported into the main file that is App.jsx. So this is the main file of the application. Now we will add other components files which will be needed by this application.


Creating Other Components

This section will usually handle all details about the components which are not aware about the redux. So in this section, we will make the functions for adding the Employees and their corresponding details.

Fig: components/AddEmployees.jsx

This file is basically used to create the New Employee.


Fig: components/Employees.jsx

This file is used to display the list of the Employees which are added into the list.

Fig: components/Employeeslist.jsx

This file is used to add the Employee Details into the list.


Now we will run the Application

Fig: Adding employee

Fig: Getting Employee in List

Concept of Animation

Animation, as the name suggests that there must be some entertaining work that might be introduced into the Javascript. If you are thinking so, then you are absolutely right. We are now going to make some animated effects into our data using ReactJS. ReactJS is particularly defined for doing some animations into our applications.

Installing Dependencies

For Animation to take effect, we must have to install some dependencies for the application. Here we are going to add one dependency which is totally dependent on the CSS styles.


Fig: Installing Animation Dependencies

Now as we are going to use the CSS into our application, then let us make one folder named css into our project folder and make one “styles.css” file into that folder. So overall styling will be done in this file. We will also have to import this css file into our main html file as shown in the figure below:

Fig: index.html

Applying Animation

Fig: Applying Animation

For Applying animation, we are referring to the “ReactCSSTransitionGroup” element. This element is particularly applied to the data to which the animation is to be applied. Currently we have applied the name “attune” for the current animation. So whenever we will apply “attune” then that particular animation will be performed. Further, the text message that we want to display is included into the parameter as header part. We can give any type of message, in any format.


Fig: Faded Output

So likewise we can apply any type of animation, to any of the data of our application. So we have seen that animation part of the data is also done with very ease and the application looks more appropriate.

Summary This guide was a complete description about the basic understanding of the ReactJS. ReactJS is nothing but the simple and easy to code type of JavaScript. The developers who are having a keen interest will find it quite interesting as this script is making the application in more redundant way. With the help of the ReactJS, animation is also done very systematically and the application will look some more appropriate and the designing part will also be handled very smoothly. Server side and Client side both will take advantage of this script. Hope you must have got the basic idea about ReactJS. In the next version of this book, we will come with very interesting application with more functionalities into it. Thank You.


getting star te d wi th r eactjs - attuneww.com€¦ · . contents preface about this guide...

Documents