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 Building Blocks

React Terminology

some terms which we will see in all videos

PreviousV of MVCNextReact Tooling

Last updated 6 years ago

Was this helpful?

Below I list the most common terms, and their definitions, used when talking about React.

Babel

transforms JavaScript ES* (i.e., JS 2016, 2016, 2017) to ES5. Babel is the tool of choice from the React team for writing future ES* code and transforming JSX to ES5 code.

Babel CLI

Babel comes with a CLI tool, called , that can be used to compile files from the command line.

Component Configuration Options (a.k.a, "Component Specifications")

The configuration arguments passed (as an object) to the React.createClass() function resulting in an instance of a React component.

Component Life Cycle Methods

A sub group of component events, semantically separated from the other component configuration options (i.e., componentWillUnmount, componentDidUpdate, componentWillUpdate, shouldComponentUpdate, componentWillReceiveProps, componentDidMount, componentWillMount). These methods are executed at specific points in a component's existence.

Document Object Model (a.k.a., DOM)

"The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects, possessing various properties and methods. Nodes can also have event handlers attached to them, and once an event is triggered, the event handlers get executed. Essentially, it connects web pages to scripts or programming languages." -

ES5

The 5th edition of the ECMAScript standard. The was finalized in June 2011.

ES6/ES 2015

The 6th edition of the ECMAScript standard. A.k.a, JavaScript 2015 or ECMAScript 2015. The was finalized in June 2015.

ECMAScript 2016 (a.k.a, ES7)

The 7th edition of the ECMAScript standard. The was finalized in June 2016.

ES*

Used to represent the current version of JavaScript as well as potential future versions that can written today using tools like Babel. When you see "ES*" it more than likely means you'll find uses of ES5, ES6, and ES7 together.

JSX

Node.js

npm

React Attributes/Props

In one sense you can think of props as the configuration options for React nodes and in another sense you can think of them as HTML attributes.

Props take on several roles:

  1. Props can become HTML attributes. If a prop matches a known HTML attribute then it will be added to the final HTML element in the DOM.

  2. Props passed to createElement() become values stored in a prop object as an instance property of React.createElement() instances (i.e., [INSTANCE].props.[NAME OF PROP]). Props by and large are used to input values into components.

React

React Component

A React component is created by calling React.createClass() (or, React.Component if using ES6 classes). This function takes an object of options that is used to configure and create a React component. The most common configuration option is the render function which returns React nodes. Thus, you can think of a React component as an abstraction containing one or more React nodes/components.

React Element Nodes (a.k.a., ReactElement)

An HTML or custom HTML element node representation in the Virtual DOM created using React.createElement();.

React Nodes

React nodes (i.e., element and text nodes) are the primary object type in React and can be created using React.createElement('div');. In other words React nodes are objects that represent DOM nodes and children DOM nodes. They are a light, stateless, immutable, virtual representation of a DOM node.

React Node Factories

A function that generates a React element node with a particular type property.

React Stateless Function Component

When a component is purely a result of props alone, no state, the component can be written as a pure function avoiding the need to create a React component instance.

var MyComponent = function(props){
    return <div>Hello {props.name}</div>;
};

ReactDOM.render(<MyComponent name="doug" />, app);

React Text Nodes (a.k.a., ReactText)

A text node representation in the Virtual DOM created using React.createElement('div',null,'a text node');.

Virtual DOM

An in-memory JavaScript tree of React elements/components that is used for efficient re-rendering (i.e., diffing via JavaScript) of the browser DOM.

Webpack

is an optional XML-like syntax extension to ECMAScript that can be used to define an HTML-like tree structure in a JavaScript file. The JSX expressions in a JavaScript file must be transformed to JavaScript syntax before a JavaScript engine can parse the file. Babel is typically used and recommended for transforming JSX expressions.

is an open-source, cross-platform runtime environment for writing JavaScript. The runtime environment interprets JavaScript using .

is the package manager for JavaScript born from the Node.js community.

A few special props have side effects (e.g., , , and )

is an open source JavaScript library for writing declarative, efficient, and flexible user interfaces.

is a module loader and bundler that takes modules (.js, .css, .txt, etc.) with dependencies and generates static assets representing these modules.

Need to take a few steps back and figure out javascript and how you can use it?

Babel
Babel CLI
MSD
ECMAScript 5.1 edition
ECMAScript 6th edition
ECMAScript 7th edition
JSX
Node.js
Google's V8 JavaScript engine
npm
key
ref
dangerouslySetInnerHTML
React
Webpack
what is react