# Intro To React ## Introduction to React for Complete Beginners All of the code examples below will be included a second time at the bottom of this article as an embedded gist. *** #### Introduction to React for Complete Beginners All of the code examples below will be included a second time at the bottom of this article as an embedded gist, so that it is properly syntax highlighted. React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. ![](https://cdn-images-1.medium.com/max/1200/0*Olfj44MF6WSzvlSM.png) #### React > *React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript* > *because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX* > *include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' }* > *JSX code must be compiled into JavaScript* > *under the hood the challenges are calling ReactDOM.render (JSX, document.getElementById('root'))* > *One important thing to know about nested JSX is that it must return a single element.* > *For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.* *** #### From the React Docs: #### What is React? React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React has a few different kinds of components, but we'll start with `React.Component` subclasses: ``` class ShoppingList extends React.Component { render() { return (

Shopping List for {this.props.name}

); } } // Example usage: ``` We'll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components. Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for “properties”), and returns a hierarchy of views to display via the `render` method. The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The `
` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to: ``` return React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */) ); ``` *** #### Valid JSX: ```

Paragraph One

Paragraph Two

Paragraph Three

``` *** #### Invalid JSX: ```

Paragraph One

Paragraph Two

Paragraph Three

``` **To put comments inside JSX, you use the syntax {/\* \*/} to wrap around the comment text.** To put comments inside JSX, you use the syntax {/\* \*/} to wrap around the comment text. The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided div element, without modifying the existing h1 or p elements. ``` const JSX = (
{/* This is a comment */}

This is a block of JSX

Here's a subtitle

); ``` *** > *With React, we can render this JSX directly to the HTML DOM using React's rendering API known as ReactDOM.* > *ReactDOM offers a simple method to render React elements to the DOM which looks like this:* `ReactDOM.render(componentToRender, targetNode)` * 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. > *ReactDOM.render() must be called after the JSX element declarations, just like how you must declare variables before using them.* > *key difference in JSX is that you can no longer use the word class to define HTML classes.* * — -> This is because class is a reserved word in JavaScript. Instead, JSX uses className > *the naming convention for all HTML attributes and event references in JSX become camelCase* > *a click event in JSX is onClick, instead of onclick. Likewise, onchange becomes onChange. While this is a subtle difference, it is an important one to keep in mind moving forward.* #### Apply a class of myDiv to the div provided in the JSX code. * The constant JSX should return a div element. * The div should have a class of myDiv. ``` const JSX = (

Add a class to this div

); ``` #### Ans: ``` const JSX = (

Add a class to this div

); ``` #### React: Learn About Self-Closing JSX Tags -Another important way in which JSX differs from HTML is in the idea of the self-closing tag. > *In HTML, almost all tags have both an opening and closing tag:* `
;` *the closing tag always has a forward slash before the tag name that you are closing.* > *there are special instances in HTML called “self-closing tags”, or tags that don't require both an opening and closing tag before another tag can start.* > *For example the line-break tag can be written as* `
` *or as* `
,` *but should never be written as* `

`*, since it doesn't contain any content.* > *In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed.*\ > \&#xNAN;*The line-break tag, for example, must always be written as* `
` *in order to be valid JSX that can be transpiled.*\ > \&#xNAN;*A* `
`*, on the other hand, can be written as* `
`*or*`
`*.*\ > \&#xNAN;*The difference is that in the first syntax version there is no way to include anything in the* `
`*.* #### Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don't change any of the content — you only need to close tags where they are needed. ``` const JSX = (

Welcome to React!


Be sure to close all tags!

); ``` #### Ans: ``` const JSX = (

Welcome to React!


Be sure to close all tags!

); ``` *** #### React: Create a Stateless Functional Component > *There are two ways to create a React component. The first way is to use a JavaScript function.* > *Defining a component in this way creates a stateless functional component.* > *think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data.* **To create a component with a function, you simply write a JavaScript function that returns either JSX or null** * 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
will have a CSS class of 'customClass' const DemoComponent = function() { return (
); }; ``` > *Because a JSX component represents HTML, you could put several components together to create a more complex HTML page.* #### The code editor has a function called MyComponent. Complete this function so it returns a single div element which contains some string of text. Note: The text is considered a child of the div element, so you will not be able to use a self-closing tag. ``` const MyComponent = function() { // Change code below this line // Change code above this line } ``` #### ANS: ``` const MyComponent = function() { // Change code below this line return (
Some Text
); // Change code above this line }; ``` *** #### React: Create a React Component > *The other way to define a React component is with the ES6 class syntax. In the following example, Kitten extends React.Component:* ``` class Kitten extends React.Component { constructor(props) { super(props); } render() { return (

Hi

); } } ``` > *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.* > *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* > *The constructor is a 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.* #### MyComponent is defined in the code editor using class syntax. Finish writing the render method so it returns a div element that contains an h1 with the text Hello React!. ``` class MyComponent extends React.Component { constructor(props) { super(props); } render() { // Change code below this line // Change code above this line } }; ``` #### ANS: ``` class MyComponent extends React.Component { constructor(props) { super(props); } render() { // Change code below this line return (

Hello React!

); // Change code above this line } }; ``` *** #### React: Create a Component with Composition > *Imagine you are building an App and have created three components, a Navbar, Dashboard, and Footer.* > *To compose these components together, you could create an App parent component which renders each of these three components as children. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX.* * For example, in the render method you could write: ``` return (