DEV Community

Cover image for Learn React by Recreating this Dev.to Article
Dan Curtis
Dan Curtis

Posted on

Learn React by Recreating this Dev.to Article

What is React anyways? ๐Ÿ•ต๏ธโ€โ™€๏ธ

Websites consist of data, whether that's text or boxes. React makes it easy to change the data displayed. Instead of reloading the page, React automatically changes data, giving it the feel of a mobile app.

We're going to recreate this article from scratch to learn React! Skip to the end for the full code.

Thinking in React ๐Ÿค”

Websites used to be "pages" of data. React splits the page UI up into chunks known as components. We create components by calling a function.

For example, this page has a header, article, sidebar, and a title inside of the article. Each could of these be their own component.

Dev.to article screenshot

Functions, classes, components - oh my! ๐Ÿคฏ

Functions, classes, and components are synonymous in React. Every component in React should be a class or function. Classes in JavaScript are special functions. Older React code uses classes, but functions are the standard now.

Every component returns HTML, known as JSX. Traditionally, JavaScript and HTML are separated. In React, functions encapsulate all the code (JS, HTML, even CSS!) for a component.

function Article() {
  return <h1>Hello World</h1>;
}
Enter fullscreen mode Exit fullscreen mode

The power of components ๐Ÿฆพ

Why use components? Components are reusable, and they can easily manipulate HTML and CSS. Parent components can call children components. For example, our Article component can call Title, Author, and Body children components.

  • Article (Parent)
    • Title (Child)
    • Author (Child)
    • Body (Child)

Let's say we build Dev.to and use the same Article component for every article on the site. The data inside the Title, Author, and Body components would need to change. Instead of hardcoding data into our JSX, we can use what is known as props.

function Title() {
  return <h1>Fun Fact</h1>
}

function Author() {
  return <span>Daniel Curtis</span>
}

function Body() {
  return (
    <p>The unicorn is the national animal of Scotland.</p>
  );
}

function Article() {
  return (
    <div>
      <Title />
      <Author />
      <Body />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Introducing component props ๐Ÿ“จ

Props are the way React sends data or functions from one component to another. They are an object of parameters that we can pass into a component when we call it. Props allow us to dynamically change the data of every component, making the component highly reusable. Props can be any data type, even other functions.

function Title(props) {
  return <h1>{props.title}</h1>
}

function Author(props) {
  return (
    <div>
      <img src={props.img} alt="Author" />
      <span>{props.author}</span>
    </div>
  );
}

function Body(props) {
  return <p>{props.body}</p>;
}

function Article() {
  const data = {
    title: "Fun Fact",
    author: "Daniel Curtis",
    body: "The unicorn is the national animal of Scotland."
  };

  return (
    <div>
      <Title title={data.title} />
      <Author author={data.author} img={data.img_src} />
      <Body body={data.body} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In the real world, the data variable would be a bunch of articles. We could map over every article in the data and return an Article component for each one. This would look something like this:

function App() {
  const bigData = {/*lots of articles*/}
  return (bigData.map((el) => <Article data={el} />));
}
Enter fullscreen mode Exit fullscreen mode

Data manipulation with Hooks โ†ฉ๏ธ

React shines when data is dependant on user interactions. React uses state as a webpage timeline that tracks the state of the webpage.

Hooks are fancy React functions that manipulate state. Every component can create a local state using the useState() hook. The useState() hook contains the current state and a function to update it.

Let's say we want to create a Like button. Every time it's clicked, we'll need to call a function to update a variable tracking likes. We can use State for this:

function Likes() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Like
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

Notice that the onClick event is camelcase instead of all lowercase.

Conditionally rendering components โ“

We can conditionally render components or information inside of components. For example, we're going to render "Loading..." while our article loads and our article once it is loaded.

Conditionally rendering components and data depending on a webpage's state is what makes React magical.

function Article() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(); 
  // notice we moved data to state instead of a variable

  if (loading) {
    return <h1>Loading...</h1>;
  } else {
    return (
      <div>
        <Title title={data.title} />
        <Author author={data.author} img={data.img_src} />
        <Body body={data.body} />
      </div>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

The useEffect() Hook โ†ช๏ธ

There are a handful of Hooks. And it's possible to create your own custom hook too. useState() and useEffect() are by far the most used. useEffect() is powerful for fetching data from an outside source like an API. useEffect() is a callback function that can asynchronously update state. It initially runs when the component is called.

useEffect(() => {/* do stuff */}, []);
Enter fullscreen mode Exit fullscreen mode

When we load the Article component, we need to get the article data from an API. The timeline of our Article component would be:

  1. Article initializes data and loading as states
  2. Article asks for data by making a fetch request in useEffect()
  3. Article continues because useEffect() is a callback function
  4. Article returns the conditional HTML for when loading is true
  5. Article hears back from the fetch request and calls the callback
  6. Inside the callback, data is set to the info requested and loading is set to false
  7. Article returns the conditional HTML, this time for when loading is false

In code this would look like:

function Article() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState();
  const API_URL = 'https://dev.to/api/articles/354834';

  useEffect(() => {
    fetch(API_URL)
      .then((res) => res.json())
      .then(
        (result) => {
          // On callback, update state
          setData(result);
          setLoading(false);
        },
        (error) => {
          // Update state; log error
          setLoading(false);
          console.log(error);
        }
      );
  }, []);

  if (loading) {
    return <h1>Loading...</h1>;
  } else {
    return (
      <div>
        <Title title={data.title} />
        <Author 
          author={data.user.name} 
          img={data.user.profile_image} />
        <Body body={data.body_html} />
      </div>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

You might be wondering why there's a set of [] in useEffect(). That's where we add dependencies. Every time something inside of those square brackets changes, useEffect() runs. We leave them empty so useEffect() only runs once when the component loads.

Stylish components ๐Ÿฅณ

React is a UI library, so CSS is a big deal. There's a bunch of different ways you can style components. You can use inline objects, objects, or an external stylesheet with classes. Or you can use a library called styled-components, which extends on the idea of using JavaScript objects for styling.

function StylinDiv() {
  const h3Style = {
    color: 'purple',
    fontSize: '23px' // notice camelcase
  }

  return (
    <div>
      {/* Using an external stylesheet */ 
      <h1 className="StylinDiv-h1">Hey there!</h1>
      {/* Using an inline object */}
      <h2 style={{ color: 'red' }}>Whats up?</h2>
      {/* Using an object */}
      <h3 style={h3Style}>Goodbye</h3>
    </div>
  );
}

Enter fullscreen mode Exit fullscreen mode

Whichever method you choose, avoid global styles - make them specific to components.

I'm using an external stylesheet with classes in this example.

Here's the finished product. Fork the pen and try adding tags!

Resources ๐Ÿ“š

There's a lot more to learn when it comes to React that's beyond the scope of this article. These are some of my favorite learning resources:

Thinking In React is an excellent article on shifting from traditional webpages to components.

I use Hooks in this article. Older React code uses classes and constructors to manipulate state. I highly recommend going through React's Tutorial to understand classes and the "old way."

Traversy Media is an excellent resource for anything frontend related. His crash course is excellent for picking up React quickly.

Create-React-App makes getting started with a React application on your computer quickly. No configuring webpack!

Top comments (3)

Collapse
 
duc profile image
Aryan Godde

This was definitely a unique one, I loved it. I have saved it for later when I go back to react since rn I am mostly focusing on design stuff. A great way to teach tho. Thanks Curtis!

Collapse
 
anuraghazra profile image
Anurag Hazra

And this article also teaches you recursion..

Collapse
 
dancrtis profile image
Dan Curtis

I was hoping somebody would catch that ๐Ÿ˜„