Intro To ReactJS

Intro To ReactJS

What is React JS ?

React is a front-end library developed by Facebook. 

It is used for handling the view layer for web and mobile apps. 

ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

ReactJS is JavaScript library used for building reusable UI components.

Features of React JS ?

• 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 keeping your data unidirectional.
• License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0

Working with React JS

Installation

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

• Using webpack and babel.
• Using the create-react-app command.

Installing ReactJS using webpack and babel

Webpack is a module bundler (manages and loads independent modules). It takes dependent modules and compiles them to a single (file) bundle. You can use this bundle while developing apps using command line or, by configuring it using webpack.config file.

Babel is a JavaScript compiler and transpiler. It is used to convert one source code to other. Using this you will be able to use the new ES6 features in your code where, babel converts it into plain old ES5 which can be run on all browsers.

1. Creating the root directory

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

       C:\Users\username\Desktop>mkdir reactApp

       C:\Users\username\Desktop>cd reactApp

To create any module, it is required to generate the package.json file. Therefore, 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\username\Desktop\reactApp>npm init

Install React and React DOM

       C:\Users\username\Desktop\reactApp>npm install react react-dom --sav

Install webpack

         C:\Users\username\Desktop\reactApp>npm install webpack –save

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

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

Install babel

         C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev

         C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev

         C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev

         C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev

         C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

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

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: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

index.html

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

App.js

This component will render Hello World.

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

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

Running the Server

      

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

It will show the port we need to open in the browser. In our case, it is http://localhost:8001/. 

After we open it, we will see the following output.

Generating the bundle

Finally, to generate the bundle you need to run the build command in the command prompt as ,

            C:\Users\Tutorialspoint\Desktop\reactApp>npm run build