HoCo Hour of Code

React.js

16pts

Web Dev

Introduction to the web's most influential JavaScript framework

As we mentioned earlier, React.js is a frontend JavaScript framework, meaning it’s used to build UIs. Compared to plain JavaScript and HTML, which are imperative, meaning you specify a sequence of commands to describe how you want the code to function, React is declarative, meaning you describe the end result instead. This often makes React code easier to understand and organize.

React code is written in JSX, a special form of JavaScript that combines HTML and JavaScript through components. Components are modular pieces of code that can be used like standard HTML tags, with some special powers as well. Here’s an example of a component:

const Thing = () => {
  return <div>im a thing!</div> 
}

As you can see, the Thing component is a function that returns HTML. If we want to use this in another component, we would simply add a <Thing /> into the return statement. Components are powerful because they can be reused in other parts of a website and they can store state.

State can be thought of like a standard variable, except in React there is special syntax for creating and updating state. Here’s what that would look like:

const Counter = () => {
  const [count, setCount] = useState(0);

  return <div>
            {count}
            <button onClick={() => setCount{(count + 1)}>
              click me!
            </button>
         </div>
}

In this scenario, we declare a count state with the initial value 0, display it inside the div, and increment it with a button. Note that because JSX returns HTML, any JavaScript within HTML must be written inside curly braces.

The special thing about state is that whenever React detects a state change, it will react by rerendering the component. In this case, the entire counter component is rerendered with the updated count state whenever the button is clicked.

Another feature of React is props. Let’s say we want our Thing component to say something different after ten counter clicks. We would edit our current Thing to receive a properties, or props, in the function parameters and display this prop in the div:


const Thing = (props) => {
  return <div>{props.counterContent}</div>  
}

Now, we can pass props into the Thing component from our Counter:


const Counter = () => {
const [count, setCount] = useState(0);
  return <div>
            {count}
            <button onClick={() => setCount{(count + 1)}>
              click me!
            </button>
            <Thing 
              counterContent={
                count > 10 ? 
                “why are you still clicking?” : “im a thing!”
              } 
            />
         </div>
}

Now, our Counter will get a bit sassy when it’s clicked too much.

The best thing about React is that there is so much support for it from the community, from libraries to online tutorials. There are even frameworks built on top of React, called meta frameworks. For example, Next.js, the most popular of the React meta-frameworks, adds static rendering, file-system routing, and more recently some fancier features. The official React documentation even recommends using one of these frameworks to scaffold your site.

There are a lot more concepts in React which we haven’t covered yet like conventions, hooks, and internals. We would highly recommend checking out Fireship’s 100 seconds video to get a brief overview!