React components SaaS startup landing with RedwoodJS and Tailwind CSS in 10 minutes
Tags: react, webdev, beginners, redwoodjs
Published: 2023-02-24 11:44:08

Hi there! Working in tech for 10+ years I always look for efficient solutions. Here I share with you a recipe to build React components landing page in 10 minutes using RedwoodJS framework and Tailwind CSS as UI. This is the first major step for a beautiful and easy-to-grow Jamstack web app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn4gqspo6dm8oi9izv52.png)

## Initial setup

We have the following:

- RedwoodJS to manage creation and development of the app
- Tailwind CSS as UI
- Basic SaaS Landing template [https://tailwindtemplates.co/templates/basic](https://tailwindtemplates.co/templates/basic)
- Vercel for deployment
- GitHub 

## Steps to follow

1. Template – divide Landing page into React components
2. Web app generation with RedwoodJS – generate web app with Home page and components with Tailwind CSS UI support
3. Components design – use template code to customize design of components
4. Deployment to Vercel – deploying our web app to Vercel using GitHub

### 1. Template components


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3w51wm9iubxyqg2kpki.jpg)

First of all we present our Landing page template as sequence of components and their React names:

1. Header – Header
2. Hero – Hero
3. Logos – Logos
4. Selling Points – SellingPoints
5. Product Features – ProductFeatures
6. Team – Team
7. Testimonials – Testimonials
8. Blog Posts – BlogPosts
9. Newsletter Form – NewsletterForm
10. Footer – Footer
 


### 2. Web app generation with RedwoodJS

Now we need:

1. generate an app
2. create Home page
3. generate all 10 components
4. include all 10 components to the Home page

```
yarn create redwood-app redwood-tailwind-saas-landing
```

I use JavaScript version and init Git repo (you can use TypeScript version if needed). It took me 136.61s (~ 2 mins):

```
cd redwood-tailwind-saas-landing
yarn redwood dev
```

You'll see the splash screen of RedwoodJS on a local dev server ([http://localhost:8910](http://localhost:8910)):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r05u0461q4q5u0eky03c.png)

Then we will generate our Home page:

```
yarn redwood generate page home /
```

Then we need to generate all 10 components (`rw` is a shortcut for `redwood`):
```
yarn rw g component Header
yarn rw g component Hero
yarn rw g component Logos
yarn rw g component SellingPoints
yarn rw g component ProductFeatures
yarn rw g component Team
yarn rw g component Testimonials
yarn rw g component BlogPosts
yarn rw g component NewsletterForm
yarn rw g component Footer
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58aq92ghf29kn1ca0jf5.png)

We have all components generated – now it's time to open project folder in VS Code and import and add components to the Home page.  

Importing components:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g47wk0rotdxnqpclwmo8.gif)

Adding components to the Home page:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxe18zq4kw4els2lg6a5.gif)

Starting again local development server to see the results:

```
yarn rw dev
```

And we see our React components structure on the Home page 🥳


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cngpux1rec09gen0tzc.png)

Next step is to set up Tailwind CSS UI and use design template for our React components.

### 3. Components design with Tailwind CSS

On this step we need to:
- set up Tailwind CSS
- add components HTML code from the template

Setting up Tailwind CSS UI:
```
yarn rw setup ui tailwindcss
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exoo3y94lqa9it52pvii.png)


We open every component's code and add HTML code converted to JSX using some tool like [Transform Tools: HTML to JSX](https://transform.tools/html-to-jsx):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqo9jc1pwa3u3655n66s.png)

Then we add JSX code to component's code (`web/src/components/Hero/Hero.js`):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg1s0k8t1wlkysls6a5y.png)

Here is what we see with Head and Hero components added (we will global styled at the end):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfs4ztn81a362ofyy4w4.png)

Then we continue with the other components and do some clean up – update pictures to hi-res ones from Unsplash and remove jQuery and it's plugins/libs:

> jQuery is not right option to do animations & elements like Sliders in React apps and must be removed. Now animations are done using React components & CSS

And here we are – we have React components-based template now:

{% embed https://youtu.be/gxKni1wNtpo %}

The next step is to deploy this app to Vercel via GitHub.

### 4. Deployment to Vercel

The steps are quite straightforward:

- commit all changes to GitHub repo
- deploy on Vercel selecting this repo



Selecting our repo:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5jsxgh3iamateier3ad.png)

Starting Deploy:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0p3m3i8y91s36ax1wusn.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q46p3yqcup6toqzkazwn.png)

---

And here we are: the project is online at [https://redwood-tailwind-saas-landing.vercel.app](https://redwood-tailwind-saas-landing.vercel.app) 🥳

---


## GitHub source

{% embed https://github.com/smartykit/redwood-tailwind-saas-landing.git %}