Project 39 of 100 - Build a Basic Blog UI with React, AntDesign, and Lodash

#react #javascript #100daysofcode

Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

While this may not be the most exciting post ever, it's important to jot down notes whenever you break open a new UI framework. For this project I created a simple blog page UI with the Ant Design framework.

Ant Design

I've used a large handful of different frameworks over the years and this one might be one of my favorites. If you're using React, simply download it with npm i antd in the terminal. It's a big package so it will take a minute, but when it's downloaded you'll have the full power of all of the Javascript and CSS libraries of Ant Design behind your project. Then, similar to react-bootstrap, when you need an Ant Design component, simply bring it into your React component with something along the lines of import { Card } from 'antd.

For this project I used two Ant Design components, PageHeader and Card. For those familiar with Bootstrap the Card component is what you think it is. A basic styled div built to contain different kinds of content. Here is the code for building out a PageHeader component in JSX:

  <PageHeader
    className="site-page-header"
    onBack={() => null}
    title="Title"
    subTitle="This is a subtitle"
  />

As you can see, a title and subtitle to the header can be built in by adding properties to the component. I deleted the subtitle and just kept the title.

The Card component worked similarly. I have a bunch of content and I want to put some of it in cards. Here is how to code a basic Card component with Ant Design:

    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>

However, instead of their stock content within the <p> tags, I have a JSON file with an array of objects each with text content for a series of cards- that meant that I would have to pass content to each card dynamically. You can do this with vanilla Javascript and JSX, but I wanted to try something new.

Lodash

So, Lodash is one of those libraries you hear about a lot before you end up trying or needing it, or it was for me anyway. And if you'd tried to describe it to me before I had a chance to use it I would have thought it useless.

But if you do write a lot of Javascript code and find dealing with iterators and other common JS methods to be cumbersome, Lodash is a great alternative that can quicken development and truncate your code to be more compact and- perhaps- more readable.

I wanted to use the Javascript map method to iterate over the objects in my JSON array. For each object, I wanted to return an Ant Design Card component. To do this with lodash, you first need to install the package with npm i lodash. After installation you import the package with import _ from 'lodash'. Like other too-cool-for-school packages, you are just importing a symbol.

To use lodash for the map method, you then call the underscore symbol instead of referencing the array, like so:

_.map(api,(article) => (
  <Post title={article.title} content={article.content} />
))

For such a short use case, lodash may not have saved a ton of code here, but I do like the syntax and could see enjoying using it for more readable code in other places. Or perhaps just to be fancy ✨✨✨✨✨