React 1rst App: Countdown + Installs

In this example we will use tools like: Node.js and NPM   so if you dont have them install you should get them now.

Installing:  Create-React-App

Also to make the typing easier install the following packages for Atom: emmet, language-babel,  now  Enable-Tab-Completion-for-JSX-with-Emmet-in-Atom.

Install React-Bootstrap: Link

This is a fast way to create apps that utilize a GitHub Repo call: Create-App  first you need to install it using:

After that create the development folder where you will be creating your projects. and cd .. to that folder, then when you are ready to create the directory that will contain the app, type:

It will take a little time but in the end yo will see the installation lines ending with the following information and commands:

Now lest test the app that was just created, cd to the directory newly created:  ” cd 02-countdown ” and then lest start the server:

And you should see the app running and working, with the rotating react logo, this is just a template and now is time to build our app, lest begin wit deleting all the files ins the Directory ” src ” because here is where we want to create our own, files. but we will keep the: index.html and the other folders for now.

Now on the same folder ” src ” create a new file name: “index.js” and that file is the one where we will create the app.

1rst lest test the server with our code, in the ” index.js ” file type, the following code and refresh the browser.

If you see the text in the browser, congrats, now is time to start, the app, to do this we need to create a new file call ” App.jsx ” where we will be coding the on JSX, and we will be exporting the components to our ” index.js ” to be render to the ” index.html “.  to do that we will have the following files:

Stage 1:

Now lest create a STATIC page with the elements that we want, latter we will make them DYNAMIC, you will also notice that we add, the files: “index.html”  &  “style.css“:

State 2:

Reading from the Input box and Updating the Tittle with that info.  No changes to: index.html  –  style.css  –  index.js

Stage 3:

Here we have a functional App, that is capable of taking new dates and rendering the remaining time automatically every second. there were No changes to: ” index.html  style.css  index.js ”  in the other hand we have changes in ” App.jsx ”  and we add a new file ” Clock.jsx “, but I will post all files here.

Stage 4:

Adding React-Bootstrap, and other minor changes.

Stage 5:   Build App in Static Files

Stop the server by:  [ Ctrl + C ]  then type the command:

This will take some time and will create a directory with the name of: ” build ” with the static files inside.

Stage 6: Deployment:

Create a repository for the app on: Git & GitHub, push.

Log-in to Heroku:  and go to the documentation: Deploying React with Zero Conf.

 

Run command on Terminal:

Now on Terminal:

The URL that I got is:  https://fierce-beyond-38072.herokuapp.com/

Video with deployment: Link

State 7: Update Live app

Make changes on local files, then:

This push should take less time because all the Node modules were install in the first release (git push heroku master).

Now go to the Previous URL and Refresh.

.



Copyright 2017. All rights reserved.

Posted March 3, 2017 by Edmundo in category "React