How to Build a Markdown Editor with React

  • Опубликовано: День назад

    NL TechNL Tech
    подписчиков: 1,4 тыс.

    This series is about building practical projects with React. In this video I build a markdown editor, that shows a preview of the rendered markdown as the user types it, counts words, characters and allows downloading the markdown file.
    Markdown Editor Source Code: github.com/nikelaz/react-mark...
    Contents:
    0:00 Introduction
    0:18 What we're Building
    0:37 index.js
    0:43 index.css
    1:30 App Component
    1:46 Folder Structure
    2:00 Markdown Provider Component
    2:30 MainLayout Component
    3:01 TitleBar Component
    3:34 Editor Component
    5:05 Preview Component
    5:43 Final Application Demo
    6:01 Conclusion
    Email: nikola.n.lazarov@outlook.com
    Twitter: / nikelaz
    LinkedIn: / nikola-lazarov
    #react #project

@UseCondomsKid +1
@UseCondomsKid

Man, this is a fantastic resource. Thank you for this.

6 месяцев назад
@nltech2857
@nltech2857

Thank you! I’m very glad you found it useful!

6 месяцев назад
@ssk7690 +1
@ssk7690

It's a great project in 6mins I thought. But it'll take 2+ hrs just to follow this. Can you just create a video making this?

10 месяцев назад
@nltech2857
@nltech2857

Thank you for the feedback. You are right, the video is the most concise format in which the implementation details can be provided. My idea was that a viewer can implement the project at his own pace. It was an experiment tough and now I also think this is not the best format. I'll definitely change it for future project videos.

10 месяцев назад

Далее

React markdown editor

6:59

React markdown editor

Daily Web Coding

Просмотров 18 тыс.

How to Use WordPress as a Headless CMS

1:12:25

How to Use WordPress as a Headless CMS

NL Tech

Просмотров 6 тыс.

Трейлер gta 6, самый полный разбор от Мэда

1:59:52

БЕСКОНЕЧНАЯ СПИЧКА

00:39

БЕСКОНЕЧНАЯ СПИЧКА

Masomka

Просмотров 113 тыс.

FreeCodeCamp: Build a Markdown Previewer

16:51

FreeCodeCamp: Build a Markdown Previewer

K-dev

Просмотров 5 тыс.

Stop using so many optionals… Simple typescript trick

6:44

Stop using so many optionals… Simple typescript trick

JollyCoding

Просмотров 2,9 тыс.

Get started with React.js & React Router 6+

3:45:30

Get started with React.js & React Router 6+

Academind

Просмотров 105 тыс.

Deploy a Next.js App to GitHub Pages

18:53

Deploy a Next.js App to GitHub Pages

NL Tech

Просмотров 2,1 тыс.

React Text Editor Tutorial - TipTap

47:49

React Text Editor Tutorial - TipTap

Chaoo Charles

Просмотров 15 тыс.

How to build a round drywall shelf

21:37

How to build a round drywall shelf

Michael Bashmet

Просмотров 1,3 млн

Fastify Course 🚀 The Performant Node.js Web Framework

36:30

Fastify Course 🚀 The Performant Node.js Web Framework

NL Tech

Просмотров 2,1 тыс.

Build a Markdown Previewer - Front End Libraries Projects - Free Code Camp

1:05:19

Выставил ПРИДУМАННЫЙ ТЕЛЕФОН НА АВИТО #shorts

1:00

Выставил ПРИДУМАННЫЙ ТЕЛЕФОН НА АВИТО #shorts

Дмитрий Левандовский

Просмотров 2,1 млн