React Course Notes : Why React? Creating a Web Server

 

Why React?

Small learning curve

Unlike other frameworks, I don’t have to learn everything to create a simple app with React.

Super fast and agile

React is super fast and agile it renders to the DOM. My applications updates much quicker than alternative frameworks and it’s a much smaller library.

React use JSX

JSX is a language let me specify the DOM elements for my components right inside of my javascript file. This means the logic behind my component and the visuals are all in one place and this is truly fantastic.

React has a great community

Big companies like Netflix and Facebook are using React right now in production. They’re all contributing to the reactor core as well as creating amazing third party libraries that go great with any React application.


Getting Setup

Atom editor (Suggestion)
Atom has a great community of developers around it which means there’s awesome plugins that are updated constantly. It’s free and open source to get it.

Installing GIT & Bash
Windows system can have access to the same commands that are available in Linux environments like a new distribution or on a Mac laptop with GIT & Bash.

Installing Node JS
Node JS let me create my web server so I can use my reactor components locally and deploy them live to the web. Second, it installs NPM(Node Package Manager) to let me install various third party modules.


Intro to Command Line

pwdprint working directory
lslist directory contents
cdchange directory
mkdirmake directory
-v check current version


Creating Web Server

  • Make a folder on desktop to store this project :
    cd desktop
    mkdir ReactBadu
    cd ReactBadu
  • Run npm init:
    npm init(It’s a command that I can run from the terminal to create a new node project.)

It gives me a little introduction into what exactly it’s doing and then really it just asks me a few basic questions.

  • Package name should be lowercase: I type hello hyphen reacthello-react
  • Version: I hit enter and it use the default.
  • Description: It will be shown in parentheses for description.
  • After I answer all the questions, there are a little file that prints out. Type the word “yes” or hit enter and it’s done.

It’s telling me that it’s about to write a file into my Hello react project called package dot Json and I am going to be working with this file not just for my node server but also to manage my reactive dependencies.

Open up my new folder inside of Atom on the desktop, I can see all I have is a simple package of Json file and it looks exactly like what printed out in the terminal.

Creating First Module

  • NPM install :
    npm install express@4 --save

This means to install the 4 of Express which is the latest version. 2 hyphens followed by the word save means update the Json File.

Go ahead and click enter and NPM is going to take about 5 seconds to go off and grab all of the dependencies.

Once it’s done, it will show a node modules folder in Atom.

  • Re-install :
    -delete “node_modules” files in Atom
    -input npm install

Creating First Node File

  • Make a new file on Atom called “server.js”
  • Type about 10 lines of code

1.var express= require('express');
Make a new variable called “express” and use nodes keyword called “require” to load in the module and require takes as its one and only argument the string name of the module.

In this case the name is “express” so I type it directly.

2.var app= express();
To access to the entire express API and the first thing to do is to make a new app. Create a new variable called “app” and call the express library as a function passing nothing as the arguments.

3.app.use(express.statoc('public'));
There’s two steps left tell it which folder I want to serve and then start the server to tell it which folder I want to serve. Calling app dot use and explore a lot more of this later.

Inside of here is called express dot static express dot static is going to specify a folder name that I want to expose to the web server and this case the folder name is going to be called “public”.

4.app.listen(3000, function(){

console.log('Express server is up on port 3000');

});

Start the server using app. dot listen. Takes two arguments. The port which is going to be 3000 and a function which will get called once the server is up.

And in this case all I’m going to do in here is call console dialog express server is up on port three thousand. All I’m doing is creating this string and passing it into console dot lock.

  • Make a new folder on Atom called “public”
  • Make a “index.html” file
    It’s the default file for your applications so make sure to name that.
  • Build basic HTML
  • Save file and with this in place. Run node server.js

Hit enter and the little message prints to the screen express server is up on port three thousand.

  • Open browser and input local host:3000
    “hello word” prints to the screen.