Babel – AppDividend https://appdividend.com Latest Code Tutorials Sat, 05 Jan 2019 16:11:41 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.3 https://appdividend.com/wp-content/uploads/2017/08/cropped-ApDivi-32x32.png Babel – AppDividend https://appdividend.com 32 32 ReactJS Tutorial For Beginners 2017 From Scratch https://appdividend.com/2017/08/22/reactjs-tutorial-beginners-2017/ https://appdividend.com/2017/08/22/reactjs-tutorial-beginners-2017/#comments Tue, 22 Aug 2017 19:12:41 +0000 http://localhost/appdividend/?p=917 ReactJS Tutorial For Beginners 2017 From Scratch

ReactJS Tutorial For Beginners 2017 is the course we are covering today. There are many JavaScript Frameworks are there, which you can include in your next big project. Some folks are also stuck with the jQuery, and that is not a bad choice. If your project has any requirement that leaves you to use the […]

The post ReactJS Tutorial For Beginners 2017 From Scratch appeared first on AppDividend.

]]>
ReactJS Tutorial For Beginners 2017 From Scratch

ReactJS Tutorial For Beginners 2017 is the course we are covering today. There are many JavaScript Frameworks are there, which you can include in your next big project. Some folks are also stuck with the jQuery, and that is not a bad choice. If your project has any requirement that leaves you to use the Latest JS Frameworks then and then you have to use it otherwise no need in web development to get things more complicated. Today we are focusing on React.js, which is a wildly popular JavaScript library for a web application. It is the front-end framework to build user interfaces. So let us get started Learning ReactJS

Learning Everything In Web Development Is Today’s Necessity. You Can Not Escape It. If You Miss, You Will Soon Be Out Dated.
You do not need to be a sheep follower if, you do not need any Front End Framework or library.  First, analyze the requirement of any web application and if the application seems to be very large then and then you decide to go to Front end Framework or library. If Facebook is using it, then it does not mean we have to use it. Facebook has so many algorithms to manage the data and display it to every user, that is why they are using it.

Why should I learn ReactJS

If you find your application needs React.js then you use it, but for that, you have extensive knowledge about the framework, and if not then at least basic understanding is necessary. Some developers are learning during the project development face. Here are some honorable reasons to learn React.js.

  1. It is only the V or View part of MVC Architecture. While AngularJS is the MVC Framework. So, React.js is depended upon a State of the applications. The state is the actual Data.
  2. If you are using React.js with Redux, then you will understand the power of Functional Programming Language. So state modifications are done in an immutable manner and can not change the state of our application directly and also log the application at any given point of time.
  3. Once, you are familiar with the JSX syntax then, you need to only worry about state changes and nothing else in the Frontend side, so if you have done programming in JavaScript especially in the ES6 version of it, then it might be easy for you to grasp.

Prerequisites of This Course

  1. Beginner’s Guide To Setup ES6 Development Environment

  2. Beginner’s Guide To Setup ReactJS Environment

The second article is optional if you are using create-react-app tool for creating a React.js application.

ReactJS Tutorial For Beginners

Right now, we are not building React.js environment from scratch. We are using one tool called create-react-app to set up the boilerplate. You can find more information in the following Github Link.

If you are following this article then, you should have Node.js installed in your local or in your server. So you have access to the NPM and also Yarn. If you are not familiar with Yarn, then stick with NPM.

Step 1: Install the ReactJS Tutorial For Beginners Project.

npm install -g create-react-app
You need to install this dependency as a global so, your terminal must be in Administrator Mode if you are using Windows or in MAC put the sudo before above command.

Then, type the following command to create an application folder.

create-react-app reactjs2017
Do not write project name in capital or any word in capital otherwise NPM will not initiate the process and project will not create.

Go to the project folder by cd command and start the development server by either of the following code.

npm start or yarn start

Development server will start at this URL: http://localhost:3000/

You will see like this: Welcome to React

By default, there are so many configurations handle by our application automatically like,

  1. Babel
  2. Webpack
  3. ESLint

We only focus on code and not the dev. environment. So it is straightforward for us just to code elegantly.

Our React.js version is v15.6.1

Step 2: Modify App.js file inside src folder.

Just replace following code with existing code that comes with the project.

// App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        ReactJS 2017 Tutorials
      </div>
    );
  }
}

export default App;
Every component must be wrapped with one parent element. In most cases, it is div tag, but it can be anything.

Now, when you save the above code gets recompiled automatically and restart the server and page will also automatic refresh, and changes are showing clearly in the browser. So that is the power of the create-react-app tool. If you are violating the ES6 rules then also it will show you the warning the console or terminal.

If you are going to assign an HTML element to a particular class, then please note here that the attribute class name is replaced by className in React.js because of React.js reserve the class keyword.

Step 3: Creating our own component.

We can create React component in Two ways.

  1. Functional Approach
  2. Class Approach(Object Oriented Approach)

We are going to use Functional Approach First.

Create one file inside src folder called Dividend.js and put the following code in it.

// Dividend.js

import React from 'react';

const Dividend = () => {
  return (
    <div>
      Dividend Component
    </div>
  )
}
export default Dividend;

Here, I have used ES6 arrow function syntax. This file simply returns the Dividend component.

If you are using Functional approach then your function or component name must start with capital letter.

Now, we need to include this component into the src  >>  index.js file to render the changes in the browser.

Right now, our index.js file looks like this.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

By default, App.js component is rendering in the browser, but we need to change it to the Dividend.js

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Dividend from './Dividend';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dividend />, document.getElementById('root'));
registerServiceWorker();

Now, if you will save the file and switch to the browser then you will see Dividend Component.

So, our component properly renders. So, this is the functional approach. But in real world scenario, this component are less suitable and class approach is more suitable.

We are creating the same component in class or object oriented approach.

// Dividend.js
import React, { Component } from 'react';

class Dividend extends Component {
  render() {
    return (
      <div>
        Dividend Component
      </div>
    );
  }
}

export default Dividend;

Step 4: Composing components in one another.

Now, we have one component called Dividend. If we want to include some dividend paying stocks list then, we surely do and finally, our only one component will render.

Generally, if we have lots of components, then we will create one folder inside src directory but, right now I am not creating any of this and just put all the components inside src directory. So create one component called DividendRow.js inside src folder.

// DividendRow.js

import React, { Component } from 'react';

class DividendRow extends Component {
  render() {
    return (
      <tr>
        <td>{this.props.name}</td>
        <td>{this.props.dividendYield}</td>
      </tr>
    );
  }
}

export default DividendRow;

Here, I have rendered the table rows component, but we have not created the table yet, first we need to create it and pass the data to this DividendRow.js component.

// Dividend.js

import React, { Component } from 'react';
import DividendRow from './DividendRow';

class Dividend extends Component {
  constructor(props){
    super(props);
    this.state = {
      lists: [
        {
          name: 'TCS',
          dividendYield: '0.4'
        },
        {
          name: 'Infosys',
          dividendYield: '0.5'
        },
        {
          name: 'HCL',
          dividendYield: '0.6'
        }]
    }
  }
  render() {
    return (
      <table>
        <thead>
            <tr>
            <td>Name</td>
            <td>DividendYield</td>
            </tr>
        </thead>
        <tbody>
          {this.state.lists.map(list => {
            return <DividendRow name={list.name} dividendYield={list.dividendYield} />
          })}
        </tbody>
      </table>
    );
  }
}

export default Dividend;

Here, I have initialized one state called lists and pass that list as a property or props to the Table Row component and use it. I have already included the DividendRow.js component and use it inside another component called Dividend.js. Finally, Dividend component will be exported and render in the browser.

In real time example, the states are either filled with AJAX data. When the data changes according to that components will react. That is why the library is called React.js.

So this is the really very basic example of ReactJS Tutorial 2017. If you want to learn more then please check out my another post and also stay tuned for my blog. There will be the advance topic of React.js will post soon.

The post ReactJS Tutorial For Beginners 2017 From Scratch appeared first on AppDividend.

]]>
https://appdividend.com/2017/08/22/reactjs-tutorial-beginners-2017/feed/ 4
Beginner’s Guide To Setup ES6 Development Environment https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/ https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/#comments Tue, 28 Mar 2017 15:55:03 +0000 http://localhost/final/?p=14 Beginner’s Guide To Setup ES6 Development Environment

Hello, Web Programmers. Beginner’s Guide To Setup  ES6 Development Environment. To setup es6 development environment in local machine, we need to understand two tools. Babel Webpack Babel Babel is a transpiler that just converts the code from ES6 to ES5 to support all modern browsers. For more information, please visit this official BabelJS website. https://babeljs.io/ Webpack Webpack is module […]

The post Beginner’s Guide To Setup ES6 Development Environment appeared first on AppDividend.

]]>
Beginner’s Guide To Setup ES6 Development Environment

Hello, Web Programmers. Beginner’s Guide To Setup  ES6 Development Environment.

To setup es6 development environment in local machine, we need to understand two tools.

  1. Babel
  2. Webpack

Babel

Babel is a transpiler that just converts the code from ES6 to ES5 to support all modern browsers.

For more information, please visit this official BabelJS website. https://babeljs.io/

Webpack

Webpack is module bundle for modern javascript web applications. Using webpack, we do not host multiple javascript files. We just host one file for an entire web application.

Let us take an example, for our project we only include only one javascript file.

For More information, please visit this official Webpack website. https://webpack.github.io/docs/

If you are taking this demo, then have already installed the Node.js in your machines.

Setup ES6 Development Environment

Step 1: Create a project folder.

Create an empty project folder.

mkdir js6

Navigate to that directory by typing,




cd js6

Step 2: Create a package.json file.

We need to create a JSON file called package.json

npm init

Your package.json file looks like this.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Step 3: Install webpack globally and locally.

We need to install webpack globally.

For Windows, open a command prompt in administrator mode.

npm install -g webpack

For Linux or Mac.

sudo npm install -g webpack

We need to install webpack locally.

npm install webpack --save-dev

Here, we have used –save-dev flag.

The reason behind is that we need to install this dependency for the development setup, not for production setup.

Step 4: Include bundled file in the HTML page.

Create an index.html file in root folder.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES2015 Environment</title>
</head>
<body>
</body>
</html>

Now, include a script tag in your body tag.

<!-- index.html -->

<script src="bundle.js" type="text/javascript"></script>

Create a new directory called app in the root folder.

In that create a javascript file called main.js

For testing write only one line of code in main.js file

//main.js

console.log('Inside main.js');

Step 5: Create a webpack configuration file.

Now, create a webpack configuration file in a root folder named as webpack.config.js

In this file, we need to export all the webpack settings by exporting javascript object.

//webpack.config.js

module.exports = {
    entry: ['./app/main.js'],
    output: {
        filename: 'bundle.js'
    }
};

Here we need some explanations right?

module.exports : It is an object that describes our webpack configuration.

The object contains two properties, which is very basic configuration.

entry: – which represents our entry javascript file for the project. In our case It is  js6 > app > main.js

output: – the output bundled file, which we have included in our main HTML file called bundle.js

We need to update package.json file’s scripts property.

"scripts": {}

We add new properties called “build” and value called “webpack“.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Run the build command again.

npm run build

It will create a bundled file names as “bundle.js“.

Now open an index.html file in a browser, and you will see in the chrome developer tools,  inside console panel, there is logging by saying

Hello from main.js.”

Cool!!, we have successfully bundled out main.js file into the bundle.js file, and if you open that file, we can see ES5 code.

Now, change the content of the main.js file and refresh the page.

Console panel output will remain the same.

To overcome this problem.

We need to a package called “webpack-dev-server“.

Step 6: Install webpack development server.

To get webpack-dev-server globally on Linux and Mac.

sudo npm install -g webback-dev-server

To get webpack locally

npm install --save-dev webpack-dev-server

We need to update the package.json file.

"build": "webpack-dev-server"

That’s it!! Now start your webpack by typing

npm run build

Now analyze the terminal, It says that your project will serve on http://localhost:8080

You will see the console panel result that we will get the same thing.

Hello from main.js

Now change the main file like “Hello from bundle.js“.

It will recompile automatically, and you can see the changes are reflecting in the browser.

Step 7: Use Babel in our development environment.

Now, we need to configure Babel.js in our webpack environment.

Download some dependencies from NPM.

npm install babel-core babel-loader babel-preset-es2015 --save-dev

It will update our package.json file.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

 

babel-core and babel-loader is the dependency, which transpiles the es6 code to es5

babel-preset-es2015 let us use some advanced feature of ECMA Script in our web applications.

Now, we have to update our webpack.config.js file.

Step 8 : Edit webpack.config.js file.

Updated webpack.config.js file looks like this.

//webpack.config.js

module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        port: 3000
    }
};

Here we have added module object, which has loaders property.

It will accept an array of loader configuration, like which loader we want to use and which file we have to test with the extension .js and which file we need to exclude from transpiling from es6 to es5 like “node_modules” folder.

I  have added one optional attribute called devServer.

It includes a port number on which we need to host our app. by default webpack-dev-server provides port 8080.

We can change it and put port 3000.

Please close the server and type below in terminal.

npm run buid



An App will be running on http://localhost:3000/

Our final directory structure will look like this.

Beginner’s Guide To Setup ES6 Development Environment

Step 9: Write ES6 code into our main.js file.

Now test one ECMA Script Feature called Arrow Function

You will have to open a main.js file and write below code.

Beginner’s Guide To Setup ES6 Development Environment

//main.js

let app = (name) => {
    console.log(`hello from ${name}`);
}
app('Krunal');

You will see in the browser that, it has been updated and in the console, we can see “hello from Krunal.”

We have built an environment to write ES6 code, and It will be compatible with today’s browser.

This code you can find in my GitHub URL: https://github.com/KrunalLathiya/es6-environment

Possible Errors

  1. First, check your Node and NPM versions
  2. You need to check all of your dependencies version by comparing package.json file to avoid version conflicting.

If you have any questions, please ask in a comment below. I am happy to help you out.

Finally, we have achieved setup es6 development environment in the local machine.

The post Beginner’s Guide To Setup ES6 Development Environment appeared first on AppDividend.

]]>
https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/feed/ 15