React Tutorial: Create a Simple Todo List Web App with React

Angular is usually my go to for building Javascript apps, but in this tutorial we learn to build a simple Todo List app with React. React is a popular Javascript library for creating single page web applications. If you are familiar with Javascript but new to React, then this is the perfect tutorial to follow along.

As always, please leave a comment about what you would like to see next and if you like the vide, please hit the like button to show your appreciation and to help others find this video.

[nityanandagohain]

Thank you it helped me a lot . Please make this type of content some more.

[johnwhite]

Hi Bruce. Could you please arrange tutorials about, e.g. how to add a microphone to react project, if it is interesting for you as well.

[fivebyfive]

Hey man! This tutorial was so hopeful! I'm currently in a coding bootcamp and my assignment rn is a todo app....this was so so so helpful. Thanks again!

[nunagames]

What a good tutorial, it seems a bit tough for me to comprehend simply because I am not good with javascript. I need a good example with Laravel Reactjs and MySQL

[thorstenbruening]

Hmm, perhaps you might want to have a look at the React docs.
They suggest some kind of coding habits, f.e. start a component's filename with a capital letter, too,
use .jsx file extension, so editors/linters may detect the purpose, a.s.o.

Anyway, you did a small but sharp app, which looks up to date.

Thank you.

[sobeyyy]

Following along and at @24:27 you added a super and a constructor to app.js and I cannot get it to work, I get parsing error expected ; I have the code exactly the same could there have been a change in React Core? my app.js doesn't allow me to extend Component. I'd like to complete this TUT. but ya i'm stuck on the constructor in app.js

[Михаил-врн]

What if I have saparate module file with array of objects with info. And I want to add something there like new object with info from input, or remove. So, I just use import to my component, but I can't change my module array, format is .js not json, but I can't do nothing with array from react =(
What I should do?

[lulualmohtarif]

thanks :)
what color scheme - theme are you using?

[pratibhadwivedi]

Hi Brice, I tried so many times, but still having this error:

C:\Users\Vikas> create-react-app todos-app

The directory todos-app contains files that could conflict:

node_modules
package.json

Either try using a new directory name, or remove the files listed above.

C:\Users\Vikas>

Please help me to fix this. Many thanks

[johnwhite]

Hello, it's Tim again. Could you please advise how to create the sensor in React.js. I have the task - Noise meter. Your help will be appreciated. Thank you in advance.

[volodymyr]

Please help me how to make todo element editable?

[dipojones]

followed your steps but its not showing the todo's and when I submit a new todo it just disappears

[TropicalTaquito]

I'm really confused on what bind means. I've tried to look at a few videos to try and get a sense of what it means, but im still confused.

[pratibhadwivedi]

Hello Brice,
I followed your video and got the following error when wrote "create-react-app todos-app" in the node command prompt.
Please help me how to fix it.


todos-app

The directory todos-app contains files that could conflict:

package.json

Either try using a new directory name, or remove the files listed above.

C:\Users\Vikas>

Thank you..

[aadeshranderia]

Hey Brice, its really a great tutorial. I am new to React and I was trying to integrate the update functionality in this tutorial. It would be of great help if you could help me with that.

[alinaraya]

can you add a route path so that each todos create, list, delete have different paths.

[ephatncube]

Nice Can you do a tutorial using the fetch api method

[rujutamahindrakar]

Hey Brice! I really like your tutorial. But I have an issue. My HTML content is not rendered. Is there anything I need to do to see my HTML content? Please let me know! Thanks :)

[rashikatasnim]

your videos are good. if would be great if you explain everything more clearly. don't take it in a negative way. your intro sound is very loud. if you change the intro sound or just lower the volume it will be perfect. and please make more react videos

[simhadriakaash-prof]

Please make a video to create a CRUD app which uses React.js + Express.js + MySQL (in a RESTful api).
Would love to work on that stack.