home.

tagged: javascript

ReactJS: Updating state

We have state in our component. And we can call this.setState from a click listener to update that state. When we update the state the component with effecticently (using virutaldom) redraw itself and any sub components.
 
this.setState takes a object as argument and its values relate to the property names in your state. It updates them.
 
We can call this from a onClick attribute on a HTML tag. The onClick's value is within curly bracked and the javascript is within: onclick={() => console.log("i am some javascript")}
 
We will change our style in our div object so it changes based on a clicked variable in our state.

<html>
  <head>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">

    class Hello extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: props.name,
          clicked: false,
        };
      }
      render() {
        return (
          <div style={{display: "flex", flexDirection: "row"}}>
            <div style={{color: (this.state.clicked) ? "lightgreen" : "blue" }}>Hello {this.state.name}!</div>
            <button onClick={() => this.setState({clicked: true})}>on acid</button>
          </div>
        );
      }
    }

    ReactDOM.render(
      <div>
        <Hello name="Davey dave dave" />
        <Hello name="Chris" />
        <Hello name="Ahmed" />
        <Hello name="Peter" />
      </div>,
      document.getElementById('root')
    );
  </script>
</html>

javascript reactjs


ReactJS: Component state

ReactJS component's state is set in the constructor, by setting the state property.
 
You call the super constructor too. The constructor takes in the props passed to the component.
 
You refer to this by this.state.PROPERTY_NAME.
 
This is better than than using the this.props directly because you can later use setState to update the component and dependent components using this state.
 
We'll look at setState next.

<html>
  <head>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">

    class Hello extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: props.name + "!",
        };
      }    
      render() {
        return (
          <div style={{display: "flex", flexDirection: "row"}}>
            <div>Hello {this.state.name}!</div>
            <button>on acid</button>
          </div>
        );
      }
    }

    ReactDOM.render(
      <Hello name="Davey dave dave" />,
      document.getElementById('root')
    );  
  </script>

reactjs javascript


ReactJS: Sending props to elements

You can send the value of attributes to reactjs components.
 
You use a normal HTML attribute and in your component you access it by {this.props.your_attribute_name}.
 
For example:

<html>
  <head>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">

    class Hello extends React.Component {
      render() {
        return (
          <div>Hello {this.props.name}!</div>
        );
      }
    }

    ReactDOM.render(
      <Hello name="Davey dave dave" />,
      document.getElementById('root')
    );  
  </script>
</html>


reactjs javascript


ReactJS: Getting started part 2

We need to create a reactjs component. We do this in a text/babel script since we're using javascript ES6 features and JSX.

class Hello extends React.Component {
  render() {
    return (
      <div>Hello!</div>
    );
  }
}

We create a javascript class that extends React.Component and give it a render function that returns some JSX. In this case we're returning a simple div.
 
Once we've created that we call ReactDOM.render with the HTML, in this case our new Hello tag, and as a second paramter we have the root div in the HTML body:

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);  

Here's all the code:

<html>
  <head>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">

    class Hello extends React.Component {
      render() {
        return (
          <div>Hello!</div>
        );
      }
    }

    ReactDOM.render(
      <Hello />,
      document.getElementById('root')
    );  
  </script>
</html>

javascript reactjs


ReactJS: Getting started without npm etc

If you want to use ReactJS without setting up a build change, you can directory import the javascript files from a CDN. Obviously when you go live you'll want to change this.

<html>
  <head>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
  </head>
  <body>
    Hello there
  </body>
</html>

reactjs javascript

Page 2 of 12
prev next