Knowledge Factory

 Just like HTML, React can perform actions predicated on utilizer events. React has the same events as HTML: click, change, mouseover, etc. React events are written in camelCase syntax: onClick instead of onclick. React event handlers are written inside curly braces: onClick={trigger}  instead of onClick="trigger()". Example import React, { Component } from 'react' ; class App extends React.Component { constructor(props) { super(props); this .state = { message: '' }; } changeText(event) { this .setState({ message: event.target.value }); } render() { return ( <div class= "container" > <h2>Simple Event Example</h2> <div className= "form-group" > <label htmlFor= "usr" >Enter your message: </label> <input type= "text&q

Today we will explain React Component API. It makes the code thoroughly individual and reusable in the application. For more topics, click below link: React JS Setup, Installation, and First React Project :  part 1 ReactJS - JSX :  part 2 ReactJS - Components :  part 3 ReactJS - State and Props :  part 4 ReactJS - Component API : part 5 ReactJS - Events  :  part 6 Reactjs - Form :  part 7 ReactJS - Bootstrap - Buttons : part 8 ReactJS - Bootstrap - Table : part 9 ReactJS - Keys : part 10 CRUD React J+Node JS+Express+MongoDB CRUD:MERN Stack development  Kotlin + Spring Boot + React JS + MongoDB CRUD - Full stack development React JS+SpringBoot+RDBMS-CRUD:Full-stack development foundation React.js + Python + MongoDB CRUD application Here, we are going to explicate the three most paramount methods available in the React component API. setState() forceUpdate() findDOMNode() setState() setState() method is utilized to update the state of the component. This method will not supersede the st

For more topics, click below link: React JS Setup, Installation, and First React Project :  part 1 ReactJS - JSX :  part 2 ReactJS - Components :  part 3 ReactJS - State and Props :  part 4 ReactJS - Component API : part 5 ReactJS - Events  :  part 6 Reactjs - Form :  part 7 ReactJS - Bootstrap - Buttons : part 8 ReactJS - Bootstrap - Table : part 9 ReactJS - Keys : part 10 CRUD React J+Node JS+Express+MongoDB CRUD:MERN Stack development  Kotlin + Spring Boot + React JS + MongoDB CRUD - Full stack development React JS+SpringBoot+RDBMS-CRUD:Full-stack development foundation React.js + Python + MongoDB CRUD application State The state is an instance of React Component Class can be defined as an object of a set of overt properties that control the demeanor of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component. To define a state, we will first declare a default set of values for defining the co

A Component is the core building block of a React application. In other words, we can verbalize that every application we will develop in React will be composed of pieces called components. Components make the task of building UIs much more facile. We can visually perceive a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be our final UI. You can visually perceive in the below image we have broken down the UI of a webpage into individual components. For more topics, click below link: React JS Setup, Installation, and First React Project :  part 1 ReactJS - JSX :  part 2 ReactJS - Components :  part 3 ReactJS - State and Props :  part 4 ReactJS - Component API : part 5 ReactJS - Events  :  part 6 Reactjs - Form :  part 7 ReactJS - Bootstrap - Buttons : part 8 ReactJS - Bootstrap - Table : part 9 ReactJS - Keys : part 10 CRUD React J+Node JS+Express+MongoDB CRUD:MERN Stack development  Kot

JSX stands for JavaScript XML.JSX is a preprocessor step that integrates XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Any code in JSX is transformed into plain JavaScript/ECMAScript. First, y ou must set up your local development environment. Follow the below link to set up your local environment. https://www.knowledgefactory.net/2020/12/react-js-setup-installation-and-first_27.html ReactJS - Components After executing the commands mentioned in this  link , a folder with a specified name is created with the following contents. JSX looks homogeneous to a regular HTML in most cases.For example, import React from 'react' ; class App extends React.Component { render() { return ( <div> Greetings! from knowledge factory </div> ); }

Following are the steps to engender a simple Spring Boot Project. Step 1 :  Open the Spring initializr https://start.spring.io/ Step 2 :  Provide the Group and Artifact name. We have provided Group name com.knowledgefactory and Artifact spring boot-demo. Here I selected the Maven project - language Java - Spring Boot 2.3.8 And integrated Spring web dependency. The single spring-boot-starter-web dependency transitively pulls in all dependencies cognate to web development. Step 3 :  Click on the Generate button. When we click on the Generate button, it starts packing the project in a .zip(spring boot-demo.zip) file and downloads the project. Step 4 : Extract the Zip file Step 5 : Import the project File -> Import -> Maven ->Existing Maven Project -> Next -> Browse -> Select the project -> Finish When the project imports prosperously, we can optically discern the project directory in the Package Explorer. The following image shows the project directory: SpringbootDemo