Give React Developers a solid, ${props}#402
Discuss in words something you learned in class today or this week.
— Global vs. Local State: The state is the current data that our app stores to control its behavior. ex. a checkbox stores data (boolean) if it’s on or off. Global means our state is accessible by every element/component of the app. But the important fact is that it pollutes the whole app since it echoes in every component that accesses it. Local state is not the state we define locally. It has the goal to encapsulate the data flow within the component.
What is the difference between state and props?
— State. In react state helps us to store the component-specific data, the data we stored in the state is private.
— Props. Props are used to pass the parent component (state) data to the child components, it means by using props we are communicating with the child components.
What is ReactDOM? What is the difference between ReactDOM and React?
— ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing following methods and a few more. render () findDOMNode () unmountComponentAtNode ()
— To be more concise, react is for the components and react-dom is for rendering the components in the DOM. ‘react-dom’ acts as a glue between components and DOM. You will be using render () method of the react-dom to render components in the DOM and that’s all you have to know when you are starting off with it.
What is React.createClass?
— New React developers are often confused when they encounter two different styles for declaring React components. The React ecosystem is currently split between the React.createClass component declaration:
const MyComponent = React.createClass({
render() {
return <p>I am a component!</p>;
}
});— And the ES6 class component declaration:
class MyComponent extends React.Component {
render() {
return <p>I am a component, too!</p>;
}
}— Have you been wondering what the difference is between React.createClass and ES6 class components? And why they both exist? And which you should use? Read on ...
First, a little history…
— As a prototypical language, JavaScript didn’t have classes for much of its existence. ES6, the latest version of JavaScript finalized in June 2015, introduced classes as “syntactic sugar.” From MDN:
— The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.
— Because JavaScript didn’t have classes, React included its own class system. React.createClass allows you to generate component "classes." Under the hood, your component class is using a bespoke class system implemented by React.
— With ES6, React allows you to implement component classes that use ES6 JavaScript classes. The end result is the same — you have a component class. But the style is different. And one is using a “custom” JavaScript class system (createClass) while the other is using a "native" JavaScript class system.
— In 2015, when we broke ground for our book, it felt like the community was still largely mixed. Key figures from Facebook were stating that the React.createClass style was just fine. We felt it was easier to understand given that developers were still adopting ES6.
— Since then, the community has been shifting towards ES6 class components. This is for good reason. React used createClass because JavaScript didn't have a built-in class system. But ES6 has enjoyed swift adoption. And with ES6, instead of reinventing the wheel React can use a plain ES6 JavaScript class. This is more idiomatic and less opaque than the custom class generated by createClass.
— So, responding to the momentum, we decided to move over to ES6 class components in the book.
— For the developer, the differences between components created with ES6 classes and createClass are fortunately minimal. If you've learned how to write React components with createClass, should you ever want to use ES6 classes you'll find the transition easy.
Which (if there is) node library method could you use to solve the algorithm problem you solved in class tonight?
— In the group project we installed and used axios to make our fetch calls in our app!
npm i @material-ui/core
Explain event delegation in JavaScript and why it is useful.
— In short, event delegation is a JavaScript method that allows you to interact with child elements by only using a single event listener, on the parent element. With event delegation, you can avoid having to add event handlers to every child element, but you can still find and manipulate them. You’ll see why this is powerful in a moment.
Which new JavaScript / browser features are you most excited about and why?
— replaceAll string method
This one is a long time coming method, I mean, the currently existing replace method should’ve implemented something like this long time ago. In case you’re not aware, currently the replace method from the String object only affects the first match found, unless of course, if you use a regular expression instead of a simple string as the first parameter.
Granted, this is not really a big improvement, more of a convenient addition, but still, it’s definitely appreciated.
