taniarascia / react-tutorial

A walkthrough of basic React concepts.

React Tutorial

Learn the fundamentals of React including simple and class components, state, props, and submitting form data.

View the demo | Read the tutorial

Purpose

• Learn about essential React concepts and related terms, such as Babel, Webpack, JSX, components, props, state, and lifecycle.
• Build a very simple React app that demonstrates the above concepts.

Author

• Tania Rascia

License

This project is open source and available under the MIT License.

react-tutorial's Issues

Very good.

Thank you for sharing.

Updating Blog

I've started learning React from blog, and while it's extremely well written, but i did face one issue.

In State section, you used the following code

where as, it should have been

<div className="container"> <Table characterData={this.state.characters} removeCharacter={this.removeCharacter} /> </div>

Otherwise, "characters" isn't recognized by our "Table" element.

React might have been updated since then, due to which this error/issue is coming now.

Resolution

So, basically, the blog does mention that we need to add
"const { characters } = this.state". This line kept skipping me eyes.

removechracter shows not a function while clicking delete button

TypeError: props.removecharacter is not a function
onClick
C:/Users/naveen raj rk/Desktop/new2/mydemoapp/src/Table.js:22

19 | {row.name}
20 | {row.job}
21 |

22 | <Button onClick={()=>props.removecharacter(index)}>Delete
| ^ 23 |
24 |
25 | );

Question eslint issue in tutorial section state https://www.taniarascia.com/getting-started-with-react/

I am getting an error with the unexpected token in the section about State. It has to do with jslint and '<'
in the return (< . Can you help configure this?

Why React?

You have answered What is React? But Why should I adopt React? Why was it invented? What problem does it solve? This will be useful info. Thx

'characters' is not defined

I get this error when adding the removeCharacter method to the App component and I can't figure out what's wrong, please help.

./src/App.js
  Line 39:31:  'characters' is not defined  no-undef

Search for the keywords to learn more about each error.

class App extends Component {
  state = {
    characters: [
      {
          name: 'Charlie',
          job: 'Janitor'
      },
      {
          name: 'Mac',
          job: 'Bouncer'
      },
      {
          name: 'Dee',
          job: 'Aspiring actress'
      },
      {
          name: 'Dennis',
          job: 'Bartender'
      }
  ]
  }

  removeCharacter = (index) => {
    const {characters} = this.state
  
    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index
      }),
    })
  }

  render () {
    return (
      <div className='container'>
        <Table characterData={characters} removeCharacter={this.removeCharacter} />
      </div>
    )
  }
}

I am unable to run this [react-tutorial-master] this project.

see attached screenshot.

##@taniarascia

Alternative approach

In my App.js I have the method to handle adding a new user (with name and job fields)

    addCharacter = (name, job) => {
      this.setState(
        {
          characters: [...this.state.characters, {name, job}]
        }
      );
    }

And I use the functional Form component :

const Form = (props) => {
  return (
    <form>
      <input name='name' />
      <input name='job' />
      <button type='button' onClick={() => {
        props.addCharacter(
          // use any preferred approach to reference the value in need
          document.forms[0].elements.name.value,
          document.forms[0].elements.job.value
        )
        }}>
        Add
      </button>
    </form>
  )
}

Since your source code is drastically different ( it has a bit more lines and it's kind of hard to easily comprehend for me yet), can you point disadvantages of the way I approached it ( if any ) ?

Code generated fails HTML validation

Hello - its a useful tutorial but the HTML generated by Jekyll has multiple errors and warnings with unclosed and unmatched elements.

The output from the generated site can be checked here https://validator.w3.org/nu/?doc=http%3A%2F%2Ftaniarascia.github.io%2Fstartjekyll%2Fabout%2F

Thanks