Project 39 of 100 - Build a Basic Blog UI with React, AntDesign, and Lodash
Tags: react, javascript, 100daysofcode
Published: 2021-01-28 07:42:41

*Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-39-antdesign-lodash-blog-ui.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-39-antd-lodash-blog-ui)

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](https://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 ✨✨✨✨✨