Quick Dive into ReactJS

As software developers, we are always looking for libraries and tools that aids productivity. Ever since NodeJS unleashed the back side of javascript. Frameworks, Libraries and Modules has been released in the recent years. ReactJS is one of them, Let’s quickly go through what ReactJS and its key concepts.

Introduction
ReactJS is a JavaScript library built by a group of engineers at Facebook and Instagram for building user interfaces for web and mobile apps. Read the Docs

ReactJS is often mentioned in the same breath as other Javascript frameworks, but “React vs Angular” doesn’t make sense because they aren’t directly comparable things. Angular is a complete framework (including a view layer), React is not. This is why React is so confusing to understand, it’s emerging in an ecosystem of complete frameworks, but it’s just the view.

ReactJS gives you a template language and some function hooks to essentially render HTML. See React as HTML inside Javascript which brought about JSX(Javascript XML) we’ll discuss more on that later.
ReactJS allows us to create reusable UI components and its also very easy to test. It is currently one of the most popular JavaScript libraries and has often led the field in performance and adoption of new design patterns.

Let’s discuss this concept

1. Components.
2. JSX.
3. Props & State.

#1: Components

The first thing you need to know about React is that it’s all about components. Your React codebase is basically just one large pile of big components that contains smaller components.

But what’s a component, you ask?

A React component is a single object that not only outputs HTML like a traditional template would, but also includes all the code needed to control that output.

Let write a simple react component using ES6. We write a class that consist of a render method that returns HTML.

class MyComponent extends React.Component {
    constructor() {
        // define application state
    }
    doSomething() {
        //write a function to perform an action
    }
    render() {
        return <p>Hello World!<p>;
    }
}

#2: What is JSX

As you can see, the component approach means that both HTML and JavaScript code live in the same file. React’s secret weapon to achieve this unholy alliance is the JSX language(where “X” stands for “XML”).

JSX might seem awkward at first, but you get used to it pretty fast.

Yes, I know. We’ve all been taught to maintain a strong separation between HTML and JavaScript. But it turns out that relaxing these rules a bit can actually do wonders for your front-end productivity.

For example, since you now have the full power of JavaScript at your disposal, here’s how you can display the current time by inserting a snippet of JavaScript in your HTML using {...}

class MyComponent extends React.Component {
  constructor() {
      // define application state
  }
  doSomething() {
     //write a function to perform an action
  }
  render() {
    return <p>Time is {new Date().toTimeString().split(" ")[0];}<p>;
    }
}

#3: How Props & State work

if you’ve ever written a line of HTML, you’re probably familiar with HTML attributes like the <a> tag’s href. In React, attributes are known as props (short for “properties”). Props are how components talk to each other.

class ParentComponent extends React.Component {
  constructor() {
    this.state = {
    userinput = ''
  }
  render() {
    return <ChildComponent message="Hello World"/>;
  }
}
class ChildComponent extends React.Component {
  render() {
    return <p>And then I said, “{this.props.message}”</p>;
  }
}

Because of this, React’s data flow is unidirectional: data can only go from parent components to their children, not the other way around.

Sometimes though, a component needs to react to data that doesn’t come from a parent component (such as user input for example). And this is where the state comes in.

State is not an inherent property of the component. It’s just the temporary store for the component.

In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState(), They are referred to has Controlled Components

Let’s quickly go through the below code.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
      <label>
        Name:
      <input type="text" value={this.state.value}    onChange{this.handleChange} />
     </label>
     <input type="submit" value="Submit" />
     </form>
     );
  }
}

The render method consist of a form element that has an input field and also a submit button below, The input field has the onChange function that takes in handleChange , this method takes in event as a parameter which happens to be the DOM event handler, and gets the result from event.target.result , setState() is one of the component API methods which is use to update state value, with this as a user types into the input field, the value will be updated in state. Then we have another method which is handleSubmit , it connect to the onSubmit function to the form, i.e its been called when the form is submitted. You can run this code out on JSFiddle or CodePen

Recap

So let’s recap what we’ve just learned:

A React codebase is made up of components.

These components are written using JSX.

Data flows from parent to children, except when it comes to state, which originates inside a component.

Difference between Props & State

Controlled Components

Conclusion

To move further there are lots of resources to help you develop your skills as a ReactJS Developer, here are few ones i will suggests.

React For Beginners by WesBos’s Course

Building Applications with React and Redux in ES6 by Cory House