tutorial-intro.md

Introduction to React: Hands-On-Practice

Intro

This tutorial will be a step by step guide to build the Markdown Previewer project from freeCodeCamp's curriculum.

You only need to know HTML and basic Javascript in order to use it. Don't be afraid of React, it is really a lot easier than you might think.

We will follow the recommended way to build React projects, that is explained in the React documentation: Thinking in React.

create-react-app Client

We will use the create-react-app client. It automatically sets up a React environment for you, so you don't have to worry about any configuration. You can directly start building the project. It is generally recommended to use this client when working with React!

User Stories

Let's see what user stories freeCodeCamp wants us to implement for the Markdown Previewer project:

• I can type GitHub-flavored Markdown into a text area.
• I can see a preview of the output of my markdown that is updated as I type.

So what is Markdown?

Markdown is familiar to HTML, but it uses a different, simpler syntax. What we need to do is, take the markdown a user enters and display it as HTML. We will use a tool called marked. It will translate Markdown to HTML for us.

Example of what we will build

Here is a live example of what the project will look like.

Let's get started!

Next: Setting up the create-react-app client