React

Intro

If you wanted to get a quick tutorial and some more resources on React, you’ve come to the right place!

So, for some background, React is a language that uses Javascript to build UIs (user interfaces). You may be wondering, why don’t people just use HTML/CSS? Well, HTML/CSS tends to be used for simple static websites, but if we want a website that is able to interact with the user (e.g. update everytime the user clicks a feature), we probably want to use React.

Installation

  1. Make sure that Node.js is installed. For information on how to do this, visit the Node.js tutorial.
  2. Navigate to the directory where you want to create your project and run 
    npx create-react-app my-app

    This will create a new app titled “my-app.”

  3. To see the web application, navigate to the project folder and run 
    npm start
  4. Edit the files in the src folder in your project folder to create your web app!

Basics

Ok, so now let’s get down to the basics of React. So a page made from React is built from many different components, which are Javascript functions that returns a piece of code to represent a bit of a web page. For example, I can have a component for the top bar of my website, another component for the tables in my website, and I will have one main file combining all these components as my final website.

The image below shows how we declare a React function component. The empty () means that we aren’t passing any variables in and the arrow (=> along with the curly brackets { }) means we are defining this as a function.

const ourFirstComponent = () => { return( //stuff to make this component goes here); }

You can also write the components as classes, and not functions. An example can be shown below. They must have render() method, which returns the elements of the components. All classes extends Component and if you have any variables, make sure to define them in the constructor.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
    }

    onClick() {
        this.props.onClick({ somSpecialData });
    }

    render() {
        return <ComplexPureComponent onClick = {this.onClick}>Click Me</ComplexPureComponent>;
    }
}

What makes React powerful is its ability to pass information between components and within components themselves.

If a component wants to store information about its current information/a changing variable, it uses a Javascript object called a state. In class based components, we will define it like below:

constructor(props) {
    super(props);
    this.state = {date: new Date()};
}

In function based components, we will define it differently, as shown below:

const [data, setData] = useState();

Both of these photos show that we are defining a state. If during the component, the value of the state changes, we can change it. In our example for the class based component, we would change our state variable by using the method this.setState({}).

tick() {
    this.setState({
        date: new Date()
    });
}

In our function based component, remember that we declared our state variable, data, and the method that can change it, setData. So, to change the value of the variable data, all we have to do is setData(newData).

Some other functions that are quite helpful is useEffect(), which runs every time something updates in your code. Some really helpful resources that I had when learning React include https://wattenberger.com/blog/react-hooks, which details the differences between class-based and function components and the important methods used in function-based components. Here are some other resources: