React is a JavaScript library for building user interfaces; the technology is backed by Facebook and Instagram—among others. This article shows how to create a simple Tic Tac Toe game with React and then deploy the app to the Predix platform. The post also explains some of the React basics.

Introduction to React

For building user interfaces, React provides only a view layer and uses a JavaScript syntax extension called JSX to write HTML markup right in the component code. For example:

It is declarative. Instead of telling your program how to do something, you tell what you want to do (for example, using Array methods as opposed to the manual implementation of some operations with elements). React is declarative when we describe components; however, it is more imperative when we describe state changes.

It is JavaScript. Moving HTML to JS code (JSX) is a good idea. JavaScript can process whole HTML elements inside faster than individual DOM node changes. A virtual DOM keeps a copy of the real DOM tree and makes changes only when necessary. Another advantage is that you do not have to learn specific syntax for writing templates (unlike different template syntax in different AngularJS versions: *ngFor, [click], ng-repeat, and ng-click). If you know JS, you can write in React easily.

Unidirectional data flow.

Decomposition. The app is broken into smaller components.

Explicit mutations. Explicit changes of the state are done via the setState method.

Configuring a React project

npm

npm is the package manager for JavaScript. Not so long ago, npm was used only for Node.js, but now it is a universal package manager that contains all types of JS packages.

If you already installed npm, just type npm init in the terminal to start working with it. It will initialize a new project for you by creating the package.json file.

To install a module, type npm install <module name> --save (the --save flag tells npm to save this module in package.json). There are two types of dependencies in the package.json file: dependencies and devDependencies. The first type (dependencies) includes frameworks or libraries needed for the application code. The second type (devDependencies) in general contains bundle packages needed for transforming the code.

npm scripts

npm scripts are also a very important feature of the package manager. Sometimes, it is difficult to start the project server and tests or build the project when you look at it for the first time. npm scripts allow you to make aliases for any commands. If you are not familiar with the project structure, you can see the main commands in the scripts section in the package.json file. Just describe your command in package.json.

Here, the entry field is the root component of the app. It compiles all our code in one file called bundle.js to the path public/bundle.js. During the compilation, we run the code through different loaders that do some transformation. (In our case, Babel compiles ES6 and React JSX into ES5.) For example:

The syntax is called JSX, and many programmers really like it. Babel transforms the JSX code into regular JS so that the browser can understand it. Also, Babel can be used for adding ES6 syntactic sugar to your project. We use two presets in our project—JSX and ES6 transformations:

query: {
presets: ['es2015','react']
}

Project structure

For this article, we use a simple project structure, because the project is not big enough. We placed the code of all the components in a single-folder app. However, if the project grows, this approach will not be suitable.

It is important to separate two types of React components—containers and representative components—and place them into different directories. Containers are the components that contain app logic and can be reusable. Representative components are simple views that include only the render method, get data, and render the view according to props.

Related reading:

About the author:

Dmitry Kozhukh is a front-end developer at Altoros. Using JavaScript, HTML, and CSS, he specializes in creating interactive, yet functional web applications and digital interfaces—according to the latest trends in the industry.

To stay tuned with the latest updates, subscribe to our blog or follow @altoros.

Subscribe to new posts

Subscribe to new posts

Get new posts right in your inbox!

Follow us

About Altoros

Altoros is a 300+ people strong consultancy that helps Global 2000 organizations with a methodology, training, technology building blocks, and end-to-end solution development. The company turns cloud-native app development, customer analytics, blockchain, and AI into products with a sustainable competitive advantage. Altoros assists enterprises on their way to digital transformation, standing behind some of the world's largest Cloud Foundry deployments.