Build a Technical Documentation Page

In this example below you will see how to do a Build a Technical Documentation Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by vanderdrilu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vanderdrilu ©
  • HTML
  • CSS
  • JavaScript
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar" class="active">
  <Header>React</Header>
  <img src="https://cdn-images-1.medium.com/max/800/1*oi8WLwC2u0EEI1j9uKmwWg.png">
  <a href="#Introduction" class="nav-link">Introduction</a> 
  <a href="#Differences" class="nav-link">Differences</a>
  <a href="#Basic" class="nav-link">Basic</a>
 <a href="#Render_state" class="nav-link">Render state</a>
  <a href="#Props" class="nav-link">Props</a>
  <a href="#React_in_Codepen" class="nav-link">React in Codepen</a>
</nav>

<main id="main-doc">

  <section id="Introduction" class="main-section">
    <header>Introduction</header>
<p>
    <ol>
      <li> HTML rendering back-end when refreshing the pages,</li>
      <li>JQuery can anytime, but whole site, there is problem when you updating,remove or add elements and that solve React</li>
      <li>In React the changing elements you need declare yours variables or arrays in this.state
        <pre><code>shortest ussage: 
state   {varnumber: 0,
        varstring:'',
        varboolean:false,
        array:[]}</code></pre> and express in curly brackets between elements inner the render return declarations. The state is asynchronously it’s update on elements when is most optimal, not when you sent back with
        <pre><code>this.setState({variable})</code></pre>

    </ol>
    </p>
  </section>
  <section id="Differences" class="main-section">
    <header>Differences</header>
    <p>
    <ol>
      <li>Inline class is <b>className</b> <br>
        <pre><code>;&lt;div className=&quot;first&quot;&gt;Hello World!&lt;/div&gt;</code></pre>
      </li>
      <li>Inline style declare in curly brackets outside the element
        <pre><code>  var divStyle = {color: 'white',};
  &lt;div style={divStyle}&gt;Hello World!&lt;/div&gt;</code></pre>

      </li>
      <li>space between &lt;App /&gt; instead&lt;App/&gt; is not a misstype.
      </li>

    </ol>
    </p>
  </section>
  <section id="Basic" class="main-section">
    <header>Basic</header>
    <p>
      There are more ways to render:</p>
      <ol>
        <li>Direct<pre>ReactDOM.render(
  &lt;h1&gt;Hello, world&lt;/h1&gt;;,
  document.getElementById('root')
);</code</pre></li>
        <li>as Variable:
          <pre><code>
const element = &lt;h1&gt;Hello, world&lt;/h1&gt;;
ReactDOM.render(element,
document.getElementById('root'));

</code></pre>

        </li>
        <li>as Function:
          <pre><code>
const element =()=>{
return (
  &lt;div&gt;
        &lt;h1&gt;Hello, world!&lt;/h1&gt; 
         &lt;/div&gt;
);};

ReactDOM.render(element,
document.getElementById('root'));

</code></pre>

        </li>
        <li>as Class with render():
          <pre> <code>ReactDOM.render(
  &lt;App /&gt;, document.getElementById('root')
  
  class App extends React.Component {
  
  render() {
    return (
      &lt;div&gt;
        &lt;h1&gt;Hello, world!&lt;/h1&gt;  
        &lt;/div&gt;
    );};
   
 </code></pre>
        </li>
      </ol>

    </p>

  </section>
   <section id="Render_state" class="main-section">
    <header>Render state</header>
     <p>
    <ol>
      <p>The array in a state may not be render, the update, directly with elements like &lt;/li&gt,</p>
      <li><br>
        <pre><code >const numbers = [1, 2, 3, 4, 5];
const <b>listItems</b> = numbers.map((number) =&gt;
  &lt;li&gt;{number}&lt;/li&gt;
);
ReactDOM.render(
  &lt;ul&gt;<b>{listItems}</b>&lt;/ul&gt;,
  document.getElementById('root')
);</code></pre>
      </li>
      <li>
        <br>
        <pre><code > class App extends React.Component {
  this.state{<b>numbers</b>:[1,2,3,4,5]}
 
  render() {
 const <b>listItems</b> = this.state.<b>numbers</b>.map
 ((number) =&gt; &lt;li&gt;{number}&lt;/li&gt; );
 return (&lt;div&gt;<b>{listItems}</b>&lt;/div&gt; );};

ReactDOM.render(&lt;App /&gt;,
document.getElementById('root'));
);</code></pre>

      </li>
      <li>  <br>
        <pre><code> class App extends React.Component {
  this.state{<b>numbers</b>:[1,2,3,4,5]}
  
  render() {
    return (
 this.state.numbers.map((number) =&gt;
  &lt;li&gt;<b>{number}</b>&lt;/li&gt;
  );};

ReactDOM.render(&lt;App /&gt;,
document.getElementById('root'));
);</code></pre>

      </li>
     

    </ol>
     </p>
  </section>

  <section id="Props" class="main-section">
    <header>Props</header>
    <p>When you need pass a varibale to class use props. To the function should be also.<br>
      props are something as object{1: item}, but they are readonly. <br>
      The class App should be calling like &lt;App /&gt;, it's similar as call a function with parameters in JS.<br>
      The passing values are expresed    </p>
  <pre><code>    
      name="world"
     <p> put together</p>
      &lt;App name="world"/&gt;
     
     </code></pre> 
    <pre><code> from basic example 2. teke out:&lt;h1&gt;Hello,  world&lt;/h1&gt;;
    const element = &lt;<b>FuncOne</b>  name=&quot;World&quot; /&gt;
    
function <b>FuncOne</b> (props) {
  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
} 
ReactDOM.render(element,
document.getElementById('root'));

</code></pre>

  </section>
     
  <section id="React_in_Codepen" class="main-section">
    <header>React in Codepen
    </header>
    <p>JS referencing:
      <br> https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js
      <br> https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js
      <br> Set javascript to type BABEL
    </p>
  </section>
</main>

/*Downloaded from https://www.codeseek.co/vanderdrilu/build-a-technical-documentation-page-Nzjabb */
    ol, p, pre{ margin: 0 100px 0 100px;}
main{margin-left:10%;width:80%;}
/*section{border:1px solid blue;  margin-left:10px}*/
nav{color:white;background-color:black;
width:10%; height: 100%;float:left;   overflow: hidden;
border-right:1px solid black;
position:fixed;}
nav > a{color:ghostwhite;
  text-decoration:none;
  display: block;
   padding: 12px;
 
}
nav > a:hover {
    background-color: #ccc; /* Dark grey background on mouse-over */
}
nav >img{width:100%;}
 @media (max-width: 550px) {
    nav {
           width:0px;             
    }
   p{font-size:8px;}
  }
Header{
  font-size:200%;
}
code, pre{ background-color:lightgrey;
min-width:300px;
font-family: monospace;
}
b{color:#283593;}


/*Downloaded from https://www.codeseek.co/vanderdrilu/build-a-technical-documentation-page-Nzjabb */
    

Comments