React Training
  • React JS Library
  • Roadmap
  • Training OutLine
  • React js basics
    • Understanding React JS
    • React JS a framework?
    • Setting Up React
    • Say Hello to React
    • Everything is a Component
    • Create-react-app
  • React Building Blocks
    • JSX and Babel
    • One Way Data Flow
    • Virtual DOM
    • V of MVC
    • React Terminology
    • React Tooling
  • Day 01
    • Day 01 OutLine
    • All About JSX
    • React Tools/ npm & webpack
    • Introduction of Webpack
    • Hello world using webpack
      • Webpack Setting up with React
    • NPM Scripts | Package JSON
      • Package.json file
    • React JS Principles
      • One Way Data Flow
      • V of MVC
      • Virtual DOM
    • Create React App - Part-1
    • Create React App - Part-2
  • Day 02
    • Quick Recap
      • Quiz
    • State & Props
      • State & Props in Depth
      • State Vs Props | Compare
    • React LifeCycle Methods
      • React LifeCycle Methods for V-0.16 x
    • Constructor | Lifecycle
    • Write Flicker App | First App
  • Day 03
    • Quick Recap
    • Life Cycle Flow
      • Birth and Mounting
      • Initlization and Construction
      • Pre Mounting
      • Render Method
      • componentDidMount
    • Type of React Components
      • Examples- Quick Compare
      • Class and Functional components
      • Functional Components
    • YouTube application
      • Component Design
    • All in One LifeCycle
  • Assignment
    • React App development
  • Day 04
    • Quick Recap on Lifecycle
    • Lifecycle deprecated/New Methods
      • New Lifecycle Methods
    • Lets Build App Netflix | Mock
  • Assignment
    • Github battle App | Assignment
  • Day 05
    • Quick Recap : Hooks
    • ES6 Features | Hands-on
      • ES6 Code Examples
    • Next Stop - React Router | SPA
      • Code examples | Router
      • React Router Building Blocks
      • Application using react-router-dom
  • Day 06
    • Router V4 | Quick Recap
    • ES2015 | 16 Quick Recap
    • LifeCycle Methods -Part-1
    • LifeCycle Methods -Part-2
  • Day 07
    • Quick Recap | New Lifecycle
    • Quick Recap | React Routing
    • Context API | React JS
      • component with context APIs
      • Context API | examples
    • App using Hooks/Context APIs
  • Assignment
    • Assignments
  • State Management Day-08
    • Quick Recap
    • Managing React State
      • What is Redux
      • Understanding Redux
      • Hello World "Redux"
  • React Redux Day - 09
    • Redux State Manager
    • Redux Redux Development
    • Simple Application | Redux
  • Redux Live Application Day -10
    • Redux with existing Application
      • Redux with React App
      • Lets Build More Apps
      • Should I use Redux from Dan
    • Quick Look at JS in React
    • Learn By Reading
  • miscellaneous Items - Day 11
    • Hooks useReducer
    • Hooks useContext
    • Hooks useRef
    • Hooks useEffect
    • Hooks useState
    • Lazy Loading and code splitting
    • Styling React Component
  • React Next Step - Day 12
    • Topics
    • Jest and Enjyme Testing
    • Examples: Testing
  • React Native
    • What is React Native
    • Setting up Environment
      • Linux Systems
    • React Native Hello World App
    • React Native Architecture
    • React Native Vs Native
    • Expo Cli or React Native CLI
  • React Native core Fundamental
    • React Native "Hello World"
    • Course OutLine
    • Getting started with Expo App
    • Layout with Flexbox
    • Working with Styles and Events
    • Manging Component State and Props
    • Build Simple Task List Application
  • What to Debug & How to Debug
    • Debug React Native Application
Powered by GitBook
On this page

Was this helpful?

  1. React js basics

Everything is a Component

How do we Create Components? 💻

What are Components?

Lets hear what the creators of React have to say about components.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Well that doesn’t provide much information! 😕

They really meant that:

  • React components are the core building blocks of a React application that represent how a particular element would be visualized on the User Interface.

  • Combining tens to thousands of components together makes up your application.

  • A component must be designed in a way that makes it reusable across any page or even projects.

  • A component may be responsible for performing a single task (if any).

A button or an input component for example has a single responsibility of allowing the user to perform an action or type input via their keyboard or keypad respectively.

React provides us with HTML elements as components out-of-the-box, they work and behave the same way as we expect them to work in HTML.

React provides us with two ways to create components:

  1. ES6 Class

  2. Functions

Both the techniques are responsible for returning a React element. These elements can then be used across various pages to define how the UI will be displayed to the end user.

Identifying Components 🔎

Class Component

Class components as its name suggests are created using the ES6 class syntax. The following snippet displays two ways of creating a component using the ES6 class syntax (follow which every you like, there is no benefit of using one syntax over the other).React component created using ES6 class syntaxReact component created using ES6 class syntax and named import statement

The code is simple to understand. Every class that extends the React.Component class is obligated to implement the render() method which returns a React element. This element is then applicable to be displayed on the User Interface.

Class components are also known as Stateful components.

import React, { Component } from 'react';

export default class Button extends Component {
  render() {
    return <button>Sign up</button>;
  }
}

Example time

Lets start by creating a simple button component such as the cool one shown above (just not with styles since that a complex topic to dive into and I don’t want your attention to drift away from components). The code for creating the uncool-unstyled-button is as:A button component implemented using ES6 class

See how simple it is to create a component. All you have to do now is use this component anywhere in your project and there you go, it renders on the user interface as you wanted it to.

Function Component

If the name wasn’t enough, a function component is created using a JavaScript function (anonymous, named, arrow). The following snippets displays three ways of creating a function component (again there are no perks of using one over the other).Function component using an anonymouse functionFunction component using a named functionFunction component using an arrow function

import React from 'react';

function paragraph(props) {
  return <p>This is a another paragraph component</p>;
}

export default paragraph;

A simple difference when compared with class components is that you don’t need the React.Component class to work with function components. The React element returned by the function is visualized on the User Interface.

Function components are also referred as Stateless components.

PreviousSay Hello to ReactNextCreate-react-app

Last updated 6 years ago

Was this helpful?