Posts

Showing posts with the label ReactJS

ReactJS - Components

Image
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

ReactJS - JSX

Image
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> ); }

React JS + Node JS + Express + MongoDB CRUD - MERN stack development example

Image
Hello everyone, today we will learn how to develop a MERN stack web application that is a basic User Management Application using MongoDB, Express, React JS, Node JS, and AdminLTE. GitHub repository link is provided at the end of this tutorial. You can download the source code.     Following technologies stack being used: Back-End: Node JS Express JS Mongo DB Front-End: React JS AdminLTE react-router-dom 5+ axios 0.19.2 bootstrap   Project Structure   Back-End:     Front-End:   After completing this tutorial what we will build?   1)We will build a MERN-stack web application that is a basic User Management  Application with CRUD features:  • Create User  • List User  • Update User  • Delete User    AND   2)How to integrate Admin Template In ReactJS?   Following is the screenshot of our application -   MERN stack App development   We will build two projects:  Node JS+Express JS: Back End React JS+AdminLTE: Front End   Project 1:BackEnd package.json { "name" : "