React JS - Tic Tac Toe

Using React JS components method I have developed a Tic Tac Toe 2 player game & hosted it on heroku. The link is ukifunwork3byparani.herokuapp.com.

For that first I downloaded Node JS & NPM in my PC.
Then I run

npm install -g create-react-app

create-react-app my-app
The above command will create a react app folder.

The rest of the works were done by using a tutorial published in the React JS official page.

https://reactjs.org/tutorial/tutorial.html

There 2 main components used.

• Presentational Component 
• Container Components

In presentational components it consists of codes which are used in front-end / the users visual.

In container components it consists of arguments when user click in the client side.

After that User's name taking method was built & implemented on it.

If a player wins.. An alert button will pop-up with the name of the player who won.

React JS

React JS is a kind of Javascript library developed by Facebook engineers to build reusable UI components for front-end development.

React used as "V" in "MVC" architecture. "V" stands for View.

M - Model
V - View
C -Controller

What is MVC?

Model–view–controller (MVC) is an architectural pattern commonly used for developing user interfaces that divides an application into three interconnected parts. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.

React provides a way to create cross platform form apps using React Native.

React has following features...

JSX − JSX is JavaScript syntax extension. Its a combination of both Javascript & HTML codings.

Components − To create a Single Page Application or a front-end User Interface we can use React. React is used by creating components. That means we have to construct every single page displayed in the front-end are created using components.

Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about app. Flux is a pattern that helps keeping data unidirectional.

We use
webpack.config.js file contains the details of compiling the source files which are written in JSX format to a custom Javascript code.
What loaders we should use to compile, port number& other stuffs.

Following is a model of webpackconfig.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;