Code World: REACTJS

What is React?

React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.

One of it's unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.

React is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

Why React:

Fast
Modular
Scalable
Flexible

If you are new to React, then this blog is for you! No Pro knowledge is expected. We will start at the very beginning and move slowly. (credit-tutorialspoint)

Look Closely?

How to set up an environment for successful React development?

We will need to install NodeJS, If you don't please go through the below link.

https://nodejs.org/en/download/

Step 1: Create the root folder

The root folder will named firstApp and we will place it on F:\Blogger.Create empty package.json file inside by running npm init from the command prompt and follow the instructions.

mkdir firstApp
cd firstApp
npm init

Step 2: Install global packages

global-A simple React component for exposing global properties on your page.

We will need to install several packages for this setup. We will need some of the babel plugins, so let's first install babel by running the following code in the command prompt window.

babel-The compiler for writing next generation JavaScript.

CLI -compile files from the command line.

npm install -g babel
npm install -g babel-cli

While you can install Babel CLI globally on your machine, it’s much better to install it locally project by project.

There are two primary reasons for this.

Different projects on the same machine can depend on different versions of Babel allowing you to update one at a time.
It means you do not have an implicit dependency on the environment you are working in. Making your project far more portable and easier to setup.

Step 3: Add dependencies and plugins

Webpack-Webpack is a bundler. It will take bunch of loose javascript files and build a single file from the lot.

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

Now we need to install React.The --save command will add these packages to package.json file.

npm install react--save
npm install react-dom --save

Also we will need some babel plugins.

npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

Step 4: Creating files

Now we are ready to create files using cmd, you can also do this manually.

type null > index.html
type null > App.jsx
type null > main.js
type null > webpack.config.js

Files in firstApp folder

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.js"></script>
   </body>

</html>

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

main.js

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

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

Step 5: Set Compiler/Server/Loaders

Now edit the webpack.config.js and package.json files.

webpack.config.js

var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

Then install webpack-dev-server:

Now edit the package.json file.

package.json

{
  "name": "firstapp",
  "version": "1.0.0",
  "description": "introduction",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "Lahiru",
  "license": "MIT",
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

Step 6: Start the server
Now you can run the server, type "npm start" on command prompt. Then visit http://localhost:8080/

Code World

Pages

REACTJS