- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 198 Articles for React JS
2K+ Views
LETS SEE HOW TO CREATE SIMPLE REACT FUNCTIONAL COMPONENTComponents are building blocks of React library. There are two types of components.Stateful componentStateless componentStateful component has a local state object which can be manipulated internally.Stateless component does not have a local state object but we can add some state using React hooks in it.CREATE A SIMPLE ES6 FUNCTIONconst player = () => { }Here we used a const keyword to function name so that it does not get modified accidentally. Let's add a return statement with some jsx code.const player = () => { return ( I'm ... Read More
326 Views
Some basics of react routingReact-router is the main library and react-router-dom and react-router-native are the environment specific libraries. React-router-dom is used in browser based web applications generally. react-router-native is used in mobile based applications which can be developed using react-native.To install it use command npm install –save react-router-domThere are two types of router in case of web applications.BrowserRouterHashRouterThe difference between the two router types are visible in the way they formulate the URLs.e.g. http://hello.com/about => BrowserRoutere.g. http://hello.com/#/about => HashRouter (uses hash in it)BrowserRouter is more popular and it uses html5 history API to keep track of locations.HashRouter supports the legacy ... Read More
2K+ Views
There are multiple ways to add bootstrap in react project.Using bootstrap CDNInstalling bootstrap dependencyUsing react bootstrap packagesUsing bootstrap CDNThis is the simplest way to add bootstrap. Like other CDN, we can add bootstrap CDN in index.html of the react project.Below is one of the react CDN urlIf we need the JavaScript components of bootstrap then we should add the jquery, popper.js in the index.htmlWith this the complete index.html will look like − React App hello Adding bootstrap dependencynpm install bootstrap ... Read More
199 Views
We bundle the files in React application using tool such as webpack. Bundling in the end merges the files in the sequence of their imports and creates a single file.The problem with this approach is that the bundle file gets larger with the increase in files. User may not be sung all the feature components but still bundle is loading them, this could affect the loading of application.To avoid this, code splitting is used in React.ExampleExample of bundling −// app.js import { total } from './math.js'; console.log(total(10, 20)); // 42 // math.js export function total(a, b) { return a ... Read More
311 Views
The aria-* attributes on html elements are also supported in React.js as well. The other attributes are generally written in camel-case but these aria-* are written in hyphen-cased.Sometimes we break the semantics of the html if we use parent div in React.jsExamplerender(){ return( Test ); }Div can cause semantics issue if working with table, list etc. To avoid this we can use React provided fragment as shown below −import React, { Fragment } from ‘react’; function MessageList({ message }) { return ( ... Read More
443 Views
React community has provided a direction on how to think in React way and build big , fast and scalable applications. React has reached multiple platforms and widely used a popular JavaScript UI interface library.Step 1 − Creating a simple mock serviceIf we need to make a server call and fetch data. We can create a mock service to start with and build a component to fetch and display data.Here we can include the processing of json in component and evaluating the expected result.Step 2 − Break the functionality into smaller componentsThe first Thing React suggest is to create the ... Read More
2K+ Views
Composition and inheritance are the approaches to use multiple components together in React.js . This helps in code reuse. React recommend using composition instead of inheritance as much as possible and inheritance should be used in very specific cases only.Example to understand it −Let’s say we have a component to input username.Inheritanceclass UserNameForm extends React.Component { render() { return ( ); } } ReactDOM.render( < UserNameForm />, document.getElementById('root'));This sis simple to just input ... Read More
519 Views
Often there will be a need to share state between different components. The common approach to share state between two components is to move the state to common parent of the two components. This approach is called as lifting state up in React.jsWith the shared state, changes in state reflect in relevant components simultaneously. This is a single source of truth for shared state components.ExampleWe have a App component containing PlayerContent and PlayerDetails component. PlayerContent shows the player name buttons. PlayerDetails shows the details of the in one line.The app component contains the state for both the component. The selected ... Read More
330 Views
In controlled component form data is handled by React component by writing event handler for state updates. But in uncontrolled component, form data is handled by DOM itself.ref is used to receive the form value from DOM.Exampleclass UserNameForm extends React.Component { constructor(props) { super(props); this.handleFormSubmit = this.handleFormSubmit.bind(this); this.inputUserName = React.createRef(); } handleFormSubmit(event) { console.log('username: ' + this.inputUserName.current.value); event.preventDefault(); } render() { return ( ... Read More
263 Views
In simple html form, the form elements keeps value with it internally and submit on form submission button.Example Form Example User Name: In above example, we have a simple input called username and we can receive its value on form submission. The default behavior of html form is to navigate to new page i.e. the post form submission page.But it can give more advantage if we have a form submission handler JavaScript function which can validate the form data as ... Read More
To Continue Learning Please Login
Login with Google