General questions from a newbe learning react

user_4398966 0
Viewed 215

Struggling a little with React. Have the following questions:

  1. Does the virtual dom always have to re render all the nodes below the node that's been changed?
  2. Could someone explain what State is?

  3. It seems you also have to include in script tags babel.min.js to get stuff to work but then the console says

    babel.min.js:24 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production

    is there a different way we should set up test cases?

  4. Using:

    var HelloComponent2 = React.createClass({
render: function() {
   return(
      <h1>Hello, classical</h1>
   );
}
});

I get React.createClass is not a function in the console.

appreciate all the help, thanks.

react-native reactjs
1 Answers

I highly suggest starting here: https://reactjs.org/tutorial/tutorial.html

You can control rerendering via lifecycle events (specifically shouldComponentUpdate()) but don't worry about that for now.

Think of state as everything your component needs to keep track of. It's just an object that you can update and use to move data around your component.

Generally React is written server side, transpiled, and then served. Babel-js is a transpiler for Javascript, and makes it compatible with older stands (basically turns ESNext into ES5). This is normally handled VIA webpack. If you are playing around with React then use create react app to see this in action.

var HelloComponent2 = React.createClass({
render: function() {
   return(
      <h1>Hello, classical</h1>
   );
}
});

is not really modern react. I'm not sure where you learned that but it's very old (though some people do still write react this way imo it's a needless pain). The reason you get undefined error is because React is picky with casing, everything is pascal case so you want to say React.CreateClass. However, I'd suggest trying this modern syntax instead:

class HelloComponent2 extends React.Component {
    constructor(props){
        super(props);
        this.state = {name: props.name}
    }
    render(){
        return(
            <h1>Hello, {this.state.name}</h1>
        )
    }
}
ReactDOM.Render(
    <HelloComponent2 name="DCR" />, 
    document.getElementById("root"))

Check out the official React tutorial to learn more about this stuff. I also highly recommend https://www.tylermcginnis.com his course on React and ES6 is pretty good

user_83784190
Related