Browsing: / Home
Shortlink

ReactJS video series – State with React – (Part 2)

By Prabhu Sunderaraman on February 8, 2019 in ,

This is the eighth part of the video series on React JS.

We continue our discussions on the basics of state in React JS. State represents the data model of a component. It’s bound to the UI. Technically, it’s just JSON data. Changing the state data using setState() method invokes the render() method. We have a button in this example, clicking which modifies the state variable, resulting in UI update

The example used in the video is given below 

<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
            
    <body>
        <div id="root"></div>
        <script type="text/jsx">
          class Sample extends React.Component {
              constructor(props) {
                  super(props);
                  this.state = {
                      currentTime: new Date()
                  };
              }

              getCurrentTime() {
                  let currentTime = new Date();
                  //setState method is used to update any item in the state
                  this.setState({
                      currentTime
                  })
              }

              render() {
                  return (<div>
                      <h1>Time now: {this.state.currentTime.toString()}</h1>
                      <button onClick={this.getCurrentTime.bind(this)}>Get Current Time</button>
                  </div>);
              }
          }
          ReactDOM.render(<Sample/>, document.getElementById("root"));  
        </script>
    </body>        
</html>

You can find the video here.

Read and watch the other parts here.

1. Hello ReactJS without JSX
2. Hello ReactJS with JSX
3. Let’s play with JSX – Part I
4. Let’s play with JSX – Part II
5. Creating Components – Part I
6. Creating Components – Part II
7. State with React – Part I
Mixx Delicious Digg Facebook Twitter
Shortlink

ReactJS video series – State with React – (Part 1)

By Prabhu Sunderaraman on February 7, 2019 in ,

This is the seventh part of the video series on React JS.

We discuss the basics of state in React JS. State represents the data model of a component. It’s bound to the UI. Technically, it’s just JSON data.

The example used in the video is given below 

<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
            
    <body>
        <div id="root"></div>
        <script type="text/jsx">
          class Sample extends React.Component {
              constructor(props) {
                  super(props);
                  this.state = {
                      currentTime: new Date()
                  };
              }

              render() {
                  return (<div>
                      <h1>Time now: {this.state.currentTime.toString()}</h1>
                  </div>);
              }
          }
          ReactDOM.render(<Sample/>, document.getElementById("root"));  
        </script>
    </body>        
</html>

You can find the video here.

Read and watch the other parts here.

1. Hello ReactJS without JSX
2. Hello ReactJS with JSX
3. Let’s play with JSX – Part I
4. Let’s play with JSX – Part II
5. Creating Components – Part I
6. Creating Components – Part II
Mixx Delicious Digg Facebook Twitter
Shortlink

ReactJS video series – Creating Components (Accessing UI Components and Event Handling) – (Part 2)

By Prabhu Sunderaraman on January 23, 2019 in ,

This is the sixth part of the video series on React JS.

We discuss accessing UI components and event handling in React JS. Let’s continue with the login form we built in the previous post.

The example used in the video is given below 

<html>

<head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <!--Let's build a login form-->
    <div id="root"></div>
    <script type="text/jsx">
        class LoginForm extends React.Component {

            constructor(props) {
                super(props);
                
                //Works with the latest version of React
                this.username = React.createRef();
                this.password = React.createRef();
            }

            loginButtonClicked() {
                //Access username and password textboxes
                //NOT RECOMMENDED
                // let userName = document.getElementById("username").value;
                // let password = document.getElementById("password").value;

                let userName = this.username.current.value;
                let password = this.password.current.value;
                console.log(userName, password);
            }

            render() {
                return (<div>
                    <input type="text" placeholder="User name" ref={this.username}/>
                    <br/>
                    <input type="password" placeholder="Password" ref={this.password}/>
                    <br/>
                    <button onClick={this.loginButtonClicked.bind(this)}>Login</button>    
                </div>);
            }
        }
        ReactDOM.render(<LoginForm/>, document.getElementById("root"));
    </script>
</body>

</html>

You can find the video here.

Read and watch the other parts here.

1. Hello ReactJS without JSX
2. Hello ReactJS with JSX
3. Let’s play with JSX – Part I
4. Let’s play with JSX – Part II
5. Creating Components – Part I
Mixx Delicious Digg Facebook Twitter
Shortlink

ReactJS video series – Creating Components (Part 1)

By Prabhu Sunderaraman on January 20, 2019 in

This is the fifth part of the video series on React JS.

We discuss creating a component in React JS. We’re building a login form.

The example used in the video is given below 

<html>

<head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <!--Let's build a login form-->
    <div id="root"></div>
    <script type="text/jsx">
        class LoginForm extends React.Component {
            render() {
                return (<div>
                    <input type="text" placeholder="User name" id="username"/>
                    <br/>
                    <input type="password" placeholder="Password" id="password"/>
                    <br/>
                    <button>Login</button>    
                </div>);
            }
        }
        ReactDOM.render(<LoginForm/>, document.getElementById("root"));
    </script>
</body>

</html>

You can find the video here.

Read and watch the other parts here.

1. Hello ReactJS without JSX
2. Hello ReactJS with JSX
3. Let’s play with JSX – Part I
4. Let’s play with JSX – Part II
Mixx Delicious Digg Facebook Twitter
Shortlink

Kotlin Video series – null safety

By Prabhu Sunderaraman on September 5, 2018 in

This is the eleventh part of the video series on Kotlin language.
Read and watch the other parts here.

1. Hello Kotlin
2. Declaring Variables
3. Data Types
4. String (Part 1)
5. String (Part 1)
6. Conditional Expressions
7. Functions (Part I)
8. Functions (Part II)
9. Lambda
10. Range

We discuss null safety in Kotlin language. Kotlin treats nullable and non-nullable references differently. ie., You cannot assign null to references. Compiler doesn’t like it. If you have a reference that can accept null value too, then the question-mark(?) comes into picture. Null comparisons have also been made simple thanks to Elvis operator (?:)

The examples used in the video are given below 

fun main(args:Array<String>){
   var name:String = "Ram"
   //name = null
   //This condition is always true
   if(name != null){
	println(name)
   }
	
   var anotherName:String? = "John"
   if(anotherName != null){
	println(anotherName)
    }
    anotherName = null
    println(anotherName)
	
    println(anotherName?.length ?: -1)
}

Nullable types can be passed to functions and also returned as output

  fun calculateLength(value:String?):Int?{
     return value?.length
  }
  fun main(args:Array<String>){
     println(calculateLength("Joe"))
     println(calculateLength(null))
  }

You can find the video here.

Mixx Delicious Digg Facebook Twitter