Intro to React.js

Agata Krzywda
Mar 22, 2017 · 3 min read

For the past few months I have been learning React.js by doing a lot of online courses, tutorials, going to workshops and most recently I attended the awesome React in Flip Flops course run by Maciej Nowakowski.

I learnt a lot on the way and now I am putting together this tutorial with the aim of it being the one tutorial I wish I had when I first got started.

This is the introduction tutorial of my series of ’’Intro to React.js’’.

The best way to have a quick and reliable React boilerplate is to install create-react-app. To do so:

This will automatically open a website in your browser.

Now have a look at the files that were created. It should look like this:

1. Editing text on the page

Open App.js, this is your main react component. See where it says ‘Welcome to React’, change this text to something else. Save the file and look at the app in your browser. You should see your changes.

2. Creating a new component

Create a new file in src folder called MyComponent.js

This is a simple component which says ‘Hello World!’

To use that component in App.js we need to import it at the top of the file.

Then you can use it as you would any other html element. Try putting it underneath h2.

Now when you open your browser you should see ‘Hello World’ underneath h2.

3. Using props

At the moment MyComponent says ‘Hello World’ but what if we want to say ‘Hello {your name}’ ? We need some way of telling our component who to greet. For this we can use props. Props are like parameters which we pass to our component.

Now we have access to our name prop inside MyComponent.

We can use it like this:

4. Using state and methods

In class component, for example App.js we can use state to store information about our component.

  • State is an object and YOU can give it initial values in the constructor, e.g

You can access state in the render method using this.state, for example if we want to use the isOn property we get it from this.state.isOn

  • The button text is determined by the current value of the isOn property.

The above example is an inline if statement. You can read about it here.

  • OnClick function calls the toggle method which will update our state by using this.setState().

My favourite online react courses:

Enjoy:)

Next tutorial is a simple todo app.

the codelog

Welcome to the codelog, the official codebar blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store