Tell us what’s happening:
Hello everyone,i am trying to complete the 3rd required project in the Responsive Web Design curriculum but i can’t complete Step:5.
Which requires to: The first child of each .main-section should be a header element.
I have checked like twenty times but i can’t see the error,Every main section has a header first child.
Thanks in advance guys for taking a look at my code!
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheets" href="styles.css">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>React.js Guide</title>
</head>
<body>
<nav class="navbar" id="navbar">
<header>React Guide</header>
<span class="react-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React Logo" width="100" height="100"/></span>
<ul id="list">
<li>
<a class="nav-link" href="#What_is_React?">What is React?</a>
</li>
<li>
<a class="nav-link" href="#Why_Learn_React?">Why Learn React?</a>
</li>
<li>
<a class="nav-link" href="#How_to_install_React">How to Install React</a>
</li>
<li>
<a class="nav-link" href="#Directory_Structure">Directory Structure</a>
</li>
<li>
<a class="nav-link" href="#Understanding_JSX">Understanding JSX</a>
</li>
<li>
<a class="nav-link" href="#What_Next?">What Next?</a>
</li>
<li>
<a class="nav-link" href="#Conclusion">Conclusion</a>
</li>
<li>
<a class="nav-link" href="#Reference">Reference</a>
</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="What_is_React?">
<header>What is React?</header>
<article>
<p>React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for creating UI component-based user interfaces.</p>
<p>According to the <a href="https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-web-frameworks" target="_blank">2021 Stack Overflow developer survey<a/>, React surpassed jQuery as the most commonly used web framework with about 40.14% of the market share. It was also the most desired, with one in every four developers using it. React is also used by over 8000 industry leaders.</p>
<p>In this article, we will see reasons why you should learn React and how to get started with it.</p>
</article>
</section>
<section class="main-section" id="Why_Learn_React?">
<header>Why Learn React?</header>
<article>
<p>There are many reasons why you should learn React, but here are some of the most frequently mentioned points highlighted by many React experts:</p>
<ul>
<li><h3>React is easy to use</h3></li>
<p>Many people, including myself, like React for its simplicity, flexibility, performance, usability, virtual DOM, components, and many other features.</p>
<p>
Working with React simplifies our lives as developers because of its straightforward and modular infrastructure, which allows us to build and maintain our applications much more quickly.</p>
<li><h3>There is a high demand for React developers</h3></li>
<p>In the United States, the average yearly salary for a React developer is $120,000. Many businesses and companies use React, which forces them to look for new talent on a daily basis.</p>
<p>
If you have any reservations about learning or becoming a React developer, reconsider. There's no need to worry – there will likely always be a job for you as a React developer because there are thousands of open positions right now (even remotely).</p>
<li><h3>It is not difficult to learn the basics of React</h3></li>
</ul>
<p>This could be interpreted differently, as learning React as a complete beginner coder will undoubtedly take longer than learning JavaScript as an expert. But what I mean is that React is not difficult to grasp once you have thoroughly understood the fundamentals of JavaScript.</p>
<p>
React also allows you to reuse simple pieces of functionality across your React web app.</p>
<p>
To summarize, React is relatively simple to learn, has a large community of support with many open-source projects on Github, and offers many job opportunities.
Learning React will also help you better understand JavaScript, which will come in handy throughout your career.
</p>
<p>Since React is a JavaScript framework, it is critical to understand certain JavaScript fundamentals in order to flow and understand React. <a href="https://www.freecodecamp.org/news/top-javascript-concepts-to-know-before-learning-react/">Here is a detailed article on all of these fundamental JavaScript concepts and methods</a> such as map, filter, and many others. This will help you learn React faster.</p>
</article>
</section>
<section class="main-section" id="How_to_install_React">
<header>How to install React</header>
<article>
<p>The best way to install React or create a React project is to install it with <code>create-react-app</code>. This is one of the steps that most beginners struggle with, but in this guide, we'll go over how to get started properly and successfully.</p>
<p>We'll be using our terminal for this (you can either make use of an in built terminal or download any you prefer). One prerequisite is to have <a href="https://nodejs.org/en/download">Node.js</a> installed on your PC, knowing full well that NPM (or, alternatively, Yarn) is required. We'll be using NPM for this guide.</p>
<p>To confirm that you have Node installed on your PC, just launch your terminal/command prompt and type <code>node -v</code> and <code>npm -v</code> to see which versions you have.Because <code>create-react-app</code> requires that you have NPX installed, you'll need to make sure your Node version is not less than v14.0.0 and your NPM version is not less than v5.6.</p>
<p>
Suppose you have an older version of NPM, you could use the following command to update it:
<code>npm update -g</code>
Once you've figured out NPM, you can now install React with <code>create-react-app</code>.
If you find it difficult working with terminals,you can check out <a href="https://www.freecodecamp.org/news/command-line-for-beginners/" target="_blank">this article on how to use the command line for beginners.</p></a>
<h3>What is Create-react-app?</h3>
<p>Though the name explains what it does, you might start to wonder what <code>create-react-app</code> really means.</p>
<p>
Creating a React app manually is complicated and time-consuming, but <code>create-react-app</code> makes it much easier by automating all the configuration and package installation.</p>
<p><code>create-react-app</code> is the best way to start building a new single-page application in React.</p>
<p>
If you are interested in learning how to create a React app manually without <code>create-react-app</code>, you can check out <a href="https://www.freecodecamp.org/news/command-line-for-beginners/" target="_blank">this guide</a>.
</p>
<h3>How to Create a React Application</h3>
<p>The first step is to start your terminal/command prompt, navigate to the folder where you want to save your React application, and then execute this command:</p>
<code>npx create-react-app my-app</code>
<p>Note: <code>my-app</code> is the name of the application we are creating, but you can change it to any name of your choice.
<p>The installation process may take a few minutes. After it is done, you should see a folder that appears in your workspace with the name you gave your app. Congratulations!</p>
<h3>How to Run Your React Application</h3>
<p>Now, head back to the terminal, and the first thing you need to do is navigate to the directory where the app was installed using <code>cd my-app</code>. Then finally run <code>npm start</code> to see your app live on localhost:3000.</p>
<p>You should see something like this:</p>
<img src="https://www.freecodecamp.org/news/content/images/size/w1000/2022/04/image-9.png" alt="screen with React Logo" width="100%" height:="300">
</article>
</section>
<section class="main-section" id="Directory_Structure">
<header>Directory Structure</header>
<article>
<p>We've just finished the first part of this article. Now let's figure out what each file and folder in our React application means and does. This is critical either as a beginner or an experienced React developer.</p>
<p>The directory structure of your newly created React app looks like this when you open it:</p>
<img src="https://www.freecodecamp.org/news/content/images/2022/04/image-10.png" alt="ReactFolders" width="200" height="auto">
<p>Now let's start explaining these folders and what they stand for:</p>
<ul>
<li><h3>node_modules folder</h3></li>
<p>The <code>node_modules</code> folder contains all of our dependencies, and this folder is ignored when we set up source control. But it is important to note that the <code>package.json</code> file works in tandem with the <code>node_modules</code> folder because it contains information about all of the dependencies as well as some script commands.</p>
<p>If you delete the <code>node_modules</code> folder, the application will break because you'll no longer have your dependencies. </p>
<p>To re-install these dependencies, you can use <code>npm install</code> – this will check the <code>pakage.json</code> file for a list of the dependencies and then install all of them. This will make it easy for you to push your code online or share your code with others without having to share the heavy <code>node_modules</code> folder.</p>
<li><h3>public folder</h3></li>
<p>Although the majority of the work will be done in the src folder, the public folder contains some static files, such as the HTML file. You could, for example, change the title of your web app, add CDNs such as Google Fonts, and so on.</p>
<p>
Note: Don't be afraid of this file because it's just a regular HTML file. The only code to remember is the div with the id root where the entire React application will be placed.</p>
<code> id="root"></div> </code>
<li>
<h3>.gitignore file</h3>
<p>Just as the name suggests, it’s a file that specifies which files and folders will be ignored by our source control.</p>
<p>When you open the file, you will see a list of files that are being ignored, including the <code>node_modules</code> and build folder. You can decide to add some particular files or folders.</p>
</li>
<li>
<h3>build folder</h3>
<p>The build folder is another folder that you can't see right now, but that you'll see when you build your project.
This will create a production-ready folder of static assets that can be hosted or deployed using a drag-and-drop option on a platform like Netlify.</p>
</li>
<li><h3>src folder</h3></li>
<p>So far, we've covered some fundamental folders, but our main concern is the src folder, which is where development takes place. Here's what the src folder looks like:</p>
<img src="https://www.freecodecamp.org/news/content/images/2022/04/image-11.png" alt="react source folder" width="auto" height="200">
</ul>
<p>Let's start with the fundamental files: <code>App.js</code>, <code>index.js</code>, <code>index.css</code>, and <code>App.css</code>. (you can delete every other file for now).</p>
<ul>
<li>App.js</li>
<p>This is where all of your components will eventually meet. The name of the file isn't important, but it's good practice to keep this name so that other developers can understand your code.</p>
<li>index.js</li>
<p>This is the starting point for your application. More specifically, this is where you target the <code>root id</code> from the <code>index.html</code> file and render the <code>App.js</code> file, which is where your entire file (components and pages) will meet.</p>
<li>App.css and index.css</li>
<p>These both contain styles for your application. The <code>index.css</code> file contains global styling and the <code>App.css</code> file almost works the same as it does for the <code>App.js</code> file – but whether we use a CSS file is entirely up to us. While getting started, we can choose to delete one and use only one CSS file.</p>
</ul>
</article>
</section>
<section class="main-section" id="Understanding_JSX">
<header>Understanding JSX</header>
<article>
<p>JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.</p>
<p>Writing code in React takes a long time because you have to use the <code>React.createElement</code> function every time, even if you are just adding a simple div.</p>
<img src="https://www.freecodecamp.org/news/content/images/size/w1000/2022/04/image-12.png" alt="image showcasing jsx implementation" width="80%" height="auto">
<p>The image above depicts the exact same code written in JSX and with <code>React.createElement</code>. You can tell which is easier to write, understand, and manage by comparing the two.</p>
<p><code>create-react-app</code> internally uses Babel for the JSX to JavaScript conversion, so you don't have to worry about configuring your own babel configuration with Webpack.</p>
<h3>Some Do’s and Don’t of JSX</h3>
<p>Make sure you're aware of some of these important details so that some bugs don't get in your way:</p>
<ul>
<li>
Your markup is usually placed after the return statement, either as a single line of code or as a block code. </li>
<li>
All of your code should be wrapped in a single tag. This could be a <code>div</code>, a tag with no content (<>), or any other tag.
</li>
</ul>
<p>This works fine with normal markup but would result in a major error because React requires adjacent elements to be wrapped in a parent tag. This simply means that for this code to run, it must be wrapped in a parent tag, such as a div, section, article, and so on.</p>
<h3>How to Add Comments to JSX Code</h3>
<p>As a developer, it's now standard practice to always add comments to your code, and JSX is no exception. You can either use the shortcut command (Cmd + / (Mac) or Ctrl + / shortcut keys to either add or remove a particular comment).</p>
<p>Note: We can pretty much do anything with JSX. You can read <a href="https://reactjs.org/docs/jsx-in-depth.html">this</a> article to learn more about how JSX works.</p>
<p>In summary, JSX just provides syntactic sugar for the <code>React.createElement</code> <code>(component, props, ...children)</code> function.</p>
</article>
</section>
<section class="main-section" id="What_Next?">
<header>What Next?</header>
<article>
<p>Now that you know how to get started with React, the next step is to learn it properly, understand its functionalities, and so on.</p>
<p>Nowadays, there are a lot of great resources available for learning React, so many that it is difficult to determine which are current and useful.</p>
<p>Instead of attempting to take several courses at once, the best thing to do is find a helpful tutorial and complete it. Check out freeCodeCamp's <a href="https://www.freecodecamp.org/news/free-react-course-2022/">Free React Course for 2022</a> or <a href="https://www.freecodecamp.org/news/learn-react-course/">Learn React - Full Course for Beginners</a>.</p>
</article>
</section>
<section class="main-section" id="Conclusion">
<header>Conclusion</header>
<article>
<p>So far in this article, you've learned what React is, why you should learn React, how to install it on your machine. You've also learned what each of the files in its directory structure does.</p>
<p>From this point there is a lot to learn about React and I wish you good luck as you continue on in your studies. If you enjoyed this article, you can support me by either buying me a coffee or following me on Twitter.
<br></br>
Thanks for reading!</p>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<ul><li>All the documentation in this page is taken from <a href="https://www.freecodecamp.org/news/get-started-with-react-for-beginners/">this freeCodeCamp's article</a></li></ul>
</article>
</section>
</main>
</body>
</html>
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: