• SQL Tutorial
  • Spring
  • RubyonRails
  • Java IO
  • Core Java
  • Struts
  • JSP
  • jQuery
  • Servlet

  • <

    Reactjs Tutorial

    React is a JavaScript library used to build single page applications for building user interfaces.React allows us to create reusable UI components.It was maintained by facebook.


    Reactjs Installation

    After installation of NodeJS, we can start installing React upon it using npm. You can install NodeJS in two ways:

      webpack and babel.
      create-react-app command.

    Installing ReactJS using webpack and babel


    Webpack is a module bundler . It takes dependent modules and compiles them to a single (file) bundle.

    Babel is a JavaScript compiler and transpiler. It is used to convert one source code to other.


    Create the Root Folder

    Create a folder with name reactApp on the desktop to install all the required files using the mkdir command.

    C:\Users\tutorial\Desktop>mkdir reactApp
    C:\Users\tutorial\Desktop>cd reactApp
    

    After Creating the folder, we need to create a package.json file. To do so you need to run the npm init command from the command prompt.

    C:\Users\tutorial\Desktop\reactApp>npm init
    

    This command asks information about the module such as packagename, description, author etc. you can skip these using the ??y option.

    C:\Users\username\Desktop\reactApp>npm init -y
    Wrote to C:\reactApp\package.json:
    {
       "name": "reactApp",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
       },
       "keywords": [],
       "author": "",
       "license": "ISC"
    }
    


    Install React and react dom


    Using install react and react-dom commands of npm respectively. You can add the packages we install, to package.json file using the --save option.

    C:\Users\tutorial\Desktop\reactApp>npm install react react-dom --save
    
    


    Install webpack

    Since we are using webpack to generate bundler install webpack, webpack-dev-server and webpack-cli.

    C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save
    
    


    Install babel

    You can install all of them in single command as

    C:\Users\tutorial\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
       babel-preset-react html-webpack-plugin --save-dev
    


    Create the Files

    To complete the installation, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files manually or, using command prompt.

    C:\Users\username\Desktop\reactApp>type nul > index.html
    C:\Users\username\Desktop\reactApp>type nul > App.js
    C:\Users\username\Desktop\reactApp>type nul > main.js
    C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
    C:\Users\username\Desktop\reactApp>type nul > .babelrc
    


    Set Compiler, Server and Loaders

    Open webpack-config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8001 port. You can choose any port you want.


    webpack.config.js
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
       entry: './main.js',
       output: {
          path: path.join(__dirname, '/bundle'),
          filename: 'index_bundle.js'
       },
       devServer: {
          inline: true,
          port: 8001
       },
       module: {
          rules: [
             {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                   presets: ['es2015', 'react']
                }
             }
          ]
       },
       plugins:[
          new HtmlWebpackPlugin({
             template: './index.html'
          })
       ]
    }
    

    Open the package.json and delete "test" "echo \"Error: no test specified\" && exit 1" inside "scripts" object.

    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
    


    index.html


    
    
       
          
          React App
       
       
          


    App.js


    import React, { Component } from 'react';
    class App extends Component{
       render(){
          return(
             

    Hello World

    ); } } export default App;


    main.js


    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App.js';
    
    ReactDOM.render(, document.getElementById('ap
    


    Run the Server


    C:\Users\tutorial\Desktop\reactApp>npm start
    
    


    Output


    Hello World
    
    
















    © copyright 2017-2021 Completedone pvt ltd.