(React) Convert html template to react

JavaScript
1

hey guys im trying to convert html template into react
and i keep getting an error that react cant find the module
i wrote this Footer function and added to App.js
and im getting problems can somebody plz help? if full code is needed ill write my github: https://github.com/joshkwannacode/htmlToReact

import React from "react";

const Footer = () => {

  return (

    <footer id="footer">

      <div className="container">

        <div className="row gtr-200">

          <div className="col-12">

            <section>

              <h2 className="major">

                <span>What's this about?</span>

              </h2>

              <p>

                This is <strong>TXT</strong>, yet another free responsive site

                template designed by

                <a href="http://twitter.com/ajlkn">AJ</a> for{" "}

                <a href="http://html5up.net">HTML5 UP</a>. It's released under

                the

                <a href="http://html5up.net/license/">

                  Creative Commons Attribution

                </a>{" "}

                license so feel free to use it for whatever you're working on

                (personal or commercial), just be sure to give us credit for the

                design. That's basically it :)

              </p>

            </section>

          </div>

          <div className="col-12">

            <section>

              <h2 className="major">

                <span>Get in touch</span>

              </h2>

              <ul className="contact">

                <li>

                  <a className="icon brands fa-facebook-f" href="#">

                    <span className="label">Facebook</span>

                  </a>

                </li>

                <li>

                  <a className="icon brands fa-twitter" href="#">

                    <span className="label">Twitter</span>

                  </a>

                </li>

                <li>

                  <a className="icon brands fa-instagram" href="#">

                    <span className="label">Instagram</span>

                  </a>

                </li>

                <li>

                  <a className="icon brands fa-dribbble" href="#">

                    <span className="label">Dribbble</span>

                  </a>

                </li>

                <li>

                  <a className="icon brands fa-linkedin-in" href="#">

                    <span className="label">LinkedIn</span>

                  </a>

                </li>

              </ul>

            </section>

          </div>

        </div>

        <div id="copyright">

          <ul className="menu">

            <li>

              Design: <a href="http://html5up.net">HTML5 UP</a>

            </li>

          </ul>

        </div>

      </div>

    </footer>

  );

};

export default Footer;
2

Hello there,

The error message might be more useful, as well as the full code.

If it is a smaller project, a link to a CodePen, CodeSandbox, or Repl.it would be helpful.

3

its pretty big so i uploaded it to github all the files are in the src,

and the error message was :
module not found:
Cant resolve ‘./components/Footer’ in react/src

4

I notice the other components do not use the const Name = () => syntax. If you use function Footer() { for the Footer component, does the error go away?

5

sadly no, still the same problem

6

You have a spelling error in your folder name components

2 Likes
7

thanks man, solved the problem but i have another one. its says

Attempted import error: './components/Header' does not contain a default export (imported as 'Header').

could u hepl me with this too?

8

Compare how you exported your Footer component to the Header component.

1 Like
9

thanks so much man :pray: :+1: :+1: