Composition vs Inheritance in React JS

Shyam Hande
Updated on 28-Aug-2019 09:03:12

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

Lifting State Up in React JS

Shyam Hande
Updated on 28-Aug-2019 08:56:40

724 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

Uncontrolled Component in ReactJS

Shyam Hande
Updated on 28-Aug-2019 08:52:15

449 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

Working with Forms in React JS

Shyam Hande
Updated on 28-Aug-2019 08:45:33

442 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

Working with Lists and Keys in React JS

Shyam Hande
Updated on 28-Aug-2019 08:40:42

583 Views

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

Conditional Rendering in React JS

Shyam Hande
Updated on 28-Aug-2019 08:38:01

391 Views

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

Handling Events in React JS

Shyam Hande
Updated on 28-Aug-2019 08:27:24

606 Views

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

Understanding State in React JS

Shyam Hande
Updated on 28-Aug-2019 08:18:45

448 Views

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

Understanding Components and Props in React JS

Shyam Hande
Updated on 28-Aug-2019 08:15:47

304 Views

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

Rendering Elements in React JS

Shyam Hande
Updated on 28-Aug-2019 08:08:15

788 Views

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

Advertisements