[React Fundamentals] Introduction to Properties

This lesson will teach you the basics of setting properties in your React components.

class App extends React.Component {
  render(){
    let txt = this.props.txt
    return <h1>{txt}</h1>
  }
}

App.propTypes = {
  txt: React.PropTypes.string,
  cat: React.PropTypes.number.isRequired
}

App.defaultProps ={
  txt: ‘this is the default txt‘
}

ReactDOM.render(
  <App cat={5} />,
  document.getElementById(‘app‘)
);
时间: 2024-08-09 02:04:27

[React Fundamentals] Introduction to Properties的相关文章

[React Fundamentals] Accessing Child Properties

When you're building your React components, you'll probably want to access child properties of the markup. In Angular, it is transcludion: <div> <ng-transculde></ng-transclude> </div> In React, it is: {this.props.children} It means

[React Fundamentals] State Basics

State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components. Unlike props, which are meant to be passed into our component as s

[React Fundamentals] Using Refs to Access Components

When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref. Notice: 'ref' only works in class component, not in statless component. If we don't add "ref", three

[React Fundamentals] Owner Ownee Relationship

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship. import React from 'react'; export default class App extends React.Component { constructor(){ super(); //This

[React] React Fundamentals: Integrating Components with D3 and AngularJS

Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3. A app with React and D3.js: /** @jsx React.DOM */ var App = React.createClass({ getInitialState: function () { re

[React] React Fundamentals: with-addons - ReactLink

It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how thi

[React Fundamentals] Composable Components

To make more composable React components, you can define common APIs for similar component types. import React from 'react'; import ReactDOM from 'react-dom'; export default class App extends React.Component{ constructor(){ super(); this.state = { re

[React Fundamentals] Component Lifecycle - Updating

The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that. import React from 'react'; import ReactDOM from 'react-dom'; export default class App extends React.Component { constructor(){

[React Fundamentals] Component Lifecycle - Mounting Usage

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks. import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { con