DEV Community

Quoc Huynh Website
Quoc Huynh Website

Posted on β€’ Edited on

31 10

Build a blog for beginners with React in 3 minutes

Strapi will be used in this project. It saves our data in a JSON file and return data with JSON throught API. Strapi is a popular open-source used by a lot of developers in 2021. You don't know how to use? Don't anxious, just follow me.
Link : https://strapi.io/

1. Set up Strapi

Open termial and paste it:

npx create-strapi-starter@latest my-strapi-gatsby gatsby-blog

But but, remember to enter "Quickstart (recommended)" after that 😲

Image description

To download, it takes about 1 minute to download. So, you can watch some pornhubs πŸ˜‚.

2. Look through the blog

There are two tabs will be opened by the broswer after downloaded. The first tab for back-end where create some posts and the second tab for front-end where display your posts.

Image description

And Strapi creates some files that consists of two folders like back-end and front-end on Visual Studio Code:
Image description

3. Admin's Database on Strapi

After register, we go to Articles and click on Add new Articles to write our post. Remarkable of the post is Category and Author's name on the right of the page.
Image description
You can add some photos and the slug will be created by Strapi at the bottom of page.
Image description
Go to http://localhost:8000/articles and check on API
Image description

Click on Publish.

4. Read our post

Remember to type npm start on front-end folder, you will see your posts there.
Image description

5. Deploy

You can deploy our project on any service. I recommend to deploy on Heroku

Thanks for reading this post! Follow me to know more about React's tutorial

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (5)

Collapse
 
traleeee profile image
Tra Le β€’

Rick Rolled 😭

Collapse
 
quocbahuynh profile image
Quoc Huynh Website β€’

You can search Strapi on Google πŸ€“

Collapse
 
lucavalente93 profile image
lucavalente93 β€’ β€’ Edited

...Did you have just rickrolled me when I clicked the hyperlink at "Set Up <(Strapi)>" ? πŸ€” LOL

Collapse
 
quocbahuynh profile image
Quoc Huynh Website β€’

πŸ˜‚πŸ˜‚ hahaaaaa, have a good dayyyyyyy

Collapse
 
heberbr profile image
heberbr β€’

Thanks a lot!!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs