Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div class="main-body">
  <div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-sm-12 col-xs-12">
          <nav id="navbar">
            <header>React Documentation</header>
                <ul class="nav nav-pills nav-stacked">
                    <a class="nav-link" href="#Introduction">
                        <li>Introduction</li>
                    </a>
                    <a class="nav-link" href="#Hello_World">
                        <li>Hello World</li>
                    </a>
                    <a class="nav-link" href="#Introducing_JSX">
                        <li>Introducing JSX</li>
                    </a>
                    <a class="nav-link" href="#Rendering_Elements">
                        <li>Rendering Elements</li>
                    </a>
                    <a class="nav-link" href="#Components_and_Props">
                        <li>Components and Props</li>
                    </a>
                    <a class="nav-link" href="#State_and_Lifecycle">
                        <li>State and Lifecycle</li>
                    </a>
                    <a class="nav-link" href="#Handling_Events">
                        <li>Handling Events</li>
                    </a>
                    <a class="nav-link" href="#Conditional_Rendering">
                        <li>Conditional Rendering</li>
                    </a>
                    <a class="nav-link" href="#Lists_and_Keys">
                        <li>Lists and Keys</li>
                    </a>
                    <a class="nav-link" href="#Forms">
                        <li>Forms</li>
                    </a>
                    <a class="nav-link" href="#Lifting_State_Up">
                        <li>Lifting State Up</li>
                    </a>
                    <a class="nav-link" href="#Composition_vs_Inheritance">
                        <li>Composition vs Inheritance</li>
                    </a>
                    <a class="nav-link" href="#Thinking_In_React">
                        <li>Thinking In React</li>
                    </a>
                </ul>
            </nav>
        </div>

 				<div class="col-md-10 col-sm-12 col-xs-12">
					<main id="main-doc">
					  <section class="main-section" id="Introduction">
						<header>Introduction</header>
						<article>
							<h4>This page is an overview of the <a target="_blank" href="https://reactjs.org/docs/getting-started.html">React documentation</a> and related resources.</h4>
              <h3>Topics</h3>
							<p>React is a JavaScript library for building user interfaces. Learn what React is all about on <a target="_blank" href="https://reactjs.org/">our homepage</a> or <a target="_blank" href="https://reactjs.org/tutorial/tutorial.html">in the tutorial</a>.</p>
              <ul>
                  <li>Try React</li>
                  <li>Learn React</li>
                  <li>Staying Informed</li>
                  <li>Versioned Documentation</li>
                  <li>Something Missing?</li>
							</ul>
							<h3>Try React</h3>
							<p>React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.</p>
							<h3>Online Playgrounds</h3>
							<p>If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on <a target="_blank" href="https://codepen.io/pen?&editors=0010">CodePen</a> or <a target="_blank" href="https://codesandbox.io/s/new">CodeSandbox</a>. <br>
							If you prefer to use your own text editor, you can also <a target="_blank" href="https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html">download this HTML file</a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos.</p>

							<h3>Add React to a Website</h3>
							<p>You can <a target="_blank" href="https://reactjs.org/docs/add-react-to-a-website.html">add React to an HTML page in one minute</a>. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.</p>

							<h3>Create a New React App</h3>
							<p>When starting a React project, <a target="_blank" href="https://reactjs.org/docs/add-react-to-a-website.html">a simple HTML page with script tags</a> might still be the best option. It only takes a minute to set up! <br>

							As your application grows, you might want to consider a more integrated setup. There are <a target="_blank" href="https://reactjs.org/docs/create-a-new-react-app.html">several JavaScript toolchains</a> we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. </p>

							<h3>Learn React</h3>
							<p>People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you’ll find this section helpful. <br>

							If you prefer to <strong>learn by doing</strong>, start with our <a target="_blank" href="https://reactjs.org/tutorial/tutorial.html">practical tutorial</a>.
							If you prefer to <strong>learn concepts step by step</strong>, start with our <a target="_blank" href="https://reactjs.org/docs/hello-world.html">guide to main concepts</a>.
							Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you will get the hang of it. </p>

							<h3>First Examples</h3>
							<p>The <a target="_blank" href="https://reactjs.org/">React homepage</a> contains a few small React examples with a live editor. Even if you don’t know anything about React yet, try changing their code and see how it affects the result. </p>

							<h3>React for Beginners</h3>
							<p>If you feel that the React documentation goes at a faster pace than you’re comfortable with, check out <a target="_blank" href="https://www.taniarascia.com/getting-started-with-react/">this overview of React by Tania Rascia</a>. It introduces the most important React concepts in a detailed, beginner-friendly way. Once you’re done, give the documentation another try!</p>

							<h3>React for Designers</h3>
							<p>If you’re coming from a design background, <a target="_blank" href="http://reactfordesigners.com/">these resources</a> are a great place to get started.</p>

							<h3>JavaScript Resources</h3>
							<p>The React documentation assumes some familiarity with programming in the JavaScript language. You don’t have to be an expert, but it’s harder to learn both React and JavaScript at the same time.<br>

							We recommend going through this <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript overview</a> to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.</p>

							<h3>Tip</h3>

							<p>Whenever you get confused by something in JavaScript, <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">MDN</a> and <a target="_blank" href="http://javascript.info/">javascript.info</a> are great websites to check. There are also <a target="_blank" href="https://reactjs.org/community/support.html">community support forums</a> where you can ask for help.</p>

							<h3>Practical Tutorial</h3>
							<p>If you prefer to <strong>learn by doing</strong>, check out our <a target="_blank" href="https://reactjs.org/tutorial/tutorial.html">practical tutorial</a>. In this tutorial, we build a tic-tac-toe game in React. You might be tempted to skip it because you’re not building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a much deeper understanding.</p>

							<h3>Step-by-Step Guide</h3>
							<p>If you prefer to <strong>learn concepts step by step</strong>, our <a target="_blank" href="https://reactjs.org/docs/hello-world.html">guide to main concepts</a> is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won’t miss anything as you go along.</p>

							<h3>Thinking in React</h3>
							<p>Many React users credit reading <a target="_blank" href="https://reactjs.org/docs/thinking-in-react.html">Thinking in React</a> as the moment React finally “clicked” for them. It’s probably the oldest React walkthrough but it’s still just as relevant.</p>

							<h3>Recommended Courses</h3>
							<p>Sometimes people find third-party books and video courses more helpful than the official documentation. We maintain <a target="_blank" href="https://reactjs.org/community/courses.html">a list of commonly recommended resources</a>, some of which are free.</p>

							<h3>Advanced Concepts</h3>
							<p>Once you’re comfortable with the <a target="_blank" href="https://reactjs.org/docs/getting-started.html#main-concepts">main concepts</a> and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like <a target="_blank" href="https://reactjs.org/docs/context.html">context</a> and <a target="_blank" href="https://reactjs.org/docs/refs-and-the-dom.html">refs</a>.</p>

							<h3>API Reference</h3>
							<p>This documentation section is useful when you want to learn more details about a particular React API. For example, <a target="_blank" href="https://reactjs.org/docs/react-component.html">React.Component API reference</a> can provide you with details on how <code>setState()</code> works, and what different lifecycle methods are useful for.</p>

							<h3>Glossary and FAQ</h3>
							<p>The <a target="_blank" href="https://reactjs.org/docs/glossary.html">glossary</a> contains an overview of the most common terms you’ll see in the React documentation. There is also a FAQ section dedicated to short questions and answers about common topics, including <a target="_blank" href="https://reactjs.org/docs/faq-ajax.html">making AJAX requests</a>, <a target="_blank" href="https://reactjs.org/docs/faq-state.html">component state</a>, and <a target="_blank" href="https://reactjs.org/docs/faq-structure.html">file structure</a>.</p>

							<h3>Staying Informed</h3>
							<p>The <a target="_blank" href="https://reactjs.org/blog/">React blog</a> is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted there first.<br>

							You can also follow the <a target="_blank" href="https://twitter.com/reactjs">@reactjs account</a> on Twitter, but you won’t miss anything essential if you only read the blog.<br>

							Not every React release deserves its own blog post, but you can find a detailed changelog for every release <a target="_blank" href="https://github.com/facebook/react/blob/master/CHANGELOG.md">in the CHANGELOG.md file in the React repository</a>, as well as on the <a target="_blank" href="https://github.com/facebook/react">Releases</a> page.</p>

							<h3>Versioned Documentation</h3>
							<p>This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation <a target="_blank" href="https://reactjs.org/versions">on a separate page</a>. Note that documentation for past versions is snapshotted at the time of the release, and isn’t being continuously updated.</p>

							<h3>Something Missing?</h3>
							<p>If something is missing in the documentation or if you found some part confusing, please <a target="_blank" href="https://github.com/reactjs/reactjs.org/issues/new">file an issue for the documentation repository</a> with your suggestions for improvement, or tweet at the <a target="_blank" href="https://twitter.com/reactjs">@reactjs account</a>. We love hearing from you!</p>
						</article>
					  </section>
					  <section class="main-section" id="Hello_World">
						<header>Hello World</header>
						<article>
							<h3>Hello World</h3>
							<p>The smallest React example looks like this:</p>
							<pre><code class="jsx language-jsx">
							ReactDOM.render(
							&lt;h1&gt;Hello, world!&lt;/h1&gt;,
							document.getElementById('root')
							);
							</code></pre>
							<p>It displays a heading saying “Hello, world!” on the page.</p>

							<a target="_blank" href="https://reactjs.org/redirect-to-codepen/hello-world">Try it on CodePen</a>

							<p>Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one.</p>

							<h3>How to Read This Guide</h3>
							<p>In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.</p>

							<h3>Tip</h3>

							<p>This guide is designed for people who prefer learning concepts step by step. If you prefer to learn by doing, check out our practical tutorial. You might find this guide and the tutorial complementary to each other.

							This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you’re reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.

							Every chapter in this guide builds on the knowledge introduced in earlier chapters. You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar. For example, “Introducing JSX” is the next chapter after this one.<p>

							<h3>Knowledge Level Assumptions</h3>
							<p>React is a JavaScript library, and so we’ll assume you have a basic understanding of the JavaScript language. If you don’t feel very confident, we recommend going through a JavaScript tutorial to check your knowledge level and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won’t have to feel like you’re learning both React and JavaScript at the same time.</p>

							<h3>Note</h3>

							<p>This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years, these three points should get you most of the way.</p>

							<h3>Let’s Get Started!</h3>
							<p>Keep scrolling down, and you’ll find the link to the next chapter of this guide right before the website footer.</p>
						  
						</article>
					  </section>
					  <section class="main-section" id="Introducing_JSX">
						<header>Introducing JSX</header>
						<article>
							<p>Consider this variable declaration:</p>

							<pre><code class="jsx language-jsx">const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;; </code></pre>
							<p>This funny tag syntax is neither a string nor HTML.

							It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

							JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.</p>

							<h3>Why JSX?</h3>
							<p>React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. <br>

							Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise. <br>

							React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. <br>

							With that out of the way, let’s get started!</p>

							<h3>Embedding Expressions in JSX</h3>
							<p>In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:</p>
							<pre><code class="jsx language-jsx">
							const name = 'Josh Perez';
							const element = &lt;h1&gt;Hello, {name}&lt;/h1&gt;;

							ReactDOM.render(
							  element,
							  document.getElementById('root')
							); </code></pre>
							<p>You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.<br>

							In the example below, we embed the result of calling a JavaScript function, formatName(user), into an &lt;h1&gt;  element.</p>

							<pre><code class="jsx language-jsx">
							function formatName(user) {
							  return user.firstName + ' ' + user.lastName;
							}

							const user = {
							  firstName: 'Harper',
							  lastName: 'Perez'
							};

							const element = (
							  &lt;h1&gt;
								Hello, {formatName(user)}!
							  &lt;/h1&gt;
							);

							ReactDOM.render(
							  element,
							  document.getElementById('root')
							); </code></pre>
							<p>Try it on CodePen <br>

							We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.</p>

							<h3>JSX is an Expression Too</h3>
							<p>After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

							This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:</p>

							<pre><code class="jsx language-jsx">
							function getGreeting(user) {
							  if (user) {
								return &lt;h1&gt;Hello, {formatName(user)}!&lt;/h1&gt;;
							  }
							  return &lt;h1&gt;Hello, Stranger.&lt;/h1&gt;;
							} </code></pre>
							<h3>Specifying Attributes with JSX</h3>
							<p>You may use quotes to specify string literals as attributes:</p>

							<pre><code class="jsx language-jsx">const element = &lt;div tabIndex=&quot;0&quot;&gt;&lt;/div&gt;; </code></pre>
							<p>You may also use curly braces to embed a JavaScript expression in an attribute:</p>

							<pre><code class="jsx language-jsx">const element = &lt;img src={user.avatarUrl}&gt;&lt;/img&gt;; </code></pre>
							<p>Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.</p>

							<h3>Warning:</h3>

							<p>Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.<br>

							For example, class becomes className in JSX, and tabindex becomes tabIndex.</p>

							<h3>Specifying Children with JSX</h3>
							<p>If a tag is empty, you may close it immediately with />, like XML:<//p>

							const element = <img src={user.avatarUrl} />;
							<p>JSX tags may contain children:</p>

							<pre><code class="jsx language-jsx">
							const element = (
							  &lt;div&gt;
								&lt;h1&gt;Hello!&lt;/h1&gt;
								&lt;h2&gt;Good to see you here.&lt;/h2&gt;
							  &lt;/div&gt;
							); </code></pre>
							<p>JSX Prevents Injection Attacks
							It is safe to embed user input in JSX:</p>

							<pre><code class="jsx language-jsx">
							const title = response.potentiallyMaliciousInput;
							// This is safe:
							const element = &lt;h1&gt;{title}&lt;/h1&gt;; </code></pre>
							<p>By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks. </p>

							<h3>JSX Represents Objects</h3>
							<p>Babel compiles JSX down to React.createElement() calls. <br>

							These two examples are identical:</p>

							<pre><code class="jsx language-jsx"> 
							const element = (
							  &lt;h1 className=&quot;greeting&quot;&gt;
								Hello, world!
							  &lt;/h1&gt;
							); </code></pre>
							<pre><code class="jsx language-jsx"> 
							const element = React.createElement(
							  'h1',
							  {className: 'greeting'},
							  'Hello, world!'
							); </code></pre>
							<p>React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this: </p>

							<pre><code class="jsx language-jsx">
							// Note: this structure is simplified
							const element = {
							  type: 'h1',
							  props: {
								className: 'greeting',
								children: 'Hello, world!'
							  }
							}; </code></pre>
							<p>These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

							We will explore rendering React elements to the DOM in the next section. </p>

							<h3>Tip: </h3>

							<p>We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the Oceanic Next color scheme which is compatible with it. </p>
						</article>
					  </section>
      <section class="main-section" id="Rendering_Elements">
						<header>Rendering Elements</header>
					   <article>
							<p>Elements are the smallest building blocks of React apps.<br>

							An element describes what you want to see on the screen:</p>

							<pre><code class="jsx language-jsx"> const element = &lt;h1&gt;Hello, world&lt;/h1&gt;; </code></pre>
							<p>Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.</p>

							<h3>Note:</h3>

							<p>One might confuse elements with a more widely known concept of “components”. We will introduce components in the next section. Elements are what components are “made of”, and we encourage you to read this section before jumping ahead.<br>

							<h3>Rendering an Element into the DOM</h3>
							Let’s say there is a &lt;div&gt; somewhere in your HTML file:</p>

							<pre><code class="jsx language-jsx"> &lt;div id=&quot;root&quot;&gt;&lt;/div&gt; </code></pre>
							<p>We call this a “root” DOM node because everything inside it will be managed by React DOM. <br>

							Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. <br>

							To render a React element into a root DOM node, pass both to ReactDOM.render(): </p>

							<pre><code class="jsx language-jsx">
							const element = &lt;h1&gt;Hello, world&lt;/h1&gt;;
							ReactDOM.render(element, document.getElementById('root')); </code></pre>
							<p>Try it on CodePen <br>

							It displays “Hello, world” on the page. </p>

							<h3>Updating the Rendered Element</h3>
							<p>React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. <br>

							With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render(). <br>

							Consider this ticking clock example:</p>
							
							<pre><code class="jsx language-jsx">
							function tick() {
							  const element = (
								&lt;div&gt;
								  &lt;h1&gt;Hello, world!&lt;/h1&gt;
								  &lt;h2&gt;It is {new Date().toLocaleTimeString()}.&lt;/h2&gt;
								&lt;/div&gt;
							  );
							  ReactDOM.render(element, document.getElementById('root'));
							}

							setInterval(tick, 1000); </code></pre>
							<p> Try it on CodePen <br>

							It calls ReactDOM.render() every second from a setInterval() callback. </p>

							<h3>Note: </h3>

							<p>In practice, most React apps only call ReactDOM.render() once. In the next sections we will learn how such code gets encapsulated into stateful components. <br>

							We recommend that you don’t skip topics because they build on each other. </p>

							<h3>React Only Updates What’s Necessary </h3>
							<p>React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. <br>

							You can verify by inspecting the last example with the browser tools: <br>

							DOM inspector showing granular updates <br>

							Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM. <br>

							In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs. </p>
						</article>
					  </section>
       <section class="main-section" id="Components_and_Props">
						<header>Components and Props</header>
						<article>
							<p>Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here. <br>

							Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.<p>

							<h3>Function and Class Components</h3>
							<p>The simplest way to define a component is to write a JavaScript function:</p>

							<pre><code class="jsx language-jsx">
							function Welcome(props) {
							  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
							} </code></pre>
							<p>This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.<br>

							You can also use an ES6 class to define a component:</p>
							<pre><code class="jsx language-jsx">
							class Welcome extends React.Component {
							  render() {
								return &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt;;
							  }
							} </code></pre>
							<p>The above two components are equivalent from React’s point of view.

							Classes have some additional features that we will discuss in the next sections. Until then, we will use function components for their conciseness. </p>

							<h3>Rendering a Component </h3>
							<p>Previously, we only encountered React elements that represent DOM tags:</p>

							<pre><code class="jsx language-jsx"> const element = &lt;div /&gt;; </code></pre>
							<p>However, elements can also represent user-defined components:</p>

							<pre><code class="jsx language-jsx"> const element = &lt;Welcome name=&quot;Sara&quot; /&gt;; </code></pre>
							<p>When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.<br>

							For example, this code renders “Hello, Sara” on the page:</p>

							<pre><code class="jsx language-jsx">
							function Welcome(props) {
							  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
							}

							const element = &lt;Welcome name=&quot;Sara&quot; /&gt;;
							ReactDOM.render(
							  element,
							  document.getElementById('root')
							); </code></pre>
							<p>Try it on CodePen <br>

							Let’s recap what happens in this example: </p>

							<p> We call ReactDOM.render() with the &lt;Welcome name=&quot;Sara&quot; /&gt; element. 
							React calls the Welcome component with {name: 'Sara'} as the props.
							Our Welcome component returns a &lt;h1&gt;Hello, Sara&lt;/h1&gt; element as the result.
							React DOM efficiently updates the DOM to match &lt;h1&gt;Hello, Sara&lt;/h1&gt;.
							Note: Always start component names with a capital letter. <br>

							React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope. <br>

							You can read more about the reasoning behind this convention here.  </p>

							<h3>Composing Components</h3>
							<p>Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components. <br>

							For example, we can create an App component that renders Welcome many times: </p>

							<pre><code class="jsx language-jsx">
							function Welcome(props) {
							  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
							}

							function App() {
							  return (
								&lt;div&gt;
								  &lt;Welcome name=&quot;Sara&quot; /&gt;
								  &lt;Welcome name=&quot;Cahal&quot; /&gt;
								  &lt;Welcome name=&quot;Edite&quot; /&gt;
								&lt;/div&gt;
							  );
							}

							ReactDOM.render(
							  &lt;App /&gt;,
							  document.getElementById('root')
							); </code></pre>
							<p>Try it on CodePen <br>

							Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy. </p>

							<h3>Extracting Components</h3>
							<p>Don’t be afraid to split components into smaller components. <br>

							For example, consider this Comment component: </p>

							<pre><code class="jsx language-jsx">
							function Comment(props) {
							  return (
								&lt;div className=&quot;Comment&quot;&gt;
								  &lt;div className=&quot;UserInfo&quot;&gt;
									&lt;img className=&quot;Avatar&quot;
									  src={props.author.avatarUrl}
									  alt={props.author.name}
									/&gt;
									&lt;div className=&quot;UserInfo-name&quot;&gt;
									  {props.author.name}
									&lt;/div&gt;
								  &lt;/div&gt;
								  &lt;div className=&quot;Comment-text&quot;&gt;
									{props.text}
								  &lt;/div&gt;
								  &lt;div className=&quot;Comment-date&quot;&gt;
									{formatDate(props.date)}
								  &lt;/div&gt;
								&lt;/div&gt;
							  );
							} </code></pre>
							<p>Try it on CodePen <br>

							It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website. <br>

							This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let’s extract a few components from it. <br>

							First, we will extract Avatar: </p>

							<pre><code class="jsx language-jsx">
							function Avatar(props) {
							  return (
								&lt;img className=&quot;Avatar&quot;
								  src={props.user.avatarUrl}
								  alt={props.user.name}
								/&gt;

							  );
							} </code></pre>
							<p>The Avatar doesn’t need to know that it is being rendered inside a Comment. This is why we have given its prop a more generic name: user rather than author. <br>

							We recommend naming props from the component’s own point of view rather than the context in which it is being used. <br>

							We can now simplify Comment a tiny bit: </p>

							<pre><code class="jsx language-jsx">
							function Comment(props) {
							  return (
								&lt;div className=&quot;Comment&quot;&gt;
								  &lt;div className=&quot;UserInfo&quot;&gt;
									&lt;Avatar user={props.author} /&gt;
									&lt;div className=&quot;UserInfo-name&quot;&gt;
									  {props.author.name}
									&lt;/div&gt;
								  &lt;/div&gt;
								  &lt;div className=&quot;Comment-text&quot;&gt;
									{props.text}
								  &lt;/div&gt;
								  &lt;div className=&quot;Comment-date&quot;&gt;
									{formatDate(props.date)}
								  &lt;/div&gt;
								&lt;/div&gt;
							  );
							} </code></pre>
							<p>Next, we will extract a UserInfo component that renders an Avatar next to the user’s name:</p>

							<pre><code class="jsx language-jsx">
							function UserInfo(props) {
							  return (
								&lt;div className=&quot;UserInfo&quot;&gt;
								  &lt;Avatar user={props.user} /&gt;
								  &lt;div className=&quot;UserInfo-name&quot;&gt;
									{props.user.name}
								  &lt;/div&gt;
								&lt;/div&gt;
							  );
							} </code></pre>
							<p>This lets us simplify Comment even further:</p>

							<pre><code class="jsx language-jsx">
							function UserInfo(props) {
							  return (
								&amp;lt;div className=&amp;quot;UserInfo&amp;quot;&amp;gt;
								  &amp;lt;Avatar user={props.user} /&amp;gt;
								  &amp;lt;div className=&amp;quot;UserInfo-name&amp;quot;&amp;gt;
									{props.user.name}
								  &amp;lt;/div&amp;gt;
								&amp;lt;/div&amp;gt;
							  );
							} </code></pre>
							<p>Try it on CodePen <br>

							Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. </p>

							<h3>Props are Read-Only</h3>
							<p>Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function: </p>

							<pre><code class="jsx language-jsx">
							function sum(a, b) {
							  return a + b;
							} </code></pre>
							<p>Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs. <br>

							In contrast, this function is impure because it changes its own input: </p>

							<pre><code class="jsx language-jsx">
							function withdraw(account, amount) {
							  account.total -= amount;
							} </code></pre>
							<p>React is pretty flexible but it has a single strict rule: <br>

							All React components must act like pure functions with respect to their props. <br>

							Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of “state”. State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule. </p>
						</article>
					  </section>
      <section class="main-section" id="State_and_Lifecycle">
        <header>State and Lifecycle</header>
        <article>
          <p></p>
        </article>
      </section>
      <section class="main-section" id="Handling_Events">
        <header>Handling Events</header>
        <article>
          <p></p>
        </article>
      </section>
      <section class="main-section" id="Conditional_Rendering">
        <header>Conditional Rendering</header>
        <article>
          <p></p>
        </article>
      </section>
      <section class="main-section" id="Lists_and_Keys">
        <header>Lists and Keys</header>
        <article>
          <p></p>
        </article>
      </section>
      <section class="main-section" id="Forms">
        <header>Forms</header>
        <article>
          <p></p>
        </article>
      </section>
      <section class="main-section" id="Lifting_State_Up">
        <header>Lifting State Up</header>
        <article>
          <p></p>
        </article>
      </section>
      <section class="main-section" id="Composition_vs_Inheritance">
        <header>Composition vs Inheritance</header>
        <article>
          <p></p>
        </article>
      </section>
      <section class="main-section" id="Thinking_In_React">
        <header>Thinking In React</header>
        <article>
          <p></p>
        </article>
      </section>
    </main>
  </div>
 </div> 
</div>
</div>

              
            
!

CSS

              
                html,body{
  min-width:290px;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
}
div.main-body {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  grid-gap: 20px;
  grid-template-areas: "navbar mainContent";
}

nav#navbar{
  grid-area:navbar;
  position:fixed;
  min-width:150px;
  top:0px;
  left:0px;
  width:270px;
  height:100%;
  border-right:solid;
  border-color:rgba(0,22,22,0.4)
}

nav#navbar a {
  display: block;
  margin: 5px 0;
  text-decoration: none;
  color: black;
}

header{
  text-align:center;
  font-weight:thin;
  font-size: 1.6em;
  background-color: black;
  color: white;
  margin: 0.5em 0em;
}
a li:hover {
    background-color: black!important;
    color:white!important;
}

main#main-doc {
  grid-area: mainContent;
}

#main-doc header{
  text-align:left;
  margin:0px;
}
#navbar ul{
  height:88%;
  overflow-y:auto;
  overflow-x:hidden;
}
#navbar li{
  color: #4d4e53;
  padding:8px;
  list-style: none;
  position:relative;
  width:100%; 
}
#main-doc{
  position: absolute;
  margin-left:250px;
  padding:20px;
  margin-bottom:110px;
}
section article{
  color: #4d4e53;
  margin:15px;
  font-size:1em;
}
section li {
  margin:15px 0px 0px 20px;
}
/*
code{
  display:block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 1;
  background-color:#D3D3D3;
  color: #FF0000;
  padding:15px;
  margin:10px;
  border-radius:5px;
}
*/
@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul{
  border:1px solid;
  height:207px;
  }
 #navbar{
   background-color:white;
   position:absolute;
   top:0;
   padding:0;
   margin: 0;
   width:100%;
   max-height:275px;
   border:none;
   z-index:1;
   border-bottom:2px solid;
  }
 #navbar a {
  display: block;
  text-decoration: none;
}
  
#main-doc{
  position: relative;
  margin-left:0px;
  margin-top:270px;
 }
 #main-doc section {
/* padding-top: 240px; */
  }
}
@media only screen and (max-width: 400px) {
  #main-doc{
    margin-left:-10px;
  }
  /*
  code{
    margin-left:-20px;
    width:100%;
    padding:15px;
    padding-left:10px;
    padding-right:45px;
    min-width:233px;
  } */
}

a {
  text-decoration:none;
  background-color: rgba(187,239,253,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  color: #1a1a1a;
}
              
            
!

JS

              
                
              
            
!
999px

Console