Front End Technology Articles - Page 517 of 860

Displaying a list on UI in ReactMap is JavaScript function which will return a new array for provided array as shown below −const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers);Building a list in React is similar with the use of map function. Instead of just returning a square number , we will return a list element with value of square.const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbersList= originalNumbers.map((number) =>    {number*number} );Render on the screen with ui tag −ReactDOM.render(    { squaredNumbersList },    document.getElementById('root') );When ... Read More

Using conditional statements specific components can be rendered and removed . Conditional handling works similarly in JavaScript and React.jsExamplefunction DisplayUserMessage( props ){    const user = props.user.type;    if(type==’Player’){       return Player ;    }    If( type==’Admin’){       Return Admin ;    } }If statement is used in above example. Type of user decides which message to return.Local state of component is useful in deciding the conditional rendering as state is flexible to change inside the component.Inline if with logical && operatorfunction MessageSizeChecker(props) {    const message = props.message;    return (       ... Read More

There are some syntactical differences in writing events but it is handled similar to DOM elements event handling.The name of event handlers are written in camel case notations.ExampleEvent in simple html −    Add User Event in React with jsx:    Add User One of the difference is we do not write return false to prevent default behavior in React. Instead of that we specifically write event.preventDefault()ExampleIn simple Html −    Add User In React it will be written as −function addUser(event){    event.preventDefault();    console.log(‘Add user event clicked’); }    Add User Here event passed in ... Read More

State and lifecycle of component is very powerful to make things work in a dynamic applications.StateState is generally used in Stateful component. With the introduction of hook, we can add state in functional component as well now . The name of the hook is useState.State is a JavaScript object which can be changed by user actions and adds dynamism to UI. Updating the data from server with the use of state is common use case.Difference between state and props −As we know props is a properties JavaScript object which hold information passed as an attribute to the component.Props value are ... Read More

React applications are made up of components. Component are generally uses react elements. Components can be independent, reusable pieces.There are two types of components −Stateless component ( Basically JavaScript functions )Stateful component ( Uses JavaScript class feature )Both the components types receives a proprieties object generally called as props.Stateless component has a return statement in function and Stateful component has a render method which returns react elements.Simple react element to display on the page is −const message=Hello; ReactDOM.render( message, document.getElementById(‘root’) );It displays the Hello message on the screen.Creating a functional component −function Message(props){    return (       ... Read More

The smallest building blocks of React applications are the elements. Example of an element is −const message = Welcome, Steve;React DOM updates the actual DOM with the converted react elements. React components are made up of elements.Rendering element on DOMWe will have a parent div element in the main html file . This div can be called as root. ReactDOM manages everything which is inside the app div. We can add multiple such an isolated div in applications if required.To render the element it will be passed to the ReactDOM render method −const message = Welcome, Steve; ReactDOM.render(message, document.getElementById('app'));This will ... Read More

JSX is like a template language with Power of JavaScript. It helps in creating the react elements. It’s an extension of JavaScript to include UI elements.Examplelet message = Hello World ;h1 tag is known html tag but with jsx we have created a variable containing the h1 tag with a hello world message.Usefulness of jsxThough it’s not mandatory to use jsx to create react elements. But its visibly appealing and helps in understanding the code in easy way. React embraces the concept of keeping UI logic and rendering logic together.We can build different loosely coupled components for separation of concernsExpression ... Read More

create-react-app is a command to create a React.js project with default configuration. Create-react-app will help in running react applications. Command will be executed on npm or yarnIf npm and node.js is installed on computer, install create-react-app globally with command −npm install –g create-react-appCreation of project − to create a project once above commands are executed, run below command −npx create-react-app hello-world-examplenpx comes with npm version 5.2+ , npm version can be checked on terminal using npm –versionIf npm version is 5.2+, then react.js project can be directly created with command −npx create-react-app hello-world-exampleIf npm version is 6+, npm init react-app ... Read More

Regular functions vs Arrow functionsAn arrow function is used to write the code concisely. Both functions regular and arrow work in a similar manner but there are some differences between them. Let's discuss those differences in a nutshell.syntax of an arrow functionlet x = (params) => { // code };syntax of a regular functionlet x = function functionname(params){ // code };Usage of "this" keywordIt is unable to use "this" keyword in arrow functions whereas in regular functions it can be used without any disturbance.ExampleIn the following example, both regular(rectangle) and arrow(square) functions were used inside the object "num", which consists of len(length) ... Read More

This article discusses about \d vs\ D in JavaScript regex. The \d and \D meta characters are used to match the characters of a given string. \d and \D are different from each other. \d (character) is equivalent to [0-9] that means it matches any single number. The characters that are not matched by the \d are matched by the \D. \D is equivalent to [^0-9] that means it matches any character other than number. Both \d and \D are completely inverse to each other. To match a string with a pattern, the possible methods are: string.match(pattern), string.search(pattern), pattern.exec(string), pattern.test(text). ... Read More