react-tutorial-for-beginners/

[utterances-bot]

React Tutorial From Scratch: A Step-by-Step Guide for 2020 | Ibaslogic

In this React tutorial for beginners, you will learn the React JS fundamentals. Besides, you will be able to build React application and deploy on the web.

https://ibaslogic.com/react-tutorial-for-beginners/

[dalepres]

This is a great and timely article. After learning all (or at least some) about creating apps based on a single component or even a component with another single component (or array of them) (think tic-tac-toe), it was time for me to go to the next step of building an actual app that consists of a variety of components on a page (that's what led me to reactjs in the first place). Your article took away a lot of the hesitation and fear of taking that next leap. Thank you for that.

[Ibaslogic]

You are welcome Dalepres. I'm glad you found the article helpful.

[paulrogov]

@Ibaslogic thank you for such well-written guide. It's a pure gem. Wish I had found your tutorial when I was starting learning react.

[Ibaslogic]

I appreciate pvrogov. Please endeavor to share around the web.

[luisalmeida12]

This is article is just awesome! Congrats.

[Ibaslogic]

I appreciate @Luisalmeida12.

[RelishedChicken]

By far, this is the best tutorial I've found for React. I've always struggled to understand it but with this, it makes is seem simpler than ever before!

[aardva13]

So far, the best React tutorial I have seen. One of the best tutorials on any subject I have seen.

[Ibaslogic]

@RelishedChicken. Great!

[Ibaslogic]

Thank you @aardva13

[benony22]

Best React Tutorial!!!! Thank you.

[Ibaslogic]

Thank you @benony22. Please endeavor to share.

[anddrzejb]

Looks quite good @Ibaslogic. I am going through this but I have a few minor complaints (I am a C# developer with some experience in programming).

1. State. It was not clear to me that state is actually an overridden property of the component. This got me confused when I got to setState method (I was wondering, how the setState method knows where to take the state from?). I think it would be beneficial for others to understand that state property has to be named state and not store for example.
2. In the 1st part you mention Hooks and mention not to worry as you will get to them. Then in the 2nd part you advise to have a look at how to handle form inputs fields in React before continuing reading. In that tutorial you use hooks and advise to have a look at the hooks tutorial... So, are the hooks a required knowledge or are they not? I think for a beginner it is not a good idea to split one's focus. These subject jumps can be confusing and can discourage people.

I will add more comments if I find something. Thanks for your great work!

[Ibaslogic]

@anddrzejb. The comment is so helpful. Thanks for taking your time to do this. I will take a look. Appreciate!

[iansquenet]

./src/components/TodoContainer.js Module not found: Can't resolve './TodosList' in 'H:\todo nimekiri\simple-todo-app\src\components'

[Ibaslogic]

@itismartin. Please check the file path.

[nurrehmet]

thank you for this article, very helpful and straight to the point

[katendemich]

As for this article, it is great but l have a challenge in the next part Adding checkboxes to the Todo items. how do you add them in the TodoItem.js and not any errors. am stuck at the beginning of this part. 'open the TodoItem.js file and add the checkbox input just before the title in the li element'. am stuck there, how do l handle that.

[Ibaslogic]

@katendemich. As explained in that part (next part), the input is added before the title.

return (
  <li>
    <input type="checkbox" /> {this.props.todo.title}  
  </li>
)

Make sure the title is inside the curly brace, {}. Though you can place it anywhere and use CSS to style as you want.

You can always check the final source code in my GitHub repo and compare. Please take a look here:

https://github.com/Ibaslogic/react-todo-project/blob/main/src/classBased/components/TodoItem.js

I hope you are able to resolve the issue.

[katendemich]

not yet l still don't understand when you say the input is added before the title. below is TodoItem.js as of now where should i add input checkbox in this file. import React from "react"

function TodoItem(props) { return

{props.todo.title}

}

export default TodoItem

[Ibaslogic]

@katendemich. Make sure you wrap the JSX in the return statement with a single element. In this case, li. Don't forget the return parenthesis, () also.

import React from "react"

function TodoItem(props) {
  return (
    <li>
      <input type="checkbox" /> {props.todo.title}
    </li>
  )
}

export default TodoItem

[katendemich]

Thank you sir l have solved my issue

[katendemich]

hello in my TodoItem.js file and trying to apply controlled component but when l try to update the file so as to include the handler l get an error: TypeError: Cannot read property 'props' of undefined TodoItem C:/Users/katen/OneDrive/Desktop/React2/react-todo-app/src/components/TodoItem.js:8 5 | 6 | <input 7 | type="checkbox"

8 | checked={this.props.todo.completed} | ^ 9 | onChange={() =>console.log("clicked")}
10 | /> 11 | View compiled ▶ 17 stack frames were collapsed. this my TodoItem.js import React from "react"

function TodoItem(props) { return (

<input 
  type="checkbox" 
  checked={this.props.todo.completed} 
  onChange={() =>console.log("clicked")}  
/>

)

}

export default TodoItem please show me what am doing wrong thanks in advanced.

[katendemich]

l think the javascript's "this" is what is coursing the error. when i remove this the error is gone samehow.

[Ibaslogic]

@katendemich. Yes, unlike the class component, the this keyword does not exist in a function component. You can always access the props from the child component without it.

[Bikramghimire]

i like the style of learning react with project , most of tutorial lack this quality. it was great to learn the concept and applying on todo project hope more bigger app on coming future, love from nepal guru....

[Ibaslogic]

@Bikramghimire. Thanks for the comment. You can apply the knowledge of ReactJS to build a GatsbyJS project. You can take a look at this series to get started: https://ibaslogic.com/gatsby-tutorial-from-scratch-for-beginners/

[apisorder]

Hi Ibas, I was wondering if you could please help me with a related question. (I am a newbie in both JavaScript and React)

I heard it's a bad idea to learn both JavaScript and React at the same time, but I need to present a prototype in React within a month (this is a project for school).

How much JavaScript do I need to learn for React? (so far I only learned variables, arithmetic operations, loops, arrow functions, and destructuring, but I have not learned class, clousure, and I am having difficulty with async JavaScript). I did managed to finish Part 1 of your tutorial, which is very clear, and I appreciate that.

Thank you.

[Ibaslogic]

@apisorder. I'm glad you found this tutorial helpful. As regards your question. I must say, it depends on how you learn. JavaScript like other languages is a continuous learning. All you need to follow a React course is the fundamentals. And with what you have learned so far, you are good to go. Perhaps, if you come across any of the "left-out" topics, you can easily take a few moment and learn about them. Well, this is from my own experience. Maybe other developers can share their experience with us. But trust me, you are good to go.

[apisorder]

Hi Ibas,

Thank you for your prompt response, and I will continue following your tutorial.

I have two additional questions.

(1) I remember you said that you are self-taught, and although I am studying computer science, because of my background, most of the things I know actually require self-study on my own. May I ask if you have suggestions as to what I should study if I want to become a general developer, in terms of languages? (I originally wanted to become a web developer, but all of my peers are saying that it is very challenging, and therefore I should aim to become a general developer, and if possible, have a concentration on the web).

I was told to learn either JavaScript/Python to start, then study either C/C++/Java, then depending on which I am more comfortable with, go from there and concentrate on one of the pairs, i.e. JavaScript + C/Python + Java, etc.

(2) Additionally, I have always been told to study data structures and algorithms, but I have a very difficult time finding good resources for these.

Thank you.

[Ibaslogic]

Before you study anything, make sure you know what you want. I don't understand what you mean by "general developer". But whatever it is, know that programming as a whole is a very broad subject. So you need to decide the part that interest you. Even if you want to concentrate on the web, you have to follow a proven path. Do you want to be a frontend developer? Backend developer? or maybe a Full Stack. Please don't just read any material that comes your way, even if it interest you. Follow a path or sort of a syllabus. This will really help you.

In summary, decide what you want and follow through. You can make a bit of research on that or find a mentor. I will suggest you check out Traversy Media on YouTube. I think that would help. Thank you. Follow me on Twitter https://twitter.com/ibaslogic.

[mharvilla]

Ibas,

First of all, thank you for such a great tutorial. I am learning a lot as I go through it all. If you have a moment, a few questions have come to my mind. Apologies in advance if some or all of these questions are answered later in the tutorial, I have only completed through Part 6.

1. Why don't you use a constructor function when you define your components? In other tutorials and documentation, classes are typically defined like this:

   class MyClass extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
     todos: []
   };
   render () {
   ...
   }
   }

2. What are the rules or recommendations regarding terminating lines of code with a semicolon? I notice that you typically do not use one.
3. Why are some lines of code terminated with a trailing comma? For example, in the below excerpt from this tutorial, why is there a comma after true even though there are no additional items listed?

   handleEditing = () => {
   this.setState({
   editing: true,
   })
   }

Here's another example of a seemingly random trailing comma.

setUpdate = (updatedTitle, id) => {
  this.setState({
    todos: this.state.todos.map(todo => {
      if (todo.id === id) {
        todo.title = updatedTitle
      }
      return todo
    }),
  })
}

Thanks again and great work!

[apisorder]

Before you study anything, make sure you know what you want. I don't understand what you mean by "general developer". But whatever it is, know that programming as a whole is a very broad subject. So you need to decide the part that interest you. Even if you want to concentrate on the web, you have to follow a proven path. Do you want to be a frontend developer? Backend developer? or maybe a Full Stack. Please don't just read any material that comes your way, even if it interest you. Follow a path or sort of a syllabus. This will really help you.

In summary, decide what you want and follow through. You can make a bit of research on that or find a mentor. I will suggest you check out Traversy Media on YouTube. I think that would help. Thank you. Follow me on Twitter https://twitter.com/ibaslogic.

Hi Ibas,

Thank you for being so open with me. May I ask if you were in my shoes, how to find out what you really want as a programmer? I understand that we only have a limited amount of time, and therefore should not just jump into anything that interests you, but I don't know how to find a direction.

I am interested in doing frontend work, but I also have interest in making user interfaces in general. Is becoming a frontend developer my only option then?

Thank you.

Jeff

[Ibaslogic]

@mharvilla. These are valid questions. Please find your reply below:

1. A constructor function is not required in a class component to initialize your local state. You can simply initialize the state directly in the component like so:

   class TodoContainer extends React.Component {
   state = {
   todos: [],
   }
   }

This is simple and easier.

Behind the scene, the constructor function is being added when Babel transpile your code. You can take a look by adding the above code in the Babel repl: to https://babeljs.io/.

Imagine you forget calling the super(props) while implementing the constructor, you’ll get an undefined this.props.

It is also worth saying that, with constructor, you can add class methods without using the arrow function. But you’ll have to bind the methods in the constructor. This is an extra work. We avoid that in this series by using the arrow functions for class methods.

For instance, you’ll see something like this in the next part.

import React, { Component } from "react"

class InputTodo extends Component {
  state = {
    title: "",
  }
  onChange = e => {
    this.setState({
      [e.target.name]: e.target.value,    })
  }
  …
export default InputTodo

Without the arrow function, you’ll have to bind the method in the constructor like so:

import React, { Component } from "react"

class InputTodo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      title: "",
    }
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    this.setState({
      [e.target.name]: e.target.value,    
    })
  }
  …
export default InputTodo

In React, this keyword references the current component. And by default, React does not bind this to custom methods. But it does to built-in methods like the componentDidMount lifecycle methods and the likes (You’ll learn about them later).

So you have to bind them manually in the constructor or use the arrow function (as we did in the series) to define the methods.

This will get clearer as you read through the series.

2. Well, I find it natural to avoid using the semicolons. It has to do with your preference. JavaScript does not strictly require it. However, it can have its own benefit like code readability and maintenance. You can read more about “Automatic Semicolon Insertion”.

3. Again, depends on preference. Yes, I added a comma after the last item in case I decide to add more items later, I wouldn’t have to worry about any missing comma.

Hope I answered your questions?

Thanks for reading.

[Ibaslogic]

@apisorder.

Is becoming a frontend developer my only option then?

No sir. You can be a full stack and even go further and become anything. Just take one step at a time. Once you identify your path, get started with one thing at a time.

Hope it's clear?

Thank you for reading.

[apisorder]

Hi Ibas,

I really appreciate your making this detailed guide. Although I have managed to finish Part 1 of your series, I already see the efforts you have put in. I was wondering, when is it necessary to incorporate React into a project?

I did some research and I remember you also said that React is for making the user interface easier. While I do think React is powerful, it also seems to me to be quite complex (although your writing makes the learning curve much smoother), and I was wondering when would be better to use regular JavaScript with HTML and CSS, and when is it necessary to introduce React into the mix?

Thank you!

[muhammad-junaid1]

Pure Gold ! 💛 loved 📑 bookmarked

[katendemich]

Hi Ibas, l reached a point where am raising and handling events. but in the TodoContainer component l updated the handleChange method by adding 'id'. but where is this error coming from. Failed to compile src\components\TodoContainer.js Line 25:32: 'id' is not defined no-undef

Search for the keywords to learn more about each error. This error occurred during the build time and cannot be dismissed. am stuck.

[MohamudIssa]

Absolute gem! Followed you on Github.. Your style of writing makes things a lot easier for us layman to understand. That's an absolute gift. I hope you realize that. I hope you keep making these and put them together in a react book. gdluck!

[DanSam5K]

Super and Excellent Resource 👏 👏

• Absolutely amazing, it really help widened my knowledge of React by engaging with the first content, now I have great desire to finish every little detail of this amazing resources. ❤️

[lavanya-seetharaman]

Awesome tutorial for beginners . First time i learning new concepts without watching video and reading through article and gained lot of knowledge. Thank you so much :+1

[nzioker]

You just made react so simple. I'm glad I found this site. Learnt so much in 2 hours than I understood from video tutorials.

[nikoescobal]

Thanks for sharing this :) Btw, I think Pascal Case is more clear compared to UpperCamelCase.

[Haconjy]

I love this tutorial so much but I have problems of learning this tut on myandroid phone cause have no laptop. Pls how can I do that?

[Juicyu]

I was afraid i will never get how to handle react. This tutorial took away all my fear <3 I'm really thankful to the author of this tutorial!!!

[denscholar]

This is one of the best article I have read on React. You browk it down to bits. I used to find class-based components strange and difficult to understand and after reading this, I now have a full understanding of it. Thank you very much guys!

[SirriRyisa]

This the best tutorial I have come across. I am normally not the reading type I prefer visual studies but you see this content? It feels like a video you made React easy and because of this, I would like to say it's my best framework or library.

[tskarthikus]

Really simplified and understandable. Thanks!

[mwafrika]

Thank you the Microverse team for this amazing react article !!!

[Rajdevvv]

we just got a few topics that Why ReactJS framework is the Smart Move Right from Start Up - https://www.sparxtechnolabs.com/blog/why-reactjs-framework-is-the-smart-move-right-from-start-up.html