Intro to React.js – Agata Krzywda – Medium

  • Intro to React.jsFor the past few months I have been learning react.js by doing a lot of online courses, tutorials, going to workshops and most recently attended to awesome react flipflops 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 a introduction tutorial of my series of ’’intro to React.js’’.
  • Editing text on the pageOpen App.js this is your main react component.
  • Create new componentCreate new file in src folder call MyComponent.jsThis 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.import MyComponent from ‘.
  • Using state and methodsIn class components for example App.js we can use state to store informations about our component.State is an object and can give it initial values in constructor, e.gthis.state = { isOn: true };You can access to state in render method using this.state for example if we want use isOn property we get it from this.state.isOnThe button text is determined by the current value isOn property.button{ this.state.isOn ?

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 attended to awesome react flipflops course run by Maciej…

@aghh1504: @dan_abramov @KaraMarck we also have React tutorial on medium for @codebar students especially 😊

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 attended to awesome react flipflops 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 a introduction tutorial of my series of ’’intro to React.js’’.

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

cd my-app/

npm start

This will automatically open a website in browser.

Now have a look at your files that were created. It should looks like that:

1. Editing text on the page

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

2. Create new component

Create new file in src folder call 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.

import MyComponent from ‘./MyComponent’;

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 says ‘Hello {your name}’ ? We need some way to tell our component who to greet. For this we can use props. Props are like parameters which we passing 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 components for example App.js we can use state to store informations about our component.

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

Above example is an inline if statement. You can read more about this here

My favourite online react courses:

Next tutorial simple todo list

Intro to React.js – Agata Krzywda – Medium