Basic react concepts

Components

  • Are similar to functions where you provide input and get output back. Input is props, state. Output is the UI.
  • You do not invoke components, rather you use them like this:
<Component />
  • Can manage a private state

Components should be named with a Capital letter because otherwise React will think that you are referring to HTML elements.

Props are immutable, meaning they cannot be changed

Examples

function Hello() {
	return <div>Hello React!</div>;
}

ReactDOM.render(
  <Hello />, 
  document.getElementById('mountNode'),
);

We have a simple react function component that has no state.

Using the ReactDOM.render() function, we render the content into the DOM. The first argument of the render method is the component passed in like an HTML element.

The second argument is the DOM element where in the DOM we want that component to appear. This is the entry point of React.

return <div>Hello React!</div>;

This line above is not valid JavaScript, that is JSX. Behind the scenes, Babel, the compiler really does this:

"use strict";
//Arguments: element to be created, any attributes that the element has, child of that element
React.createElement("div", null, "Hello React!");

Even this code below is converting this JSX:

ReactDOM.render(
  <Hello />, 

Into this React command:

React.createElement(Hello, null)

useState()

useState is a hook in the React world.

const [currentStateValue, functionToSetNewStateValue] = useState(initialSTateValue)
function Button() {
	const [counter, setCounter] = useState(5);
	return <button onClick={() => setCounter(counter*2)}>{counter}</button>;
}

What is happening with the code above?

First, we have an array that gets the current state of the Component through the useState() method, which is initialized to 5. The array has a getter called counter and a setter called setCounter.

	return <button onClick={() => setCounter(counter*2)}>{counter}</button>;

This second part says that we have a button element that performs some operation on a click, the onClick(). The operation that it defines is set in the {}. So in our case, there is an Arrow Function that’s called that will increment the current counter by 2, and then that value will be passed to setCounter.

The {counter} means that the current value of inside of the counter function will be displayed. Notice how the function isn’t called like counter(), but instead gets a reference to it like counter. The counter value will be displayed in the button.

The cool thing to notice is that we don’t actually do any manipulations of the DOM, React does that for us. All we do is set the action that happens on the click and React automatically updates the state of the DOM.

Best practices

function Button() {
	const [counter, setCounter] = useState(0);
	return <button onClick={() => setCounter(counter+1)}>{counter}</button>;
}

The long return statements are obviously hard to read, we can clean up our code to look like this. Also, notice how the return statement has () and not {} because we aren’t returning an object:

function Button() {
	const [counter, setCounter] = useState(0);
//this function below makes the code more readable and must be declared in the Button component so that it has access to all of the variables
const handleClick = () => setCounter(counter+1);
	return (
    <button onClick={handleClick}>
      {counter}
    </button>
  );
}

How to render multiple components

ReactDOM.render(
  <React.Fragment>
    <Button />
    <Display />
  </React.Fragment>, 
  document.getElementById('mountNode'),
);

React.Fragment is a special react keyword that tells React that you will have multiple elements inside of a single element. Below is an ever easier way to do React.Fragment using <>

ReactDOM.render(
  <>
    <Button />
    <Display />
  </>, 
  document.getElementById('mountNode'),
);

Useful tools

0 Shares
Tweet
Share
Share
%d bloggers like this: