Category: React

Create Stateless functional component for ReactJS

This is another way to create React components. Stateless functional component is JS pure functions which has no state. This is the product component which I have created using createReactClass method

Now we will see how we can convert above code to stateless function component So this is the syntax for stateless function is […]

Read more

ES6 Class component for React

You can use ES6 to create ReactJS component. We will create the following code in ES6 syntsax

You can see the following code snippet which I have rewritten with ES6 syntax. Here I am extending the React.component to create your Product component. You can see it at line 4

Read more

Add method to React component

Now we will see how to add method to React component. If you are not familiar with creating React component you can refer this tutorial I have the following code inside the index.js file

Then I will create method in my component file product.js

You can see the calculateDiscount() method in code and […]

Read more

Add properties to the component

Previous tutorial we studied how to create React component. Now we will see how to add properties to the component You can add dicount property to the Products component as shown in the below code and I have passed the value of discount as 10

Now lets see how we can display the property […]

Read more

Create your first React component

In your working folder run the following command to create package.json file

You need React and React-DOM to create your application. You can install them as dependency

Next, you can install the Babel Loader

We need several presets for Babel to work. You can install the following presets

Create .babelrc file […]

Read more

React project building with Webpack

In this tutorial we will see how we can build the React application with Webpack. You will need following two files to get started This is the folder structure for this tutorial

index.html file in dist folder in your working directory and it will have the following code

index.js file is located at […]

Read more

Static transpiling with Babel-CLI

When you develop large React application for production level in-line traspiling is not going to work. So we can do static transpiling with Babel CLI. We will see how to install the Babel CLI Your source JS file is located at src\index.js

Your index file is loacated root of your working folder and it […]

Read more

React with JSX syntax

JSX is a preprocessor step that adds XML syntax to JavaScript. You can develop React applications without using JSX. But when you develop React app with JSX syntax your code will be elegant. JSX is like XML and it has tag name, attributes and children This is the normal JS code we used in our […]

Read more

Writing Hello World code in React

In this tutorial we will see how we can get started with React by writing the Hello World application. First create index.js in your folder and add the following code to it

Then you can create index.html file and define the root element

Then I am going to open the terminal and change […]

Read more

What is React?

React is a java script library that is used to build user interfaces. You can make reusable components which can display data and data can be change over time without reloading the page. React was created at Facebook and Instagram on 2013 React Native enables you to create native mobile applications React Developer Tools You […]

Read more