React.js Fundamental Concepts

The virtual DOM

DOM manipulation is the heart of the modern, interactive web unfortunately it also a lot slower than most Javascript operations.

var commnetBox = React.createClass({
render: function(){
return (
<div className = "commentBox">
Hellow, world! I am a commentBox.
</div>
);
}
});

JSX

JSX allows us to write HTML elements in javascript and place them in the DOM without any createElement() and/or appendChild() methods

const myelement = <h1> I Love JSX! </h1>

ReactDOM.render(myelement, document.getElementById('root'));

DefaultProps

Props in React are like function arguments. You can use props to send data to a component.

Like default values for function arguments, props also have default values.

defaultProps can be defined as a property on the component class itself to set the default props for the class

defaultProps is used for undefined props, not for null props.

String Literals

string pass literal a prop two JSX expressions are equivalent

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

pass a string literal, its value is HTML-unescaped so this two jsx

this behavior is usually not relevant. it’s only mentioned here for completeness

Spread Attributes

If you already have props as an object, and you want to pass it in JSX, you can use the spread operator to pass the whole props object

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;}

Children in JSX

in JSX expressions that contain both an opening tag and closing tag, the content between those tags is passed as special props:

props. children, There are several different ways to pass children

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

different types of children, so you can use string literals together with JSX children

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

A React component can also return an array of elements:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Functions as Children

JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}    </Repeat>
  );
}

Booleans, Null, and Undefined Are Ignored

false, null, undefined, and true are valid children

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

This can be useful to conditionally render React elements.

<div>
  {showHeader && <Header />}  <Content />
</div>

Props Default to “True”

If you pass no value for a prop, it defaults to true

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Using Dot Notation for JSX Type

React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;

Thank you so much for reading the article