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/

[silvanet]

Hey folks, @taniarascia has tons of awesome articles, guides, 🤟 tutorials, totally free to learn from. I learn from her every single day. Everybody, buy her some coffee! ☕️

[JavierTobar]

This was very well written, nice job Tania

[emazack]

Thank you Tania. Just one thing. From "State" on it become more difficult to follow. I had to come back several time to understand. Is not clear for example why from a certain point on, the classeName became "container" and not more "App"

[MunezeroBlaise]

thanks for your help

[JohnJunJi]

Tania 's tutorials writing is the best. I'm NOT exaggerating. Nowadays, the internet is filled with too many craps that waste others' time. Thanks to Tania and a few others like her, they made learning a lot easier!

[jcbeck37]

My gh-pages branch is being created in my react-tutorial repo. However, it is just publishing the /public/ folder which is a generic React App; not the one we've built and compiled. Is there a step missing to point to the compiled app?

[TheRealBenForce]

You should have deleted Dee. She looks like a bird.

[Emzzy123]

Thank you so much for this tutorial.....Helped alot

[LuckyArthas]

Thanks. Cristal Clear.

[renyuns]

🤙🏻🤙🏻🤙🏻

[LuckyArthas]

Hi

On Thu, Apr 1, 2021 at 6:21 PM Ren Yun @.***> wrote:

🤙🏻🤙🏻🤙🏻

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

[lsdyi]

Hello Tania!!!! thanks for having this excellent tutorial for people who are very new in react like me , but I'm wondering why we should pull data in after componentDidMount. Is there any problems as we get the data before inserting the component to the DOM ??? Appreciated so much!!!

[rraj91091]

Beautiful guide. Went through a beginner's course on EdX and got lost and then came here. This guide here really explains everything step-by-step that even someone like me who is new to JS and front-end development can really follow through till the end. Thank you Miss Tania :pray:

[SamuelOkoroShow]

I didn't know that the wikipedia api was open like that. Very similar to github.

[knowltonGitHub]

Can you help - or point me to some help - for this error:

Error: Package exports for 'C:\react-tutorial\node_modules\postcss-safe-parser\node_modules\postcss' do not define a valid '.' target at resolveExportsTarget (internal/modules/cjs/loader.js:460:13) at resolveExports (internal/modules/cjs/loader.js:393:16) at Function.Module._findPath (internal/modules/cjs/loader.js:492:20) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:787:27) at Function.Module._load (internal/modules/cjs/loader.js:693:27) at Module.require (internal/modules/cjs/loader.js:864:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (C:\react-tutorial\node_modules\postcss-safe-parser\lib\safe-parse.js:1:17) at Module._compile (internal/modules/cjs/loader.js:971:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10) { code: 'MODULE_NOT_FOUND' } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-tutorial@0.1.0 start: react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-tutorial@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ENDER\AppData\Roaming\npm-cache_logs\2021-05-16T16_32_33_634Z-debug.log

[diegomouradev]

Thank you! I was hating React until I came across your post. Now I understand state, props and components better and I feel I can continue my learning journey!

[knowltonGitHub]

That's great!

On Tue, May 25, 2021 at 1:58 AM Diego Moura @.***> wrote:

Thank you! I was hating React until I came across your post. Now I understand state, props and components better and I feel I can continue my learning journey!

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

[techxpert-mohit]

I have been learning react from video sessions but the concepts were not clear, hence I was not that much confident to work on my project. When I read this article I am simply amazed with the approach of teaching, so simple and clear. Definitely this is an amazing stuff to start with React and I have kept this page as a bookmark. Really liked the content...

[eransevil]

Thank you very much !

[kkuzmov]

Thank you, Tania! Great article for React beginners!

[Raaseem]

Thanks Tania .it was great

[wudixiaoyu008]

Thank you so much Tania, this is the best react tutorial for beginners!

[liuyx001]

Thank you very much Tania. it is very helpful for beginners

[diazsasak]

Thank you Tania, very helpful

[myejin]

Thank you very much Tania!!

[thenewforktimes]

Hello React Friends <3 I've been stuck on refactoring this tutorial without Class based components, and with the React Hooks that have been released since this went live. When I fire off my delete button to remove my least favorite character from the show, I don't get any compilation errors, but I get this – Error: Invalid hook call. Hooks can only be called inside of the body of a function component. I'll CC my app.js and table.js files below, thank you for any insight and learnings that will help me get unstuck.

import React, { useState } from "react"; import Table from "./Table";

const App = () => { const characters = [ { name: "Charlie", job: "Janitor", }, { name: "Mac", job: "Bouncer", }, { name: "Dee", job: "Aspring actress", }, { name: "Dennis", job: "Bartender", }, ];

const DeleteCharacter = (index) => { const [characterData, deleteCharacter] = useState(characters); deleteCharacter({ characters: characterData.filter((character, i) => { return i !== index; }), }); }; return (

); }; export default App; const TableHeader = () => { return (

); };

const TableBody = (props) => { const rows = props.characterData.map((row, index) => { return (

);

}); return

{rows}; };

const Table = (props) => { const { characterData, deleteCharacter } = props; return (

Name	Job	Remove
{row.name}	{row.job}	props.deleteCharacter(index)}>Delete

); }; export default Table;

[reposman33]

Nice article! About the deployment to github pages: is running npm run build before npm run deploy not superfluous since the predeploy hook already runs npm run build?

[MestreALMO]

This is a pretty good tutorial! good job and thank you for it! 😁

[Tran-Van-Bong-95]

how to know App.js and Form.js have their own states ? because I still don't understand "since it turns out that the only components having their own states in our project are App and Form," in the article ?

[NgoranA]

@ thenewforktimes Remove your useState() hook from the delete function! It should be placed right in the App component

[youssef-aitali]

Great Overview for React foundations! Thanks Tania.

[maendoza]

Thank you, very nice tutorial

[videvelop]

Thank you! you saved lot of time for me!

[aarontgrogg]

Hey there, truly impressive!

Quick note: In the "Submitting Form Data" section, everything worked fine, but when I clicked "Submit", I briefly saw my new entry, but then the page refreshed...

Solved by passing the event into the submitForm method, then using the classic event.preventDefault();. Is there a better version of this?

Thanks again!

[KutanaDev]

Thank you for creating this tutorial - I think it is really excellent. There is a tiny typo: Aspring actress

[Gozde027]

Great tutorial! Thanks

[tractortoby]

Thanks Tania. If you get an error message like me after npm run deploy: Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option), you probably forget git remote add origin https://github.com/yourname/project and git push --set-upstream origin master after creating new repository.

[Kaunaj]

Thanks for the easy-to-follow tutorial with clear explanations. Really good for people at all levels looking to get their feet wet in React. I followed along and created my own version of the app, adding very basic checks and edit functionality. For anyone interested, here is the demo: https://kaunaj.github.io/first-react-app/

[t4selva]

Today, Many React js developers are not using Class based components, including me, they are using Functional based components. on the other side, React js is a fully js library. Its very hard to scale up big projects. So NEXT.JS is very popular now. I am also using next js ( React Framework ).

[dev-debug]

... 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']

Why do I get a "Parsing error: Identifier 'TableHeader' has already been declared in the javascript spread object. I am new to react

[kfusilier]

About halfway through you stop showing what the whole page should look like so the content of the changes is lost on a newbie. Can't get past the adding delete button section, it's unclear what needs to stay and go. I've tried it 5 different ways and they all show errors. Update this tutorial if it's going to be linked on the react docs please!

[thaitina5]

Hi Tania, i'm finished at "Submitting Form Data" step but after i pressed Submit button nothing appear in Table. I did checked again handleChange() method, it still works. Any ideas why i fail? Thanks

[julesrufo26]

Thank you Tania :)

[rhammell]

Thanks for writing this, its very helpful!

[manuellaines]

hello Tania thank you for your explanations they are very interesting you really touch the basics and suddenly it helps us a lot we beginners

[gaetano44]

Thanks for posting this! Very helpful.

[101is5]

Greetings! This isn't a question but rather a comment itself, about using <input> instead of <button> on the Form component. I wanted to experiment replacing the tag -for submitting the new character- with a tag and, to my surprise, behaved quite differently than : it added a new character but then immediately "deleted" it. Now, a 's default type is (usually) "submit", which causes a page to refresh, and that's what was actually happening. Solution: specify the 's type, which in this case must be -guess what- "button", in order to prevent the refreshing, which wouldn't happen with because it already had a "type='button'" attribute (otherwise it wouldn't be a button). Anyway, pretty basic stuff, I guess. But if you've got confused with it as I did, there you go!

[101is5]

Greetings! This isn't a question but rather a comment itself, about using instead of on the Form component. I wanted to experiment replacing the <input> tag -for submitting the new character- with a <button> tag and, to my surprise, <button> behaved quite differently: it added a new character but then immediately "deleted" it. Now, a <button>'s default type is (usually) "submit", which causes a page to refresh, and that's what was actually happening. Solution: specify the <button>'s type, which in this case must be -guess what- "button", in order to prevent the refreshing, which wouldn't happen with <input> because it already had a "type='button'" attribute (otherwise it wouldn't be a button). Anyway, pretty basic stuff, I guess. But if you've got confused with it as I did, there you go!

[yandeng1300547005]

good 牛逼 我学到了

[Jiec-er]

Thank you Tania! it's helpful for me!