Pascal’s Triangle

Time to have some fun. In this lesson we’ll dig deeper into React Components.

Pascal’s triangle is a triangular array where the result of each element is the sum of the two elements above it:

          1
        1   1
      1   2   1
    1   3   3   1
  1   4   6   4   1
1   5  10   10  5   1

We can also visualize it graphically. Let’s give it a shot:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Learning React</title>
    <link rel="stylesheet" href="lib/style.css" />
  </head>
  <body>
    <div id="entry-point"></div>

    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/babel.js"></script>

    <script type="text/babel">
      function Triangle () {
        return <path fill="currentColor" d="M0 0,2 0,1 1.732 z" />
      }

      function Cluster ({ depth, transform }) {
        if (depth <= 0) {
          return <Triangle />
        }

        return (
          <g transform={ transform }>
            <Cluster depth={ depth - 1 } transform="matrix(0.5 0 0 0.5  0  0)" />
            <Cluster depth={ depth - 1 } transform="matrix(0.5 0 0 0.5  1  0)" />
            <Cluster depth={ depth - 1 } transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
          </g>
        )
      }

      function Pascal ({ depth=0, fill="#039", width=window.innerWidth, height=window.innerHeight }) {
        let x = width / 2
        let y = height / 1.732
        let scale = Math.min(x, y)

        return (
          <svg width={ width } height={ height } style={{ color: "red" }}>
            <Cluster transform={ `scale(${ scale })` } depth={ depth } fill={ fill } />
          </svg>
        )
      }

      ReactDOM.render(<Pascal depth={ 9 } />, document.getElementById('entry-point'))
    </script>
  </body>
</html>

Here, we’re using a new type of component: a stateless functional component. In addition to being classes, React components can also be defined as functions. This is great for components that do not manage their own state, and can be a concise way to describe simple, stateless components.

You did it!

Thanks for walking through our introduction to React! Now it’s time for the main event: React Native.