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 basic, inside the folder init a package.json, and all the folders you will need for the project: dist and src. Also, remember to create an index.html file, where you will have the entry point of the application.

react-hello-world
│   README.md
|   index.html
|   package.json
└───dist
└───public
└───src

Babel and Webpack

Now we need to add the necessary to compile the project. Easy peasy, install both, Babel and Webpack.

:::info Remember to add the webpack.config.js file! :::

Iteration 2 - React Creation

You are ready to start creating your ReactJS app. First, add the packages needed. And then create an index.js file 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. 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!