logo_ironhack_blue 7

React | React Landing Page

Introduction

We just learned the basics about creating an app in React with create-react-app, so we will use this exercise to re-do what we just learned (and hopefully to add some style 🌼 ).

reactjs-landing

Requirements

  • Fork this repo
  • Clone this repo

Submission

  • Upon completion, run the following commands:

    git add .
    git commit -m "done"
    git push origin master
    
  • Create Pull Request so your TAs can check up your work.

Instructions

Iteration 1 - Create the App

Let's start with the basics: as you can see public folder is already there and it has some images in it. We will have to move these images to the public folder from create-react-app. Also, remember that the index.html file is where you will have the entry point of the application.

Babel and Webpack

Our project needs to have two important packages that are necessary for compiling: Babel and Webpack.

But don't worry, create-react-app will take care of it.

Iteration 2 - React Creation

npx create-react-app my-first-react-app
cd to my-first-react-app
npm start

Iteration 3 - First Landing Page

Finally, let's create our landing page. In the public folder, you will find all the assets you need to recreate the following landing page:

home

For now, don't worry about creating more than one component, we will cover that in the following lessons!

Happy coding! ❤️