getting-started-with-react/

[utterances-bot]

React Tutorial: An Overview and Walkthrough | Tania Rascia

I've been hearing about React since I first started learning JavaScript, but I'll admit I took one look at it and it scared me. I saw what…

https://www.taniarascia.com/getting-started-with-react/

[Chyma]

Hello Tania... Awesome tutorial,

I have a question though, please can you shed more light on this particular line in your code, why did you use three periods (...) before 'this' in the function below. Thanks

handleSubmit = (character) => { this.setState({characters: [...this.state.characters, character]}) }

[dinesh-maripi]

... is javaScript spread operator. I will try to explain the spread operator with the following example.

    const citrusFruits = ['orange', 'lime', 'mandarin'] 
    const tropicalFruits = ['mango', 'banana']
    const allFruits = [...citrusFruits, ...tropicalFruits] // using  ... operator to copy citrusFruits & tropicalFruits into allFruits.
    console.log(allFruits) // o/p: ['orange', 'lime', 'mandarin', 'mango', 'banana']

[Chyma]

Thank you very much.

On Wed, Aug 5, 2020, 19:10 Dinesh Maripi notifications@github.com wrote:

... is javaScript spread operator. I will try to explain the spread operator with the following example.

const citrusFruits = ['orange', 'lime', 'mandarin']
const tropicalFruits = ['mango', 'banana']
const allFruits = [...citrusFruits, ...tropicalFruits] // using  ... operator to copy citrusFruits & tropicalFruits into allFruits.
console.log(allFruits) // o/p: ['orange', 'lime', 'mandarin', 'mango', 'banana']

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/taniarascia/comments/issues/7#issuecomment-669349998, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZYAY4O5PLXDMTEMXJQMMLR7GOBVANCNFSM4PVUQ6TA .

[alemRangel]

Thanks for sharing your knowledge, you are amazing.

[ekta96]

Thanks Tania for using the simplest way to explain ReactJs .

[hidelryn]

thx! good post

[khalilhimura]

Thank you for this. A good & quick refresher.

[haomingxiao]

Thanks for the tutorial. One question for the code below, why there is [ ] around name variable. If I remove the bracket, vscode tells me name extracted from event.target is not used, and the form is not working as designed. What does this [ ] mean?

handleChange = (event) => {
  const {name, value} = event.target

  this.setState({
    [name]: value,
  })
}

[HengJunXi]

@haomingxiao [ ] around name variable is an ES6 feature, called the computed property name. You may refer to https://ui.dev/computed-property-names/

[cgossain]

Seriously awesome tutorial! I had react the react docs a few months ago, but this is so much more concise and feels like you're getting the same information. Thanks!

[dylan-ztm]

Hi Tania,

This was a super awesome tutorial! I built out this app a few days ago and then used as a basis for an inventory management app (frontend only) using the same structure. This hands on lesson was well written and organized and helped me understand some key React concepts like state and event handling. Thank you so much for making this available!

[haroon-dev]

Thanks Tania for explaining React so simple.

[viveksekar63]

Great Blog for React. Nice to learn for beginners. I learnt from this blog for the first time as a beginners and now am developing many react application. Thanks for this blog.

[alexleduc76]

Thanks for writing this article. It was my first introduction to React and learning it has sparked a tidal wave of interest the npm/JS ecosystem around it. I really needed something to kick me out of my complacency, i.e. the attitude that jQuery loaded from a script tag was good enough for anything I wanted to do on the client side.

[namsefroehlich]

Thank you :D

[zodocaring]

Hi, I am new one to react, I just follow the tutorial. when I execute the command: npx greate-react-app react-tutorial

the console the windows 10 show me an error:

npm ERR! code ENOLOCAL npm ERR! Could not install from "Education\AppData\Roaming\npm-cache_npx\3932" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Studo Education\AppData\Roaming\npm-cache_logs\2020-09-17T00_57_06_469Z-debug.log Install for [ 'greate-react-app@latest' ] failed with code 1

I do not know how to resolve the problem!!
I will be grateful for the help.

[HerllonCardoso]

Thank you for making so clear!

[spconway]

Thanks for this! It's to learn about the basics before jumping in to the more advanced stuff.

[taniarascia]

@zodocaring it's create-react-app not greate-react-app, I assume that's why.

[IkramMaududi]

Hello Tania @taniarascia and whoever reads this, help me please, i've some questions

1. Do we still need to use constructor method in the new react? here Tania doesn't use constructor, but in her github source there is the constructor in form.js
2. What's the difference between using arrow function and method inside class? for things like handleChange and handleSubmit, Tania uses arrow function, but for render she uses method

Thank You.....

[boldrack]

@IkramMaududi

1. Now we don't need constructor any longer, WE DON'T
2. arrow function helps you automatically bind to the component class so you don't need to do something like this handleChange = this.handleChange.bind(this); binding the method to the component, arrow functions do this automatically.

[el-tio-victor]

Wow!! great tutorial. I am learning react and this help me to understand more it. Thanks for your time @taniarascia Saludos!!

[ltlg]

Thanks Taniarascia.

[cjdavies]

I thouhgt that you might find this intersting: https://github.com/JennaSys/tictacreact

[lorddexon]

Nice guide to get a quick overview, really useful, thanks

[adrian-badulescu]

Beutiful tutorial and thank you for shading light into ReactJs world...

Though I have 1 question: why are you using twice const {characters} = this.state ? once into render() and once into removeCharacter(). It is not violation of DRY principle ? I can access this property in both with this.state.characters

Thank you again!

[ssebetta]

Thank you very much Tania 😊. This has given me a great understanding of React.

[silvanet]

This may be beyond the scope of the tutorial, but nothing really gets deleted when you click a delete button. On refresh deleted Bouncer Mac comes right back. Same with the submission form. Whatever you add is only rendered on the DOM. Any refresh goes back to the starting empty content mode. I guess I need to learn a lot more about React.

[taniarascia]

React is a static, front end only framework. The state is temporary. For data persistence you need a backend database, or at the very least localStorage to make the data changes persist on refresh.

[silvanet]

Thanks, I love the way you think, organize, and explain. I'm sure I need to learn a lot more and I'm working on it. At this point, I'm not understanding why you'd delete or submit something that only appears temporarily on the DOM, but "baby steps." At least I learned a lot more than I knew before about structuring folders in a React app, setting up class and arrow function components, importing and exporting resources, rendering data to the DOM, using props, changing states, and more. I like to go over your tutorials a few times to squeeze out what I may have missed.

On Sun, Dec 13, 2020 at 3:15 PM Tania Rascia notifications@github.com wrote:

React is a static, front end only framework. The state is temporary. For data persistence you need a backend database, or at the very least localStorage to make the data changes persist on refresh.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/taniarascia/comments/issues/7#issuecomment-744062159, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABXITGTD7GPXJX6QZDN5OMDSUUOHHANCNFSM4PVUQ6TA .

[GeorginaMedd]

Hi Tania, thank you so much for writing this guide, it has been so helpful for me! I've been going through the tutorial, however noticed that the layout of my table looks really different to the table you have created. I was wondering if you may know why? Thank you so much!

https://drive.google.com/file/d/1zhbABqS1zJGtLY7oggIntoz_RLZO3kz_/view?usp=sharing

[gaigoz]

Hi Tania thank you for the tutorial. There is a difference between learning react using class components instead of function components ? I read that function components are modern than class components.

[aliboura]

very good review , thank

[silvanet]

Hi Tania, thank you so much for writing this guide, it has been so helpful for me! I've been going through the tutorial, however noticed that the layout of my table looks really different to the table you have created. I was wondering if you may know why? Thank you so much!

https://drive.google.com/file/d/1zhbABqS1zJGtLY7oggIntoz_RLZO3kz_/view?usp=sharing

On your question, dunno if Tania responded, but did you finish the tutorial? Oops, I'm wrong, you do have the delete buttons. I couldn't see them as blue. Did you import her stylesheet? What appears to be missing is the table header:

const TableHeader = () => { return (

Name Job Remove

);

}

I tried copying the code section in the Table.js file, but it looks pretty bad.

[silvanet]

I just noticed that while my buttons have the styling and the button colors darken when you hover them, if I remove the person from the list, the new top person button (the one that was beneath the one I deleted) automatically takes the hover darker blue hover color. I'm trying to figure out why that happens.

[PizzISEN]

What a nice Tutorial ! I'll have fun !!

[theeooo]

Amazing tutorial for beginners with this framework, thanks!

[caiosantosf]

thanks tania

[Jaxiea]

@IkramMaududi About your first question, I encountered the same problem. I believe @taniarascia's demonstration is slight bit confusing. So the syntax without constructors should be:

class Form extends Component {

initialState = { name: '', job: '', }; //semicolon needed

state = this.initialState

//Rest of the code for class Form

}

[silvanet]

@IkramMaududi, You may be strictly right about the semicolon, but including or excluding it made no difference for me either on my local server or on hosted playgrounds such as CodePen or StackBliz. The code worked either way.

It may be best practice to include it, but JavaScript seems to be pretty tolerant about that, in this instance at least.

[taniarascia]

Semicolon is neither needed nor is it best practice, but rather personal preference, and no issue will be resolved or created by including or omitting it.

The constructor is no longer required as newer versions of JavaScript allow removing it, but including it won't cause any issues either.

[Jaxiea]

Semicolon is neither needed nor is it best practice, but rather personal preference, and no issue will be resolved or created by including or omitting it.

The constructor is no longer required as newer versions of JavaScript allow removing it, but including it won't cause any issues either.

For some reason not including it caused errors on my machine, I experimented around until I found that was the problem. Now I’m confused 🤷‍♀️

[IkramMaududi]

Semicolon is neither needed nor is it best practice, but rather personal preference, and no issue will be resolved or created by including or omitting it. The constructor is no longer required as newer versions of JavaScript allow removing it, but including it won't cause any issues either.

For some reason not including it caused errors on my machine, I experimented around until I found that was the problem. Now I’m confused 🤷‍♀️

I've read that without semicolon, js automatically decide where the end a statement is. Sometimes JS can make mistakes in deciding where the end of the line is.

For me, since my first language is c/c++, using semicolon is like a habit, it increases readability, and I can stack many lines without having to give so many empty lines here and there

[Jaxiea]

I've read that without semicolon, js automatically decide where the end a statement is. Sometimes JS can make mistakes in deciding where the end of the line is.

For me, since my first language is c/c++, using semicolon is like a habit, it increases readability, and I can stack many lines without having to give so many empty lines here and there

Ah thanks @IkramMaududi for that info! I'm learning JS from Java, the placement of semicolons have been confusing.

[IkramMaududi]

I've read that without semicolon, js automatically decide where the end a statement is. Sometimes JS can make mistakes in deciding where the end of the line is.

For me, since my first language is c/c++, using semicolon is like a habit, it increases readability, and I can stack many lines without having to give so many empty lines here and there

Ah thanks @IkramMaududi for that info! I'm learning JS from Java, the placement of semicolons have been confusing.

Because JS is not python, u can use semicolon like you would in Java. JS is quite a forgiving language, though it may behave differently on different machines unlike java. Sometimes when you follow some js tutorials, you can't recreate it in your machine

[silvanet]

I'll always defer to Tania because I love her articles and tutorials. This is a subject of much opinionated input if you do some searching. JS does have automatic semicolon insertion. I'm sure it's done by rules, so there could be unexpected side effects in particular situations.

As I mentioned, for me it worked with or without the semicolon in your example. That wasn't the case for Jaxiea. I have no idea why. I'm guessing there could be many reasons. Could the editor & linter have anything to do with it? I tried in CodePen and in StackBlitz with no problems either way.

[taniarascia]

I don’t know what’s going on in @Jaxiea’s IDE but adding a semicolon to the end of an object doesn’t make any difference. I write all my code with no semicolons whatsoever.

[silvanet]

That's enough for me.

[azizsaad]

Hi, I have a question.

Lets say I wanted to have a button that would add another table under the current one. This would be a different table with headings 'Name, Age, Height', for example.

How would I implement this additional feature? Currently if I duplicate the table + form, whatever changes I make to the original table are made to the 2nd one.

[ghost]

Hello, what a big tutorial !! Thanks for sharing it. I actually translate this tutorial in french, translate is in progress but it be viewable here: https://cocoriweb.community/tutoriels/react-presentation-et-procedure-pas-a-pas.100/ Thanks !