Golang Tutorial
Introduction Variables Constants Data Type Convert Types Operators If..Else Switch..Case For Loops Functions Variadic Functions Deferred Functions Calls Panic and Recover Arrays Slices Maps Struct Interface Goroutines Channels Concurrency Problems Logs Files and Directories Reading and Writing Files Regular Expression Find DNS records Cryptography Gotchas in Golang Import and Export Best Golang Packages Web Application Goroutines and Channels Exercises Reflection in Golang Golang for beginners Strings in Golang HTTP Client Server Examples Context PackageGolang Reference
Basic Programs Advance Programs Data Structure and Algorithms Date and Time Slice Sort, Reverse, Search Functions String Functions Methods and Objects Interface TypeBeego Framework
Beego Setup Beego Database Migration Beego GET POST Beego RoutingReact JS Tutorial
React is a library for designing user interfaces that were originally built and open sourced by Facebook. Facebook has absolutely transformed the way we assume about front-end UI development with the launch of React. The main advantage of this component-based technique is that it is easy to learn, and the view (MVC) is just a function of the properties and state. This tutorial example and solution series is for anyone who's working on or interested in building user interfaces and you will learn how to build applications using React JS.
React JS Count number of checkboxes are checked
To count the number of checkboxes that are checked in a React JS application, you can maintain a state that keeps track of the checked checkboxes. Here's a simple example to demonstrate this:
Create React App
Different programming languages, tools, and frameworks have several ways to jump-start development for their particular tool-set. When you set up a new project, you will start with a basic set of application files, some placeholder content, and a complete set of development tools.
Example of React Bootstrap Datatable
This example display REST Api Data in react bootstrap data-table. This comes with key features of Sort, Filter, Pagination, Custom Labels, Presentational and raw data separation, Custom column sort and column filter function.
How to create Functional Component?
This component simply going to display a message in H1 tag. Create a new folder called components and within the folder create a new file Vehicles.js, for file naming convention use Pascal Case.
Create Functional Component using ES6 Arrow Syntax
The example is a very common piece of code that will make sense of creating React components and using fat arrow syntax.
React Elements
A React element is a JavaScript object with specific properties and methods that React assigns and uses internally. React elements are the instructions for how the browser DOM get created. When we use ReactDOM library React elements are getting changed into DOM elements. However, when we use React Native, React elements are getting changed into native UI elements of Android or iOS.
What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript code. It's primarily used with React, a popular JavaScript library developed by Facebook for building user interfaces. JSX makes it easier to write and manage the structure of components in a React application by blending the presentation layer (HTML) with the application logic (JavaScript).
State and Props in React
In React, state and props are two important concepts that help to manage and pass data between components. State is a JavaScript object that represents the current state of a component. It stores data that determines the behavior and rendering of the component. When the state of a component changes, React will automatically re-render the component to reflect the updated state.
What is state in React?
In React, state refers to the internal data that a component manages and uses to determine how it should render and behave. State is an essential concept in React because it allows components to be dynamic and responsive to user interactions or changes in data.
3 Different Examples - How State Works in React?
In React, state refers to an object that holds the data that determines the behavior and rendering of a component. When the state of a component changes, React will automatically re-render the component to reflect the updated state. Here are some examples to illustrate how state works in React:
React Components
React components are the fundamental unit of a client-side application written in React. React components are useful because they provide access to the React support for creating features by combining JavaScript, HTML, and other components. React components allow us to reuse the same structure and then we can populate those structures with different sets of data. We can define components using JavaScript functions or classes that receive properties as inputs and maintain their internal state. Components can be nested and can create other components as well. We can create two primary types of components Stateless and Stateful.
React JSX
React differs from other libraries because it adopts a whole new language called JSX to illustrate what the visuals will look like.
What is JSX?
- JSX stands for JavaScript XML.
- JSX is a language that allows you to mix JavaScript and HTML-like tags to define user interface (UI) elements and their functionality.
- JSX is an extension for JavaScript that allows for writing what looks like HTML and XML in our JavaScript.
- JSX is a shorthand for calling React.createElement() to create elements and components.
- JSX looks like HTML and offers a friendly syntax for creating DOM elements.
- JSX accepts any valid JavaScript expression inside curly braces.
React Props
Complex and dynamic interface contains nested components, but it creates new challenge, communication between these components. Props are the means by which one component provides data to another or share data between components.
Props is short for properties. React elements are technically objects which have properties attached with them. These properties contain data available to use in the component.
Getting Started with React and Hello World Example
Embed JavaScript Expressions in JSX
Check checkbox is Checked or Unchecked
Create a new file and give it name index.html. Add the code given below to it:
How to show hide component on Click in React JS?
Display JSON Data in React JS
Loop inside React JSX
This is an example of using Loop inside React JSX
Component displays Height and Width on window resize
Check which Radio button is Selected or Clicked
How to use React-Bootstrap component?
Glyphicon Rating Star component
React Static Website with Material UI theme
In this tutorial you'll learn about integration of Material UI with React JS and how to fetch static JSON data to display.
How to perform computation inside expression using ternary operator?
Expressions can be used for any computation, below example uses the ternary operator to determine whether length and breadth are equal or not. Based on that identify it is square or rectangle and also calculate area of that.
How to use function inside JSX expression?
A function can be defined and use by the expression, in that case the output of a function is taken by the component to produce content.
How to use arrow function in React stateless components?
Stateless components can be defined using the fat arrow syntax, which exclude the use of return keyword.
React JS Blog CRUD operation
In this tutorial, we look at how to implement simple blog with Add, Edit, Delete and Listing Posts in React JS. As an example, we will use sample JSON data from jsonplaceholder.com.
Using this keyword access component properties and methods
The this keyword refers to the component instance and required to specify the properties and method defined by the component. Here, dimension refers to the state property created in constructor.
How to create simple React Router to navigate multiple pages?
In this example, we have created multiple page website so when user enter a URL in the address bar and the browser navigates to a corresponding page. And it also navigate to the appropriate application view when the user clicks a link.
How to pass an Argument to a Method used inside JSX expression?
The expression in below example invokes the shape() and area() method, using the len and bre value as the argument.
How to build and use a custom react component from scratch?
In this tutorial, we will learn how to build and use a custom react component from scratch.
How to set property values using expression?
Formatting the HTML elements and child components, expressions can be used to set the value of props,. The result of getClassName method is used to set the className prop of the div element.
How to handle events using expressions inside JSX?
The App component returns a button to the content and used the onClick prop to tell React how to respond when the click event is triggered. The button element is configured using the onClick prop, which tells React to invoke the calculate method in response on the click event.
Integrate Bootstrap with ReactJS Application
Bootstrap is most open source popular CSS framework, which was originally developed by Twitter. CSS framework like Bootstrap simplifies the process of creating a consistent theme throughout an application. Bootstrap styles are applied via the className prop, which is the counterpart to the class attribute, and is used to group related elements. Bootstrap gives classes that allow the style contexts to be applied to various HTML elements.
How to render raw HTML content in React JS?
The return keyword inside the component's function is used to render the result. When a component renders a string value, it is included as text content in the parent element.
How to use createElement in React JS?
The component function returns the result from the React.createElement method, React can use that HTML element to add content in Domain Object Model (DOM).
Example of React JS with Material UI components
This is an example of using Material Components in React JS
How to use onChange and onClick event in React JS?
How to get a clicked HTML element in React?
How to render one component in another component in React JS?
In React content rendered by a component can contain other components also, this features allow us to create more complex applications.
How to pass properties from parent component to child component in React JS?
React supports props—short for properties which allows a parent component to pass data to its children, which they can use for manipulation and render their content. Props are defined by adding properties (similar to data-attributes) to the custom HTML elements that apply components. The name of the property is the name of the prop, and the value can be a static integer, string, float or an expression.
How to pass data from child component to its parent in ReactJS?
Props can be used to pass static values or the results of dynamic expressions to parent components.
React JS onClick event handler
Events are triggered by HTML elements to signal important changes, such as when the user clicks a button. Handling events in React is similar to using the Domain Object Model API. The DOM API onclick property is expressed as onClick in React applications and handle the click event which is triggered when the user clicks an element. However, the expression for handling an event property is a function which will be invoked when the specified event is triggered.
React JS update Div content on click
The name of the method is followed by the equal sign, open and close parentheses, the fat arrow symbol, and then the message body. When you click the button element, the updateContent method is provided with a value for this, which will update the div content.
onClick Event binding and get event name in ReactJs
onMouseDown and onMouseUp Event handling in ReactJs
When user press the mouse button down, a mousedown event is triggered, and when user release, a mouseup event is triggered. The handleEvent method uses the type property to determine which event is being handled and updates the message value accordingly.
React JS get Tag Name and Inner Text on Click
When the button element is clicked, the click event gets triggered, the value of the tagName property can be used to find out HTML element the source of the event and innerText property can be used to find out text written in that HTML element.
Working with Forms, Inputs and onChange Events in ReactJs
This is an example, to show working model of React with form elements, using state properties to set their value and event handlers to respond to user interactions.