Photo (c) Frontline Creative

How I Approached Learning React

Hi! I didn’t publish a blog post last week because I forgot it. Haha. I was so in the zone trying to finish my last project on React.

So before we go in my React projects, I’ll tell you how I approached it.

Every time I’m looking for front end developer jobs, I always see React and Redux. Because of that, I’m going to study that after I receive my front end development certificate from Free Code Camp (FCC) .

Luckily, the next front end development projects in FCC after you receive a certificate will be built using React and Sass. (I also don’t know Sass at that time so I’ll be writing a blog post about it soon.)

What is React?

It is a JavaScript library to build user interfaces. That’s what written in their website.

So what did I do?

I went to the website. Click here to go to React’s website.

Read the docs.

And I read their documentation. Like the whole quick start. I didn’t go into the advanced guides yet. Just the quick start.

Oh, yes. At first I don’t want to do it because I feel like it’s too much work. Sometimes, I’m the person who wants to get only what I need quickly. But that time, I really don’t know React. I have no idea.

So welcome the idea that you do not know it yet because that is so okay.

It’s also a good idea that people in React divided the docs into subtopics. In that way, you’ll not be overwhelmed or bombarded with a lot of information. That’s why it’s easier to finish reading the docs.

Do the tutorial.

The tutorial is like a copy and paste.

There’s a tic tac toe game in React but the code is not yet done. You’ll be doing this on CodePen. (Do it on CodePen first so you will learn React first instead of getting frustrated trying to run it in your own editor.)

As you read the tutorial, you’re going to copy the code there and paste it in your pen.

Don’t worry they will tell you where to paste it. And at the same time, they will explain what those statements do.

Embrace the concept first. In that way, you’ll not get frustrated immediately because you don’t know the syntax yet.

How to Set Up React on CodePen

I choose to use CodePen in my first React app because this will be faster to learn React.

  1. Create New Pen.
  2. Click the settings icon beside the word, ‘JavaScript’. The pen settings will appear.
  3. In the JavaScript preprocessor, select ‘Babel’.
  4. In the Add External JavaScript section, you can see quick add in the bottom part.
  5. Select ‘React’.
  6. Select ‘React DOM’.
  7. Finally, click ‘Save & Close’.

My First React App

Always, always, always, it’s the Hello World. 🙂

HTML


<div id="root">
<div id="root"></div>
</div>

JS


class App extends React.Component {

render() {

return(


<div>Hello World!</div>


);

}

}

So the script above creates a div with a message, ‘Hello World!’ in our HTML. But how are we going to add it in our HTML?


ReactDOM.render(

<App />,

document.getElementById("root")

);

I feel like this is what’s happening there. It’s creating an instance of a class App and render it to the element with an id of ‘root’.

So your ‘Hello World!’ should appear there.

 

So that’s it. That’s how I experienced React.

 

Love,
Eirin

Advertisements

2 thoughts on “How I Approached Learning React

  1. I’m also doing Free Code Camp but you’re miles ahead of me. I’ll be following you to get a taste of whatever is coming up. I hope React works out easy for you.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s