Skip to main content

React JS

React is a JavaScript library that will be used to build web interfaces and mobile applications with an extension called React Native. React works with units of code that work independently. React also uses a tool called JSX that allows a very simple interaction with JavaScript, that is, it can also be used with HTML in a simple way.

For more information, visit ReactJs

Tools​

For React the following tools are suggested, tools with * are required:

Extensions​

These extensions are a recommendation to improve your experience in developing with React.

  • Install React Developer Tools,
    this is in the chrome web store (Web Navigator)
  • Debugger for Chrome (Visual Studio Code)
  • React Extension Pack (Visual Studio Code)
  • Auto Close Tag (Visual Studio Code)
  • Prettier - Code Formatter (Visual Studio Code)
  • ESLint - JavaScript standards (Visual Studio Code)

Recommendations​

It is important for the development of a good project to organize the different components of the work, for this reason it is recommended to generate folders that have similar content, some examples are:

  • Components folder, where the necessary components are stored.
  • Styles folder, where the project styles are stored, for example the .css files.
  • Assets folder, where the application static resources such as images are stored.

Remember to change the references once your project is ordered and not make changes, unless it is really necessary, in the index.js

JavaScript Standards​

It is important to follow the JavaScript standards, it is recommended to use the ESLint library to help you follow these JavaScript standards.

Virtual DOM​

Document Object Model for Document Representation (Document Object Model) is essentially a platform interface that provides a standard set of objects to represent HTML, XHTML and XML documents. A standard model on how these objects can be combined, and a standard interface to access and manipulate them.

React realized that updating the full screen is a task that can be costly in performance and time. Then a virtual DOM is created. This virtual DOM object is identical to the JavaScript DOM object.

How does it work?​

  • The entire virtual DOM is updated.
  • Virtual DOM is compared to a version prior to upgrade. React notices which objects have changed.
  • The updated object and only that object is updated in the actual DOM.
  • Changes to the actual DOM cause the screen to change.

This process is known as reconciliation.

Check Versions​

Verify Node js, with these commands you can verify the version and also if they are installed.

$ node -v
#v14.15.2
$ npm -v
#6.14.9

Start the First Application with React​

We are going to create a first application with React where some of React's functionalities will be reflected, in this case you must change "name_of_your_application" to the name you want, to make it easier to read from now on my- app.

$ npx create-react-app "name_of_your_application"

Now you must enter your my-app directory and start your application.

$ cd my-app
$ yarn start

To see your code you must use, duplicating your terminal, the following: 

$ code .

First steps​

Once the code has been opened in your editor, in this case recommended Visual Studio Code, you can navigate until you find inside the src folder the App.js file with a content equal to this:

import logo from './logo.svg';

import './App.css';

function App() {
     return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

You can change the content to the following and make the changes you want as the first steps for your adventure in React. In addition, you can see the changes in your browser, for this you must keep your terminal with the server open.

import { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component{
  render(){
    return (
      <div className="App">
        <p>Hello World</p>
      </div>
    );
  }
}

export default App;

What are Components?​

Components are defined as a single unit of code that will have a specifically assigned responsibility that certain behaviors can be encapsulated in components.

This is an example of a component. Create a new file inside your components folder with the name of header.js and in this way you can use it later. This type of component is no longer used in EOS Costa Rica, however it is important to understand its definition and use.

import React, { Component } from "react";

class Header extends Component{
    render(){
        return(
            <div>
                <h1>Example </h1>
            </div>
        );
    }
}

export default Header;

This component can be used as follows inside the App.js:

import { Component } from 'react';

import './styles/App.css';

import Header from "./components/header" //The import of the component must be added

class App extends Component{
  render(){
    return (
      <div className="App">
        <Header />   /*Component is added*/
      </div>
    );
  }
}

export default App;

Components​

Component Life Cycle​

Higher Order Component (HoC)​

"A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that arises from the compositional nature of React."

For more information on HoC.

Components in EOS Costa Rica​

React uses reusable components for all applications, these components can have several versions, which can generate conflicts when making small changes. Storybook is an opensource tool that is used to create visual components in isolation where the components and their versions can be organized in stories.

EOS Costa Rica uses Storybook EOS Costa Rica for the creation of its components. To use these eoscr-components components we leave you the installation guide in EOS CR Components.

Storybook​

Main Concepts​

Next, we give you a list of elements that are taken from the official React documentation to apply in your project.

What's new in react?​

Hooks​

Hooks are a new feature in React 16.8. These allow you to use the state and other features of React without writing a class.

Hooks are functions that allow you to "hook" React state and lifecycle from functional components. Hooks don't work inside classes they allow you to use React without classes. (We don't recommend rewriting your existing components overnight, but you can start using Hooks on new ones if you want).

It has:

Other types:

This is an example of use, you can replace the code of your App.js to test it. In this example they show the dimensions of the screen even when it is resized.

import React , { useState, useEffect } from "react";

import "./styles/App.css"

const App = () => {
  const [width,setWidth] = useState(window.innerWidth);
  const [height, setHeight]= useState(window.innerHeight);

  const updateDimensions = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }

  useEffect( () => {
    window.addEventListener('resize', updateDimensions);

    return() => {
      window.removeEventListener('resize',updateDimensions);
    }
  }
  )

  return(
    <div className="App">
      Width = {width}
      <br/>
      Height = {height}
    </div>
  );
}

export default App;

Recommended Rules

For more information, visit ReactJs Hooks Intro

React Cleaner with Hooks​

Copyright ® 2023 EDENIA

EOS Costa Rica

Engineering Culture
Open Source Projects
Open Source Guidelines

Community

Meetup
Telegram Channel
GitHub

More

Linkedin
Medium
Twitter