top of page

How to create a clean landing page with React

React (written in JavaScript) is a powerful front-end framework that can be used to make clean, and user-friendly websites. This post will walk you through how to set up a basic landing page using React.


The first step is to use npx to create a new React app, and then navigate to your project directory. The install process will also automatically install some useful packages, like react-dom.


Create new React app

npx create-react-app landing-page
cd landing-page

Great. Now that we've done that, you should open up your new React app in your favorite IDE. I use VS Code. You'll notice that your project already has multiple files with pre-written code. React automatically creates important project files for you and implements a basic app. To see what the basic app looks like, we can use npm to execute the automatically configured start script, which sets up a development server for you and opens your browser automatically (as you can see, React comes pre-loaded with a lot of handy tools).


Launch React development server

npm start

Default React landing page

Just as the default landing page instructs us, we should now edit App.js with our custom code. React is unique in that it allows us to inject HTML code for our website using a JavaScript file. As soon as you open App.js, you can see the injected HTML code inside the App() return statement.


Let's walk through a simple example. First, let's take advantage of Bootstrap CSS to get up and running quickly. We need to install Bootstrap for our project using npm and then import Bootstrap at the top of App.js.


Install Bootstrap using npm

npm install bootstrap

Import Bootstrap to App.js

import 'bootstrap/dist/css/bootstrap.css';

Next, let's remove everything inside the return statement in App() and replace it with some custom HTML. The HTML listed below makes use of Bootstrap to create a simple and attractive landing page. It includes a header, some links, a paragraph of text, and a call to action. You could modify and continue adding additional HTML here, as it makes sense for your website!


Simple landing page in HTML

<body class="text-center">
  <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">
      <h3 class="masthead-brand">CodeConda</h3>
        <nav class="nav nav-masthead justify-content-center">
          <a class="nav-link active" href="https://www.codeconda.com/scheduling">Bookings</a>
          <a class="nav-link" href="https://www.codeconda.com/resources">Blog</a>
          <a class="nav-link" href="https://www.codeconda.com/quotes">Contact</a>
        </nav>
      </div>
    </header>

    <main role="main" class="inner cover">
      <h1 class="cover-heading">Welcome to our landing page.</h1>
      <p class="lead">This is a landing page example to demonstrate the usefulness of ReactJS. We including convenient links to various CodeConda pages above, and a simple call to action button below which will direct you to the CodeConda home page.</p>
      <p class="lead">
        <a href="https://www.codeconda.com/" class="btn btn-lg btn-secondary">Learn more</a>
      </p>
    </main>
  </div>
</body>

Simple landing page


So that's a brief overview on how to get started with React. Make sure to also check out all of the other web application development resources offered by CodeConda. To access the code referenced in this post, head over to the CodeConda GitHub.

Comentarios

bottom of page