React | ReactJS Landing Page

Introduction

We just learned the basics about creating a Hello World app in ReactJS, so we will use this exercise to re-do what we just learned (and add some style, to make our UX/UI classmates happier).

Requirements

• Fork this repo
• Clone this repo

Submission

• Upon completion, run the following commands

  git add .
  git commit -m "done"
  git push origin master
  

Instructions

Iteration 1 - Create the App

Let's start with the basics:

1. Inside starter-code/ run npm install.
2. Create the folders you will need for the project: dist/ and src/.
3. Create an index.html file inside of public/, where you will have the entry point of the application.

starter-code/
├── dist/
├── package-lock.json
├── package.json
├── public/
│   ├── images
│   │   └── ...
│   └── index.html
├── src/
└── webpack.config.js

Iteration 2 - React Creation

You are ready to start creating your React app. First, add the packages needed. And then create index.js and App.js files inside the src/ folder.

$ npm install react@16.3.2 and react-dom@16.3.2.

Iteration 3 - First Landing Page

Finally, let's create our landing page. Create an App.css in src/. In the public folder, you will find all the assets you need to recreate the following landing page:

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