Forem: Felipe Galvão

Learn React - Part 4 - Events and forms

Felipe Galvão — Tue, 29 Jan 2019 08:58:23 +0000

Hey folks. In our last post, we talked about components, state and props. In this one, we will talk about events and forms. These two are vital subjects for any web app, and despite not being really difficult in React, they present certain particularities.

Let's start with the same boilerplate that we have been using in all of our previous posts about React. You can find it here: https://github.com/felipegalvao/webpack-4-react-boilerplate

Let's go!

Events

First of all, what are events? Events are used to notify your code that something interesting is happening. This interesting thing can be triggered by the user or by the page itself. For example, a user clicks on a button, or a page finished loading, or the value of a text input changes.

With that out of the way, we can continue. In React, events are kinda similar to basic HTML + Javascript, but with some differences. Let's see the example for the onClick event. While in HTML we would do:

<button href="#" onclick="alert('row was added!');">
  Add row
</button>

html

In React, we have our code inside of curly braces, and it would look like that (with the code for the component):

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './styles/main.scss';

class Index extends Component {
  render() {
    return <div>
      <button onClick={ () => alert('row was added!') }>add row</button>
    </div>;
  }
};

ReactDOM.render(<Index />, document.getElementById("index"));

In React, to run the Javascript code directly within the event, we have to use an arrow function and have the code in this way, so that the code won't run when the component is rendered. It is also possible to call a predefined function. In HTML, we would do this:

<button onclick="handleClick()">
  add row
</button>

In React, we will put the function inside the curly braces. As we already saw in the post about state and props, for the this keyword to work, we need to bind it in the component's constructor:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './styles/main.scss';

class Index extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('row was added!');
  }

  render() {
    return <div>
      <button onClick={ this.handleClick }>add row</button>
    </div>;
  }
};

ReactDOM.render(<Index />, document.getElementById("index"));

If this bothers you, there are two other ways to make it work, as explained on the same post. I, particularly, prefere arrow functions to handle this type of problem.

Well, after writing the code above, you can click on the button and you will get the browser alert. onClick is the most common event for buttons.

Another event that is really common is the onChange event, mostly used with the input element. The onChange event is triggered every time the value of the input changes. Let's see that behavior using the code below:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './styles/main.scss';

class Index extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.state = {currentText: ''}
  }

  handleClick() {
    alert('row was added!');
  }

  handleTextChange(event) {
    this.setState({currentText: event.target.value});
  }

  render() {
    return <div>
      <button onClick={ this.handleClick }>add row</button>
      <input
        type="text"
        placeholder="enter your name here"
        onChange={ this.handleTextChange }
      />
      <p>{ this.state.currentText }</p>
    </div>;
  }
};

ReactDOM.render(<Index />, document.getElementById("index"));

Start typing on the text input and see how the paragraph will change accordingly. Note that, in this case, we have to set a initial state with an empty string. If we don't do this, the paragraph will break when trying to render, as the part of the state that we will try to reference will not be defined.

Forms - controlled components

Having learned about events, let's now talk about forms. Forms, as we already talked about, are a huge part of a great number of web apps, and because of that, it's important to understand how they work on React.

In React, recommended way to work with forms is through the concept called controlled components. In this way of working, we make so that the state is the single source of truth for the values in the form, and we use the events on the elements of the form to keep updating the values on the state. And then you call the function to submit the form on the onSubmit event for the form. For a simple form, with a text input, it would be like this:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './styles/main.scss';

class Index extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.state = {name: ''}
  }

  handleSubmit(event) {
    alert('Your name was sent to our API, ' + this.state.name);
    event.preventDefault();
  }

  handleTextChange(event) {
    this.setState({name: event.target.value});
  }

  render() {
    return <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            placeholder="enter your name here"
            onChange={ this.handleTextChange }
            value={ this.state.currentText }
          />
        </label>
        <input type="submit" value="Send" />
      </form>
    </div>;
  }
};

ReactDOM.render(<Index />, document.getElementById("index"));

Type your name and then click on the Send button, and you will see the alert with the name you typed in the input. Let's add a select element:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './styles/main.scss';

class Index extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleColorSelect = this.handleColorSelect.bind(this);
    this.state = {name: '', favoriteColor: 'blue'}
  }

  handleSubmit(event) {
    alert(
      `Your name is ${this.state.name} and your favorite color is ${this.state.favoriteColor}`
    );
    event.preventDefault();
  }

  handleTextChange(event) {
    this.setState({name: event.target.value});
  }

  handleColorSelect(event) {
    this.setState({favoriteColor: event.target.value});
  }

  render() {
    return <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            placeholder="enter your name here"
            onChange={ this.handleTextChange }
            value={ this.state.currentText }
          />
        </label>
        <select value={this.state.favoriteColor} onChange={this.handleColorSelect}>
          <option value="blue">Blue</option>
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="black">Black</option>
        </select>
        <input type="submit" value="Send" />
      </form>
    </div>;
  }
};

ReactDOM.render(<Index />, document.getElementById("index"));

For the select element, you create each option inside of the element with its own value, and then you pass the event to the function to be called when the select element value is changed. Go on and test it, selecting your favorite color and clicking on the button to submit the form.

To finish this post, let's see how radio buttons work in React. It's pretty similar to the select element. I'll add some div to better organize the code and the layout, and then I'll add the radio buttons:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './styles/main.scss';

class Index extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.handleColorSelect = this.handleColorSelect.bind(this);
    this.handleAnimalSelect = this.handleAnimalSelect.bind(this);
    this.state = {name: '', favoriteColor: 'blue', favoriteAnimal: ''}
  }

  handleSubmit(event) {
    alert(
      `Your name is ${this.state.name}, your favorite color is ${this.state.favoriteColor}` +
      `and your favorite animal is ${this.state.favoriteAnimal}`
    );
    event.preventDefault();
  }

  handleTextChange(event) {
    this.setState({name: event.target.value});
  }

  handleColorSelect(event) {
    this.setState({favoriteColor: event.target.value});
  }

  handleAnimalSelect(event) {
    this.setState({favoriteAnimal: event.target.value});
  }

  render() {
    return <div>
      <p>Insert your name, your favorite color and your favorite animal.</p>
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>
            Name:
            <input
              type="text"
              placeholder="enter your name here"
              onChange={ this.handleTextChange }
              value={ this.state.currentText }
            />
          </label>
        </div>
        <div>
          <select value={this.state.favoriteColor} onChange={this.handleColorSelect}>
            <option value="blue">Blue</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
          </select>
        </div>
        <div>
          <label>
            <input
              type="radio"
              name="react-tips"
              value="dog"
              checked={this.state.favoriteAnimal === "dog"}
              onChange={this.handleAnimalSelect}
            />
            Dog
          </label>
        </div>
        <div>
          <label>
            <input
              type="radio"
              name="react-tips"
              value="cat"
              checked={this.state.favoriteAnimal === "cat"}
              onChange={this.handleAnimalSelect}
            />
            Cat
          </label>
        </div>
        <div>
          <input type="submit" value="Send" />
        </div>
      </form>
    </div>
  }
};

ReactDOM.render(<Index />, document.getElementById("index"));

Note that, for the radio buttons, we define if it's checked or not by comparing it's value with the value that is currently in the state.

And with this, we were able to learn how to work with forms in React, and also how to use the most common form elements.

In "real life" examples, the submit of a form would probably make a request to an API with its values, possibly using Axios, fetch or any other way you prefer. But this is a subject for another post.

Cheers and I hope this is helpful.

Learn React - Part 3 - Components, State and Props

Felipe Galvão — Tue, 25 Sep 2018 13:24:59 +0000

Originally published on my blog

Hey folks. In our last Learn React post, we talked about JSX, the Javascript syntax extension that makes it easier to build interfaces with React, leading to code that seems like a mix of Javascript and HTML.

In this post, we will talk about one of the coolest concepts of React, components. We'll learn how to create components, import them and organize your application's data around these components.

As an example, we will create a simple counter with buttons to increment and decrement. This simple application will allow us to put into practice all the concepts related to components, state and props.

Again, we will use the setup that we worked on the first post of the Learn React series. You can click here to open it, where you can find the Github repository (or you can just click here to access it directly), that you can clone and keep up with this post.

Components

As usual, I'll put the basic code that we will start from here. This is what he have right now, if you cloned the repository indicated:

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return <div>Hello React!</div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

Ok, the first thing that you need to know is that, using the code above, you already created your first component. When we define Index and make it return a JSX element, we use one of the two main ways of creating a component, which is, through a function. Well, let's start to organize our app moving this Index component to it's own file. We will have a main component, where we will import and use the others that we will create in this post. First, inside of the src folder, we will create the components folder, and then, inside of this folder, we will create App.js file. This will be our main component. Note that the name of this file is not a rule, you don't need to call it App.js, this is just a personal preference:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <div>Hello React!</div>;
};

export default App;

Now, let's import this component and use it. In our index.js file, located inside of the src folder, we will remove the Index definition and then import the App component that we just created. We will then, pass it to the render method:

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("index"));

If your Webpack server is not running yet, run yarn run start in your terminal, and then open your browser in http://localhost:8080/ (or wait for it to open automatically, depending on your Webpack setup), and marvel as your application is unchanged. That is expected, since we didn't changed anything yet, we just moved some stuff around, getting one component into it's own file.

Now, let's create a new component, which will be responsible for showing the current count. In this first step, we will define the current count manually, but we will soon learn how to make it dynamic. First, let's create the CountDisplay.js file inside of the components folder. This is the initial code for this file / component:

import React from "react";
import ReactDOM from "react-dom";

const CountDisplay = () => {
  return <p>The count is 0</p>
};

export default CountDisplay;

As we saw in our last post regarding JSX, we can include the value of a variable inside of an element, using curly braces ({}). But what if we could pass the information to this component about the current count value.

Props

Props, an abbreviation for properties is basically data that we pass to the component. It can be a string, a number, even a function. This value can then be used by the component that receives it. First, we pass the data we want to the component, defining it as an attribute, but with the name that we want. Let's pass the currentCount to the CountDisplay component, that is being called in the App.js file. For a numeric value, we pass it inside curly braces. Let's see how it will look like.:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

const App = (props) => {
  return <CountDisplay 
    currentCount={3}
  />;
};

export default App;

Now, let's grab this value inside the component that received it, CountDisplay. For that, the first thing we need to do is include props as an argument to the function that defines the component. Then, we will have access to whatever props we passed to this component. Let's run a console.log to see what the props looks like. the code in the CountDisplay.js file will be like this:

import React from "react";
import ReactDOM from "react-dom";

const CountDisplay = (props) => {
  console.log(props);
  return <p>The count is 0</p>;
};

export default CountDisplay;

As you can notice when you refresh your browser tab and open its console, what we have is an object with the countDisplay prop that we just passed to this component. Let's do a quick test, passing an additional prop to this component, which will be like this:

const App = (props) => {
  return <CountDisplay 
    currentCount={3}
    name="Felipe"
  />;
};

When you refresh your browser tab again, you will see in your browser's console the props object with values for currentCount and name, the props that we passed to this component.

Now we can remove the line where we do the console.log and also the line where we pass the name prop, since we only used it to do a test. Then, we can grab the currentCount value inside of the CountDisplay component and replace it on the paragraph that shows the count. This is what you will have:

import React from "react";
import ReactDOM from "react-dom";

const CountDisplay = (props) => {
  return <p>The count is { props.currentCount }</p>;
};

export default CountDisplay;

Now you must be asking yourself how this helps us, since we just changed the place where we define the current count manually. Well, now we will talk about state.

State

State, just like props, is data to be used by a component. Again, it can be a string, a number, an object. The difference with the state is that it is private for the component and entirely controlled by it. For we to make use of the state, we need to learn the second way to create a component, which is through class. So, we will build class components, instead of the function components that we were building until now. To create a class component, we need to extend the React.Component class. Converting our App.js functional component to a class component, it will be like this:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  render() {
    return (
      <CountDisplay 
        currentCount={3}
      />
    );
  }
}

export default App;

Now, to define the state for this component, we must define a constructor for this class, and inside of it, use this.state to define an object that will have the initial values for the state:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  render() {
    return (
      <CountDisplay 
        currentCount={3}
      />
    );
  }
}

export default App;

I defined the current count to 1 in the state, but notice that we are still passing the fixed value 3 to the component, and so, nothing changes for now. To use the value that is saved in the state, all we need to do is get it with this.state. With this step, the code is as follows:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  render() {
    return (
      <CountDisplay 
        currentCount={this.state.currentCount}
      />
    );
  }
}

export default App;

Now, let's understand how we manipulate the state First, let's create two buttons, one to increment and another one to decrement. Let's use the button element, and your App.js file will be like this:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  render() {
    return (
      <div>
        <button>
          +
        </button>
        <button>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

Now, there is an attribute on the button element called onClick. With this attribute, we can define what happens when a button is clicked. Let's use this attribute to run a function that will update our state, increasing or decreasing the value by 1 depending on the button pressed. First, let's create the class methods to increment and decrement, and then, assign these methods to each button accordingly. To update the state for this component, we use this.setState, where this refers to the component instance We pass to this method an object with the key that we want to change and the new value. In this case, we will use the current count, plus or minus one:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement.bind(this)}>
          +
        </button>
        <button onClick={this.handleDecrement.bind(this)}>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

Notice that, besides putting the function in there, we added bind(this). This is required so that we can use this inside the function. If we don't do that, this will be undefined inside of the function and setState won't work. There are at least 2 other ways to do this. The first one is to do the bind inside of the constructor. This is the result:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};

    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>
          +
        </button>
        <button onClick={this.handleDecrement}>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

And there is still another way, arrow functions. If you use arrow functions, you don't have to bind, since arrow functions already do that automatically. Like this:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleIncrement()}>
          +
        </button>
        <button onClick={() => this.handleDecrement()}>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

All of those ways to bind work, so, feel free to use the one you prefer.

Now our component is working. You can increment and decrement the count using the buttons. But we can refactor a little bit. The idea is for the buttons to be part of their own component. Let's see how we can structure our application to update the state of a component when a function is called on another component.

First, let's create a CounterButtons.js component. Now, let's extract whatever is in the App.js component and pass it to the new component we created. Our CounterButtons.js component will then look like this:

import React from "react";
import ReactDOM from "react-dom";

class CounterButtons extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.handleIncrement()}>
          +
        </button>
        <button onClick={() => this.handleDecrement()}>
          -
        </button>
      </div>
    );
  }
}

export default CounterButtons;

And in our App.js component, we will have the following code:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";
import CounterButtons from "./CounterButtons";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <CounterButtons />
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

If you go to your browser now and refresh, your application will be rendered, but the buttons will not work, as they don't have access to the methods that update the state. What we are going to do is pass functions as props, and call these functions in the new component we created. Let's do this.

First, in the App.js component, let's pass the methods through the props of the CounterButton component. Let's use onIncrement and onDecrement as names for the props The App.js component will be like this:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";
import CounterButtons from "./CounterButtons";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement() {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement() {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <CounterButtons
          onIncrement={this.handleIncrement.bind(this)}
          onDecrement={this.handleDecrement.bind(this)}
        />
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

And now, on the CounterButtons.js file, we change the onClick attribute on the buttons to call the functions passed through the props. To avoid having to bind, I will use arrow functions, so that we can call the functions directly on the onClick definition. This is how the CounterButtons.js component will be:

import React from "react";
import ReactDOM from "react-dom";

class CounterButtons extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.onIncrement()}>
          +
        </button>
        <button onClick={() => this.props.onDecrement()}>
          -
        </button>
      </div>
    );
  }
}

export default CounterButtons;

In this case, where our application is really simple, this seems like adding unnecessary complexity, but in bigger and more complex applications, the separation of concepts and the organization in well defined components is vital.

Conclusion

To summarize what we saw in this post:

There are two ways to create components, functional components and class components
Props are data passed to a component to be used by them
State is data that is private to a component and entirely controller by it
Only class components can use state in React
Besides passing values through props, you can also pass functions

With this post, I hope that I was able to explain the main concepts about components, props and state in React. Any questions, just leave it in the comments.

Cheers

Learn React - Part 2 - Getting to know JSX

Felipe Galvão — Thu, 06 Sep 2018 17:33:36 +0000

Originally published on my blog

In our last post about React, we created a React project using Webpack, with some nice features. Now, we will explore JSX a little bit. JSX is a syntax extension for Javascript that is widely used with React applications.

This post is part of a series of posts where I go through the basics of React:

Simple setup for a React application with Webpack 4 (+ CSS / SASS)
Getting to know JSX

With JSX, you can write Javascript code that is really similar to HTML, making it easy to develop the front-end on your web applications. Let's see some stuff that you can do with JSX.

Let's start with what we had on our last post. Click here to take a look, and you can find the link for the Github repository that you can clone and follow.

Basic features

Just so we are all on the same page, we start with this pretty basic React code:

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return <div>Hello React!</div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

In the code above, when we return the div element inside of the function, we are already using JSX.

The first thing we are going to do is include a variable value in the element that is being returned. The most basic way of doing this is including the name of the variable inside of curly braces ({ }). Let's see:

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

const Index = () => {
  return <div>Hello { name }!</div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

First, we define the name variable, and then include it in the element. When you access your application, you can see that the variable value is inside the div element.

We can also call a pre-defined function:

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

function yellName(nameToYell) {
  return nameToYell.toUpperCase();
}

const Index = () => {
  return <div>Hello { yellName(name) }!</div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

When you refresh your browser, you will notice that the function was called, and all the characters in the name variable are now in upper case.

There are also some limitations

Now, for a change, let's see a limitation in JSX. Try to add a new paragraph right after the div that we currently have. Your code will be like this:

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

function yellName(nameToYell) {
  return nameToYell.toUpperCase();
}

const Index = () => {
  return <div>Hello { yellName(name) }!</div> <p>Here, a paragraph!</p>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

Well, if you refresh your browser window, you will notice that nothing is renderized. If you check the browser's console or the terminal where your Webpack server is being run, you can see the following error message: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag.

The message is pretty clear. When you want to return 2 JSX elements, you need to enclose them in a single tag. The function that defines what will be renderized must always return one external element. Inside of it, you can have as many elements as you want, but there should be only one outer element.

Before React 16 release, the way to handle this was to put all the elements inside a div. Your code would be like this:

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

function yellName(nameToYell) {
  return nameToYell.toUpperCase();
}

const Index = () => {
  return (
    <div>
      <div>Hello { yellName(name) }!</div>
      <p>Here, a paragraph!</p>
    </div>
  );
};

ReactDOM.render(<Index />, document.getElementById("index"));

Now, with the div containing the 2 elements, your application will be renderized and the 2 elements will be shown correctly. Note that you also do not need to have everything in a single line. You can break the element into several lines for better organization and readability.

With React 16 (which you should be using if you followed our last React post), you can return a list of elements. And then, your code will be like this:

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

function yellName(nameToYell) {
  return nameToYell.toUpperCase();
}

const Index = () => {
  return [
    <div>Hello { yellName(name) }!</div>,
    <p>Here, a paragraph!</p>
  ];
};

ReactDOM.render(<Index />, document.getElementById("index"));

Now, when you refresh your browser, you will notice that your application will continue working in the same way. In my opinion, the list is better looking, and you don't have to create HTML elements that wouldn't be there if it wasn't to satisfy React's rule. But feel free to use the way you prefer.

Control and repetition structures

Continuing with the Javascript with HTML, it's possible to use control and repetition structures. Conditional rendering, for example, can be achieved using a simple if block, the one you are used to work with in standard Javascript:

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

function sayHello(name) {
  if (name) {
    return <p>Hello { name }!</p>;
  } else {
    return <p>Hello, nobody</p>;
  }
}

const Index = () => {
  return sayHello(name);
};

ReactDOM.render(<Index />, document.getElementById("index"));

Refresh your browser tab and you will see that the paragraph that is rendered is the first one, that includes the variable we defined. Now, comment the line where we define the name variable and refresh your browser tab. The paragraph that is being renderized now is the second one, with the Hello, nobody message.

Another way of doing conditional rendering is using a ternary operator. It works like this: { condition ? returns this if condition is true : returns this if condition is false }. Let's see the same example that we used above, but using a ternary operator.

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

const Index = () => {
  return (
    <div>
      { name ? <p>Hello { name }!</p> : <p>Hello, nobody</p> }
    </div>
  )
};

ReactDOM.render(<Index />, document.getElementById("index"));

This way is, in my opinion, cleaner and simpler than using an if block, with two pieces of template. You can test doing the same we did previously. Refresh your browser tab, check that the rendered paragraph is the one with the name variable. Then, comment the line where we define it and refresh your browser again.

Also notice that it's also possible to just render something if a condition is true, and not render anything if it's not true. A good example for this would be an error banner. To do this, we can either use the if block without the else part, or use the ternary operator and return null in the last part. Let's see an example with the ternary operator:

import React from "react";
import ReactDOM from "react-dom";

const name = "Felipe";

const Index = () => {
  return (
    <div>
      { name ? <p>Hello { name }!</p> : null }
      <p>How are you?</p>
    </div>
  )
};

ReactDOM.render(<Index />, document.getElementById("index"));

With the code above, both paragraphs will be rendered. However, if you comment the line where the define the name variable, you will see that the paragraph with the Hello will not be shown.

To iterate through a collection of items, instead of using a for loop, where we would need to append the elements to be renderized, we can use map, which already returns the list in the way you need. Let's see how it works:

import React from "react";
import ReactDOM from "react-dom";

const names = ["Felipe", "Jose", "Alfredo"];

const Index = () => {
  return <div>
    {
      names.map((name, count) => {
        return <p key={ count }>Hello, { name }!</p>
      })
    }
  </div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

In a map, you iterate through a collection and whatever you return will be an element of the new list.

Notice that we defined a value for the key on each element. This value is required when we work with groups of elements, so that React can render everything correctly. If you don't define it, your application will render, but you will get a warning and you may experience some weird behavior when using it.

Element Attributes

Another important thing when developing a React application are the attributes for the JSX elements. The most common one is the class attribute, where we define classes for HTML elements so that they can de stylized using CSS. When working with JSX elements, you should use className instead. Another attribute that is pretty common and is different in JSX is for, widely used on labels when working with forms. In JSX, you have to use htmlFor instead. For a detailed view on all the differences in attributes in JSX elements, you can check this link: https://reactjs.org/docs/dom-elements.html#differences-in-attributes

And this is a good start to understand JSX with React. On our next post, we will talk about components and how to better organize your applications.

Feel free to comment and make suggestions.

Learn React - Part 1 - Simple setup for a React application with Webpack 4 (+ CSS / SASS)

Felipe Galvão — Thu, 26 Jul 2018 03:01:12 +0000

Originally published in my blog

Hey folks, how are you doing? In this post, I will show you a quick and simple Webpack 4 setup for a React application.

I'll assume you already have node, npm and the usual suspects installed.

First, let's create our project, running the command npm init -y:

mkdir webpack-4-react
cd webpack-4-react/
npm init -y

The -y flag is just so that you don't have to keep pressing yes to all of that npm questions that it does when initializing your project.

Wepback's installation

Now, let's install Webpack, so that we can use it in our project. I have been using yarn, but npm works just as fine. To summarize, if you are using npm, just change all calls to yarn add x for npm i x, and when you need to install as development dependencies, switch yarn add x -D for npm i x -D.

Continuing, let's add Webpack as a development dependency in our project:

yarn add webpack webpack-cli webpack-dev-server -D

This will install Webpack development packages, and also Webpack's development server, which we can use to serve and test our application locally. This will also update our package.json file, adding these packages as development dependencies.

Creating our files

Now, let's create a basic HTML file with a script tag pointing to the main.js file. This index.html file will be located in the dist folder, as will the main.js file, which will be created by Webpack (so, there's no need to create it manually). This Javascript file will contain our React application code and will be generated by Webpack.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>React and Webpack4</title>
    </head>
    <body>
        <section id="index"></section>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

Now, we should create a src folder, and inside of it, the index.js file, which will be the starting point for our React application. It's structure will be the most simple React code.

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return <div>Hello React!</div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

Now, for that to work, we need to add the initialization scripts to our package.json file. These scripts will make so that Webpack work its magic, transforming our code according to the configuration we'll define in a few minutes. The first script is this one:

"start": "webpack-dev-server --mode development --open",

You will use this script for local development. It will use webpack-dev-server to serve your files locally and it will generate the main.js file that we linked in out HTML file some lines above. The --open flag in the end will make so that Webpack opens your default browser in the local address your application is being served. The other script is this one:

"build": "webpack --mode production"

With this script, Webpack development server will not run, but Webpack will generate your application file ready for production, with all of the code minified and some additional stuff.

Add these two scripts inside of the scripts key. Your package.json file should now be like this:

{
  "name": "webpack-4-react-boilerplate",
  "version": "1.0.0",
  "author": "",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

Webpack configuration

Well, now, if you try to run these comands with yarn run start or yarn run build, they will not work. That is because, for Webpack to understand the React code we created, we need some tools to transpile, that is, transform the React code we wrote in code that can be understood by any browser. Let's do this. First, let's install the essential React packages, React and React DOM.

yarn add react react-dom

Then, we need to install Babel and some loaders to transpile our code. These ones shall be installed as development dependencies:

yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D

After these installations we made, your package.json file should be looking something like this:

{
  "name": "webpack-4-react-boilerplate",
  "version": "1.0.0",
  "author": "",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5"
    "css-loader": "^1.0.1",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  }
}

Now, we need to create a Webpack configuration file, the webpack.config.js file. In my previous post about Webpack, I already talked about it, so I'll be more brief in this one. Your file should be like that:

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "main.js"
  },
  devServer: {
    contentBase: "./dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

It's the most simple Webpack configuration file possible. A brief explanation: in entry, we define the entry file for our application; in output we include the definitions for the Javascript file that will be generated by Webpack; in devServer we define the folder from which the development server will serve the files; and in module we define the general rules for the application, for example, in this case, what will be used to transpile each type of file.

Along with the Webpack configuration file, since we defined babel-loader to transpile our .js files, we need to create the Babel configuration file, that will indicate which loaders should be used by Babel to transpile our code. This file, as well as the Webpack configuration one, should live in the root of your project, and should be named .babelrc. It is also a pretty simple file, that should be like this:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Now, we can run our command to start the development server locally:

yarn run start

If everything went right, you will see your browser opening, and in the screen, your React component with the Hello React message. If you removed the --open flag from the initialization script, you can access the default address for webpack-dev-server, which is http://localhost:8080/

Adding CSS

To add CSS, we need to do a little more. To transpile CSS files and use them in our React application, we need some more loaders. Since we're adding CSS, let's make use of SASS to have some additional functionality in our style files. First of all, let's install some packages: css-loader, style-loader, sass-loader and finally, node-sass. All of them should be installed as development dependencies:

yarn add css-loader style-loader sass-loader node-sass -D

Now let's add another entry in our webpack configuration file. This entry will tell webpack what it should do with .scss files, which are SASS standard file format. Your webpack.config.js file will now be like this:

module.exports = {
  entry: ["./src/index.js"],
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "main.js"
  },
  devServer: {
    contentBase: "./dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  }
};

Now, you should create your main style file. Inside of src, you can create the styles folder, to better organize your style files. From your main style file, you will be able to import other specific files. So, let's create the /src/styles/main.scss file:

p {
    background-color: teal;
}

Now, inside of you main React file, all you need to do is import the SCSS file with import "./styles/main.scss";. Your index.js will now be like this:

import React from "react";
import ReactDOM from "react-dom";

import "./styles/main.scss";

const Index = () => {
  return (
    <div>
      <p>Hello React!</p>
    </div>
  );
};

ReactDOM.render(<Index />, document.getElementById("index"));

And now you can see how your Hello React message have a different background color.

As I mentioned, you can import other style files inside of the main one. One thing that I like to do is to have separate style files for components. So, for example, I can create a components folder. Inside of that folder, I'll create a _Component.scss. Let's then, create the /src/styles/components/_Component.scss file and include some basic CSS in it:

p {
    color: white;
}

Now, on the main.scss file, all you need to do is import it, just like this:

@import "components/Component";

p {
    background-color: teal;
}

And now, when your browser refreshes, you will notice that the paragraph with your "Hello React" message now have a white font color. The main requirement for importing in .scss files like this is that the file to be imported should have its name starting with _.

And just like this, we have a as simple as possible but pretty complete project with React, Webpack 4 e SASS.

If you want to see the final code, you can access the Github repo clicking here. Feel free to clone it, use it as a boilerplate, whatever.

Hope this React setup is useful. Any questions, just leave it in the comments section.

Cheers!