learning-ReactJS

This project contains several sub-projects showing some ReactJS_ capabilities, from the basic ones to more advanced, following some tutorial on the Inernet (links will be included when possible).

---

IMPORTANT:

The "learning-ReactJS" itself is not a project, is only a folder that groups all the sub-projects together. Since the number of this small projects might grow over time, I've decided to use this way instad of createing an independent repository for each one of them.

So, the most efficeinte way to work with the content is this:

1. Clone the whole repository (the "learning-ReactJS" folder). This will download all the subfolders containing the inidividual subprojects.

2. Go to the subproject you wanna work with, and type the following in the console: npm install. This will install all the dependencies. These dependencies will be stored in some folders (like /node_modules whihch are excluded from the git pull/push operations.)

3. Type npm start in the console. that's it!

---

A good tutorial to get started with RactJS is 30 Days of React, where you can learn from the basis, up to developing a full working ReactJS application.

The source code for all the examples in the 30 Days of React tutorial are available in GitHub here

Basic concepts

Links to useful sites, please check them out:

What is ReactJS?

What is JSX?

Basic example

This example is a slightly variation of the example show in the following tutorial: 30 Days of React - Day 3

This example is stored in the /hello-world folder. It shows a very simple ReactJS application. Here, we are not using any Developemnt Environment, and we are importing the Reat Libraries directly in our web page. We are not using any king of packaging either, so we'll need to manually import all the javascrit libraries we need.

• index.html example shows an example where we define 2 different React components, both consisting of a h1 HTML tag containig some text. The first example uses a JSX extension, the second one uses a React declaracion.

Settig up ReactJS development environment from scratch.

Real-life React applications are not developed the way explained in the previous HelloWorld example. Instead, a real ReactJS Application has the following characteristics:

• It uses a Development Environment in order to automate several tasks, like declaring and downloading JS dependencies.
• It creates a single-page application and all the javascript code is pacakges into a single file. so, from the client/browser perspective, all the code is contained in a singel file. From the developer perspective thought, the code is broken down into several files, splitting the logic into different components.

Tools needed for developing React Applications: First, we need to install Node.js and npm, which is the Node package manager. We'll use Node, not to develop a Server-side applications, but to use it as a package manager, to manage our dependencies ina neasy way (similar to maven or gradle in Java).

Installing Node.js and npm

Instructions for Mac OS:

1. Open the Terminal app and type brew install node.
2. Sit back and wait. Homebrew downloads some files and installs them. And that’s it.

To make sure you have Node and NPM installed, run two simple commands to see what version of each is installed:

• To see if Node is installed, type node -v in Terminal. This should print the version number so you’ll see something like this v0.10.31.
• To see if NPM is installed, type npm -v in Terminal. This should print the version number so you’ll see something like this 1.4.27

### An overview of the Components needed in a ReactJS application A_REact_ application is composed of at least these 3 different components:

• React: The Javascript React libraries
• babel: A component that translates new versions of Jvascript in previous versions, compatible with most compiles/browsers
• webpack: A package that (in "compilation" time), takes all the source files and crates a bundle package, putting all of them together in a single file (js files, css, etc). An aplication developed using "webpack" is more compact. In a tyical application developed with "webpack" there is usually only one Javacript import, which in turn imports the resto fo source files. This library also makes possible to import/reference css files into our js files.
• On top of the prevous thre ones, we are using Node as our package manager (Called npm), same way as maven or gradle works for a Java project. The configurtion file in this case is called package.json.

Even though is possibel to set up and confgure all these components from scratch, the most common way is to make use of some pluging that takes care of putting them all together. In this case we are using crate-react-app:

Creating a Web app using create_react_app

First, we need to install the plugin:

$ npm install -g create-react-app

The instalaation of the plugin is one-time operation.

Then, we can verify that the installation is working fine:

$ create-react-app --version
create-react-app verion: 1.4.3

If everything is properly installed, we can create our first React app:

$ create-react-app hello-react

and then go to the /hello-react flder and type 'npm start`. This will start the development server.

From this moment moving forward, all the examples will be developed using the create_reat_app plugin.

Timeline components project

This project is an example of a_React_ application, using the create-react-app plugin.

This project is a modified version of the tutorial from the following pages: Complex Components Data-Driven

Go to the links above for references. Some Notes about the changes made with respect to the original tutorials are highlighted below:

• The CSS wth all the styles for the Componentes in this project has been downloaded to local and stored to the folder /src/css/timeline.css.
• The FontAwesome libraries hae been also downloaded into the src/css/font-awesome-4.7.0 folder.
• The Components in this projects provided an example of how different visual elements can be broken down into individual React Components. The componenets which name ens with "Data", are alternative version of these components (and some additional ones) which take their data from the _properties object, instrad of hardcoding it.

Clock

This Project imple,nets some React features:

• We use an State, to store internal information in the Components, making it a stateful Component.
• We inject some code in the Hooks provided by React to add functionality in certain points in the Component lifecyle.
• We show how changing the State of the object will make it be rendered again. In this case, we set up a timer which updates the time, so the clocks renders again the time on the screen. This timer is set up before the Component is "mounted" (using here one of the React HOOKS).
• We add some interactivity: The clocks contains a form, which can select the "format" used to display the Time. This form is implemente in a Child Component, and when this form is changed, the format selected is used to update the state of the parent (the clock itself), so its rendered again. For the Child to be able to invoke a function in the parent, we need to pass a callback function to the Child in the props object (using a property called here "onchange").

This project is initialy based on the one here: State

More info about the React Hooks here: An introduction to HOOKS in React

hello-redux

This project implements a list of Feed-news, and a method to archive each list, so its not visible anymore. It uses React + REDUX, as a middleware for state management.

This project is based on the (great) tutorial stored here: React Redux Tutorial for Beginners[2018]