Support & Downloads

SQuisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
SCO 18 5th Floor PPR Mall Jalandhar
Punjab 144003 INDIA
[email protected]
+91 730 730 0013
Follow Us

ITEL info

React

Intro to React Part 1

React is a JavaScript library for building user interfaces.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.

A Stateful Component

In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component’s state data changes, the rendered markup will be updated by re-invoking render().

An Application

Using props and state, we can put together a small Todo application. This example uses state to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.

A Component Using External Plugins

React allows you to interface with other libraries and frameworks. This example uses remarkable, an external Markdown library, to convert the <textarea>’s value in real time.

What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

React has a few different kinds of components, but we’ll start with React.Component subclasses:

EXAMPLE

class ShoppingList1 extends React.Component {

  render() {

    return (

      <div className=”shopping-lis1t”>

        <h1>Shopping List1 for {this.props.name}</h1>

        <ul>

          <li>Instagram</li>

          <li>WhatsApp</li>

          <li>Oculus</li>

        </ul>

      </div>

    );

  }

}

// Example usage: <ShoppingList1 name=”Mark” />

We’ll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.

Here, ShoppingList is a React component class, or React component type. A component takes in parameters, called props (short for “properties”), and returns a hierarchy of views to display via the render method.

The render method returns a description of what you want to see on the screen. React takes the description and displays the result. In particular, render returns a React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The <div /> syntax is transformed at build time to React.createElement('div'). The example above is equivalent to:

EXAMPLE:

return React.createElement(‘div’, {className: ‘shopping-list’},

  React.createElement(‘h1’, /* … h1 children … */),

  React.createElement(‘ul’, /* … ul children … */)

);

Post a Comment