Introduction to React Flashcards
What is React?
Uses a syntax extension of JavaScript called Jsx that allows you to write HTML directly into JavaScript. JSX is similar to HTML but with some differences. JavaScript can be written in JSX like this { ‘this is treated as JavaScript code’ }.
What must nested JSX do?
Return a single element. This one parent element would wrap all of the other levels of nested elements.
Several JSX elements written with no parent wrapper will not work.
Here’s an example:
Valid JSX:
<div> <p>Paragraph One</p> <p>Paragraph Two</p> <p>Paragraph Three</p> </div> Invalid JSX:
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
What is ReactDOM?
React’s rendering API that allows us to render JSX directly to the HTML DOM.
ReactDOM offers a simple method to render React elements to the DOM which looks like this: ReactDOM.render(componentToRender, targetNode), where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to.
As you would expect, ReactDOM.render() must be called after the JSX element declarations, just like how you must declare variables before using them.
What are the key differences between JSX and HTML?
You can't use the word class in JSX to define a class. JSX instead uses className. In fact, the naming convention for all HTML attributes and event references in JSX become camelCase. For example, a click event in JSX is onClick, instead of onclick. Likewise, onchange becomes onChange. It also differs in that every html element can be self closed and must be closed. For example the line break tag must always be written as <br>, but never as <br> because it contains no content. Div can be written as <div></div> or <div></div>. In the first we can't include anything in it and we'll learn why this is useful later.
What is a component?
“Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.”
What is one of the ways to create a component in React?
Use a JavaScript function. This will create a functionless component. For now think of it as one that can receive data and render it, but does not manage or track changes to that data.
How do you create a component with a function?
To create a component with a function, you simply write a JavaScript function that returns either JSX or null. One important thing to note is that React requires your function name to begin with a capital letter. Here’s an example of a stateless functional component that assigns an HTML class in JSX:
// After being transpiled, the <div> will have a CSS class of 'customClass'
const DemoComponent = function() {
return (
<div></div>
);
};</div>
What’s another way to create a react component?
Using the ES6 class syntax. In the following example, Kitten extends React.Component:
class Kitten extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h1>Hi</h1>
);
}
}
This creates an ES6 class Kitten which extends the React.Component class. So the Kitten class now has access to many useful React features, such as local state and lifecycle hooks. Don't worry if you aren't familiar with these terms yet, they will be covered in greater detail in later challenges. Also notice the Kitten class has a constructor defined within it that calls super(). It uses super() to call the constructor of the parent class, in this case React.Component.
What is the constructor?
Special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component’s constructor with super, and pass props to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as props. Simply put, the constructor aids in constructing things.
How do you make a child components inside of a parent?
You would create a parent component which would render each of the other components as children. The child is written in custom HTML so it's written like this .
class MyApp extends Component {You have to set three child components. How would you do it with syntax?
return (
)
Why is component composition so important in React?
Component composition is one of React’s powerful features. When you work with React, it is important to start thinking about your user interface in terms of components like the App example in the last challenge. You break down your UI into its basic building blocks, and those pieces become the components. This helps to separate the code responsible for the UI from the code responsible for handling your application logic. It can greatly simplify the development and maintenance of complex projects.
How are React Components passed into React.DOM.render()? Example?
React components are passed into ReactDOM.render() a little differently than JSX elements. For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example ReactDOM.render(, targetNode). You use this syntax for both ES6 class components and functional components.
Example: ReactDOM.render(, document.getElementById('challenge-node'));My first React Component that returns h1 to the browser
// Change code below this line
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<h1>My First React Component!</h1>
</div>
);
}
};
ReactDOM.render(, document.getElementById('challenge-node'));
My personal react component
class BeautifulTzuyu extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<h1>Tzuyu is beautiful.</h1>
</div>
)
}
}
ReactDOM.render(, document.getElementById('challenge-node'));
