React Basics

Enviroment:

Make sure that yo are in the HTTP-SERVER

to do this Terminla CD to the folder where you will be developing, there type: ”  http-server .  ” and leave the server runing

To access the working files, Open the browser and type:  ”   http://localhost:8080/index.html   ”  if the page is served, you are ready to develop.

Accessing React-JS Files

Google search: download react, chose the FaceBook link , there copy the links found under the “Using a CDN” title:

Note not forget to install Atom Packages for React.

“Hello React-JS”

This is an example of how to create a simple “Hello React-JS”, with: index.html  &  code.js files.

     index.html:

     code.js

Save the files and open the browser type:  ”   http://localhost:8080/index.html   “, the file should have been served, congratulations you just did your first React – App.

More information about React Syntax: link1

Nested Elements.  a.k.a.: Section

To be able to build more complex structures we need to be able to nest elements, see the following example:

Factory Functions:

this can be used to fast create an specific HTML element.

  • React.DOM.div()
  • React.DOM.span()
  • React.DOM.p()
  • React.DOM.li()
  • React.DOM.etc….

You will notice that using this syntax you can drop the HTML tag that goes inside of the parenthesis.

Example of creation an Unorder List <ul>

JSX

To see this topic go to my post on JSX.

This are the Bare Basics of how to get the Development Environment ruining and creating the most Basic-App.

.



Copyright 2017. All rights reserved.

Posted February 25, 2017 by Edmundo in category "React