Learning React

Some reference material noted while learning React GitHub repo

The HelloWorld class

Lets start with the most basic of classes, Hello World! It has a constructor and outputs

import React, {Component} from 'react';
class HelloWorld extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <>Hello World!</>
        );
    }
}
export default HelloWorld;

The most basic functional component

This is an empty functional component example to serve as a template, save it in a file named BasicFunctionalComponent.js

import React from 'react';
function BasicFunctionalComponent() {
    const aMemberMethod = () => {    }
    return 
    (
        <h1>A basic functional component</h1>
    );
}
export default BasicFunctionalComponent;

Default props

You can add default props to your components, a parent component can override the default props by specifying child component attributes

class DefaultPropsExample extends Component {
    static defaultProps = {
        title: 'Default title'
    }
...
    console.log(this.props.title);
}

And override the default prop with the following

...
    <DefaultPropsExample title='Overridden title'/>
...

A simple filter() and map() example

This simple lambda example takes an array of characters and filters the character from the list if it is the letter 'e', also demonstrates how to put your filtering logic in a separate method

import React, {Component} from 'react';
class FilterLetterE extends Component {
    filterLetters(letter) { 
        return letter === 'e' ? false : true;
    }
    render() {
        return ( 
            "abcdefg".split("")
                .filter((letter) => this.filterLetters(letter))
                .map(filteredLetter => (
                    <div>{filteredLetter}</div>
                ))
        );
    }
}
export default FilterLetterE;

Selecting a random element from an array

This function will return a random element from the provided array

function choice(arr) {
    let randomIndex = Math.floor(Math.random() * arr.length);
    return arr[randomIndex];
}
...
console.log(choice("abcdefghijklmnopqrstuvwxyz".split(""));

Defining a helper function with a try catch

If you want to include a global type function to access from within your functional components this is how you do it

Create a new helper file and add the new method (nameLoggerHelper.js)

export default {
  sayHello: (
    name,
    age
  ) => {
    console.log('Hello '+ name +' I believe you are '+ age);
  }
};

Then reference the new helper in your main functional component

import nameLoggerHelper from "./nameLoggerHelper";const SubjectViewQuestionnaireTab = (props) => {
  useEffect(() => {
    try {
      nameLoggerHelper.sayHello('Chris', 46);
    } catch (error) {
      errorHandler(error);
    }
  }  const errorHandler = (error) => {
    console.error(error);
  };
}