React React React… ok so what is React and how we can build a basic application in it.
Here my first trial of React.js with babel, npm and webpack.
Gone through many blogs few are saying that React can cover the complete MVC, but what I got up-to now React basically covers the V(view from MVC).
I am still struggling with the doc, yea I am trying to learn React but the flow of the doc is a bit complex to me so collecting data from several resources.
Here is the example what I tried from scratch.
Install NodejS and npm as per your distro.
Create a directory let’s say react-hello-world and initialize the it using npm.
mkdir react-hello-world
cd react-hello-world
npm init
Select default for all prompts.
Installing and configuring webpack using npm.
webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules based on configuration what you did.
npm i webpack -S
Configuration for webpack.
I follow vim, so the commands with vim. You can use any editor you wish.
vim webpack.config.js
var webpack = require(‘webpack’);
var path = require(‘path’);var BUILD_DIR = path.resolve(__dirname, ‘src/client/public’);
var APP_DIR = path.resolve(__dirname, ‘src/client/app’);var config = {
entry: APP_DIR + ‘/index.jsx’,
output: {path: BUILD_DIR,
filename: ‘bundle.js’}
};
module.exports = config;
The APP_DIR holds the directory path of the React application’s codebase and the BUILD_DIR represents the directory path of the bundle file output.
The output instructs webpack what to do after bundling process has been done. Here, we are instructing it to use the src/client/public directory to output the bundled file with the name bundle.js
First, create the folder structure like
react-hello-world
– – src
– – – – client
– – – – – – app
Let’s create a index.jsx into ./src/client/app to verify that we did a proper configuration.
vim src/client/app/index.jsx
console.log(‘Hello World!’);
Now execute the command
./node_modules/.bin/webpack -d
The above command run the webpack in development mode and create the bundle.js
Now for making this more interactive adding an index.html in ./src/client
vim src/client/index.html
Now open your browser and enter the path absolute-path-of-your-directory/react-hello-world/src/client, you can see Hello World! in the console.
Installing Babel and configuring using npm.
npm i babel-core babel-loader babel-preset-es2015 babel-preset-react -S
The babel-preset-es2015 and babel-preset-react are plugins being used by the babel-loader to translate ES6 and JSX syntax respectively.
As we did some configuration for webpack, babel-loader also requires some configuration.
Create a .babelrc
vim .babelrc
{
“presets” : [“es2015”, “react”]
}
The next step is telling webpack to use the babel-loader while bundling the files
vim webpack.config.js
// Existing Code ….
var config = {// Existing Code ….
module : {loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : ‘babel-loader’}
]
}
}
Now we are done with the webpack and babel. Let’s write some code in React
Install React and React-dom
npm i react react-dom -S
Replacing the existing console.log in index.jsx with
import React from ‘react’;
import {render} from ‘react-dom’;class App extends React.Component {
render() {
return Hello World!;
}
}
render(<App/>, document.getElementById(‘app’));
Now execute the command again
./node_modules/.bin/webpack -d
Open index.html in the browser and there it is
Hello World!
youthsm 