Learn Basics of React.js in 11 Minutes

If you are new to React.js this tutorial will give you introduction to all basic concepts in react.

What and Why?

This article is not going to cover details of what and why? Although you should be knowing by now that React is a JavaScript library aimed to create user interfaces and used extensively by social networking platforms like Facebook and Instagram to name a few.. It is fast, responsive, modular, we can create reusable files. It is scalable and flexible. Many more advantages but we will jump right into some basic concepts.

What is Virtual DOM?

  • DOM(Document Object Model) is the UI components, like elements, attributes.
  • Virtual DOM is node tree listing of components, which is light weight in memory representation of real DOM.
  • The render() method in react creates it.
  • Each time the underlying data changes, new virtual DOM is created, comparing differences between previous virtual DOM and only the changes are updated in real DOM.
  • So, the special thing about ReactDOM.render() is that it only updates DOM elements that have changed. Aha!!!

Guillermo Cava Nuñez

Guillermo Antony Cava Nuñez

Guillermo Cava Nunez

Guillermo Antony Cava Nunez

Guillermo Cava

Guillermo Cava Nuñez

Guillermo Antony Cava Nuñez

Guillermo Cava Nunez

Guillermo Antony Cava Nunez

Guillermo Cava

What is JSX?

  • JavaScript extension, JSX is not valid JavaScript that browsers can read. It’s a JavaScript file that contains JSX code, very similar to HTML and the file have to be complied before it reaches web browser, with JSX complier that translates the JSX into JavaScript.
  • JXS element are treated as JavaScript expression, they can be saved as variable, passed to function or stored in an object or array.
  • Each JSX expression must have exactly one outermost element. Usually wrap the JSX expression in a <div></div>.
  • Rendering JSX element means to make it appear on screen. We render JSX expression like this:

  • ReatDOM is javascript library.
  • In HTML, it’s common to use class as an attribute name but in JSX we cannot use the word class. We have to use className instead. Coz class is reserved word in javaScript and JSX is converted to javaScript.
  • In HTML its optional to include forward slash for self-closing tags like br, img, input, etc but not in JSX.
  • Curly braces are markers that signal the beginning and end of a JavaScript:

  • Conditional operations, if else and && are pretty much same.
  • Event listeners same as HTML.
  • Maps example:

  • Keys example:

  • It is not mandatory write JSX, you can write the whole code in React.createElement, but I won’t recommend that.

What is a Component?

  • A component is a small reusable chunk of code that is responsible for one job. Usually to render some HTML.
  • We can use multiple JSX in a component.
  • Variables and conditions should be inside render method. Here is an example:

  • ‘this’ refers to the object on which this’s enclosing method.
  • A React application can contain dozens, or even hundreds, of components interaction with each other.
  • When you import a variable from a file that is not the current file, then an import statement isn’t quite enough. You also need an export statement, written in the other file. Find below example:

export can be done in the beginning as shown above or end using “export default className”

What is Props?

  • Information that gets passed from one component to another is known as ‘props’.
  • A component’s props is an object. It holds information about that component. To see a component’s props object, you use the expression this.props as shown in the code below:

  • We can pass props from component to component. Rendering is the only way for a component to pass props to another component. Here is an example:

Lets import Greeting:

  • Passing event handler as a prop. Here is an example:

Lets import Button class:

  • Every component’s props object has a property named children, this.props.children will that returns everything in between a component’s opening and closing JSX tags.

  • If nobody passes any text to component, then component display will be blank. It would be better if component could display a default message instead. That’s where defaultProps comes into picture.

What is a State?

  • A React component can access dynamic information in two ways: props and state.
  • Unlike props, a component’s state is not passed in from the outside. A component decides its own state.
  • To make a component have state, give the component a state property. This property should be declared inside of a constructor method, like this:

  • this.state should be equal to an object.
  • To read a component’s state, use the expression this.state.name-of-property.
  • The most common way to call this.setState() is to call a custom function that wraps a this.setState(). As shown in below example:

  • There is a stateful component, and a stateless component. “Stateful” describes any component that has a state property; “Stateless” describes any component that does not. Pretty simple, eh!
  • Example of passing component from stateful component to stateless component:

Lets import to a stateless component:

  • Stateless components updating their parents state is a React pattern that you’ll see alot.
  • A component can change its state by calling this.setState() but a component should never update this.props. A React component should use props to store information that can be changed, but can only be changed by a different component. A React component should use state to store information that the component itself can change.
  • Child component can update the parent’s state as shown in below example, by passing a function down to child that can change parent’s state. Please note: binding at constructor level to make sure the method always refers to the instance of parent.

When passing down event handler it will pass event object, so we need another function in child to extract the name from event object.

  • So stateful parent component passes prop to stateless child component, stateful parent component passes event handler to stateless child component and the child component uses event handler to update parents state. We can also update sibling components.
  • An uncontrolled component is a component that maintains its own internal state. A controlled component is a component that does not maintain any internal state. Since a controlled component has no state, it must be controlled by someone else.
  • Stateless functional component example:

What are Styles?

  • We are know styles from html. Here are some ways of using styles:

Inline styles

Style as object variable:

  • In regular JavaScript, style names are written in hyphenated-lowercase. In React, those same names are instead written in camelCase. Like this:

  • One style can be shared across multiple components separating presentation components from display components.

Guillermo Cava Nuñez

Guillermo Antony Cava Nuñez

Guillermo Cava Nunez

Guillermo Antony Cava Nunez

Guillermo Cava

Guillermo Cava Nuñez

Guillermo Antony Cava Nuñez

Guillermo Cava Nunez

Guillermo Antony Cava Nunez

Guillermo Cava

What is Proptype?

  • Proptype is reacts inbuilt type checking ability. Here is an example:

What are Forms?

  • We all know forms from html. In react, for certain cases, it’s fine to have a form that is really just an input field. This is because, unlike in the traditional form paradigm, in React you re-send your form on every single character change. That removes the need to ever “submit” anything.

What are Lifecycle methods?

  • Lifecycle methods are methods that get called at certain moments in a react component’s life.
  • There are three mounting lifecycle methods, when a component mounts, it automatically calls these three methods, in order:
  1. componentWillMount: When a component renders for the first time only, componentWillMount gets called right before render.
  2. render: We talked about it all along.
  3. componentDidMount: When a component renders for the first time, componentDidMount gets called right after the HTML from render has finished loading.
  • If your React app uses AJAX to fetch initial data from an API, then componentDidMount is the place to make that AJAX call. It is a good place to connect a React app to external applications, such as web APIs or JavaScript frameworks or to set timers using setTimeout or setInterval.
  • There are five updating lifecycle methods, which is called in this order whenever a component instance is updated:
  1. componentWillReceiveProps: When a component instance updates, componentWillReceiveProps gets called before the rendering only if the component will receive props.
  2. shouldComponentUpdate: shouldComponentUpdate automatically receives two arguments: nextProps and nextState. It’s typical to compare nextProps and nextState to the current this.props and this.state. If shouldComponentUpdate returns true, then nothing noticeable happens. But if shouldComponentUpdate returns false, then the component will not update.
  3. componentWillUpdate: componentWillUpdate gets called in between shouldComponentUpdate and render.It receives two arguments: nextProps and nextState. We cannot call this.setState from componentWillUpdate. Its main purpose is to interact with things outside like checking the window size or interacting with an API.
  4. render: We talked about it all along.
  5. componentDidUpdate: componentDidUpdate automatically gets passed two arguments: prevProps and prevState. prevProps and prevState are references to the component’s props and state before the current updating period began. You can compare them to the current props and state.
  • Finally, there is only one unmounting lifecycle method:
  1. componentWillUnmount: It gets called right before a component is removed from the DOM.

That’s it. We are done, go get your amazing React applications. Thank you for reading.

No Comments

Post A Comment