Introduction to useState

In React when we want to manage individual state there is a function we can import called useState that gives us a getter and setter letting React know when it needs to re-render.

import React, { useState } from 'react';

const myComponent = () => {
  const [count, setCount] = 0;
  ...
}

This initializes count as a state variable that can be accessed with count and set with setCount.

Incrementing a Counter

If we wanted to write a function that incremented count, we could add a button.

...
return (
    <>
      <p>Count is: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
);

Here we wrapped our text and button in a React Fragment. Since components can only return one DOM parent element, Fragments allow us to return more than one without creating more divs in our markup.

Then I set the onClick for button to an inline function that increases count by 1 using setCount. If we were to do this without a state variable, i.e. const count = 0 React wouldn’t know when to re-render our data.

Managing List State

This can be used to hold any state or object however, not just numbers and strings. If we wanted to instead append to a list we might write a function that gets passed to the onSubmit of a form.

...
[list, setList] = useState([]);
...

const onFormSubmit(event) {
  event.preventDefault();
  list.push(form.name);
  setList(list);
}

Handling Form Input

Changing all our input onChange methods as well to update the state of form when the data changes.

...
<label>
  <p className={"text-label"}>Name:</p>
  <input
    onChange={handleSetForm}
    type="text"
    name="name"
  />
</label>
...

...
[form, setForm] = useState({ name: '' });
...

const handleSetForm = ({ target: { name, value } }: any) => {
  setForm((form) => ({ ...form, [name]: value }));
};

This updates our form state whenever the data changes. Allowing us to use form to append to our list above whenever the submit button is clicked.

Introduction

I’ve been learning React so that I can build my web applications for others and myself. React is component based. You create reusable components and render them with data. Here I created a card component that lets me insert cards. They can even contain other cards and are easy to understand from the App.js.

Creating the Card Component

To create a new component I just create a new file called Card.js and import it at the top of App.js.

import Card from './Card.js';

Then inside Card.js I can create my Card. At the top I import my styles and return the JSX Card object.

import './Card.css';

function Card(props) {
	return (
		<div className="Card">
			<h2 className="CardTitle">{props.cardTitle}</h2>
			<p className="CardContent">{props.children}</p>
		</div>
	);
}

export default Card;

At the bottom I set the default export to Card so that we can import it properly in App.js.

Styling the Card

My styles are fairly simple, they just create a nice looking card.

.Card {
	text-align: center;
	background-color: lightgrey;
	border: 1px solid grey;
	border-radius: 0.5em;
	margin: 1em;
	height: 20em;
	overflow: hidden;
}

.CardTitle {
	font-size: 1em;
}

.CardContent {
	background-color: white;
	height: 100%;
	border-radius: 0.5em;
	border-top-left-radius: 0em;
	border-top-right-radius: 0em;
	padding: 1em;
}

Using the Card Component

That’s great but we still have to insert our card in App.js. Now that we’ve created a component and imported it all I have to do in App.js to create a card is this.

<Card cardTitle="Example Card Title">Hello World</Card>

Conclusion

Finally we can see that this builds a card.

This can be used for building any kind of component, such as dialog boxes, forms, or anything you can imagine in HTML/CSS.

Introduction

Today I’ll show you how you can write incredibly fast code in Rust. This is part one of a tutorial series.

This is an intermediate tutorial, if you are unfamiliar with Rust basics I would suggest reading the Rust book for free at https://doc.rust-lang.org/stable/book/.

Project Setup

Lets dive right in.

cargo new rust-tutorial
cd rust-tutorial

Let’s build our websocket server.

Edit your Cargo.toml and add ws to your [dependencies].

Your Cargo.toml should now look something like this.

[package]
name = "rust-tutorial"
version = "0.1.0"
authors = ["Sean Behan <codebam@riseup.net>"]
edition = "2018"

[dependencies]
ws = "*"

Building the WebSocket Server

Import our libraries.

use ws::listen;

Start a websocket listener.

fn main() {
    listen("127.0.0.1:5000", |out| {
        move |msg: ws::Message| {
            // handle the msg here
        }
    }
}

Handling Messages

We’ll respond to recieved messages and just echo them back for now.

Of course you could easily pass this data into any function and use it to generate a response. In fact the incoming and outgoing data doesn’t even have to be text.

out.send(format!("recieved message: {}", msg.into_text().unwrap())).unwrap();
out.close(ws::CloseCode::Normal)

Testing the Server

If we connect to this now using websocat, which can be installed with cargo install websocat, we can see the server echos back messages that we send to it.

$ websocat ws://127.0.0.1:5000
hello world
recieved message: hello world

This isn’t that interesting. It’s cool that we can do all this in just 8 lines of Rust though!

Next Steps

In the next part of this series I’ll show you how to use use tokio to create an asyncronous server so we can manage simultaneous connections. Stay tuned!