Starting Out With React

A Beginners Guide to React

It’s nearly the end of 2019, and you think you might finally be ready to get started learning ReactJS. You hear it’s become the most popular front end JavaScript framework. You sit down at your computer, and are ready to give it a go. Starting off, you probably jump straight in with Facebook’s official React tutorial. After that maybe another tutorial on medium. You do some reading here and there, and if you are like me, you end up pretty confused. You hear terms like “props”, “state”, “virtual dom”, “ES6”, “babel”, “webpack”, “higher-order components”, “Redux”, and much more. Soon you realise that learning React is not as easy as you once imagined and either quit or confusedly persevere on.

Does this sound like you? Because this is exactly how I felt when I started learning React. All I wanted to do was set up a simple React app, and I was getting very confused. I thought React had a fairly difficult learning curve, and I was feeling pretty overwhelmed.

I soon realised that React was fairly easy to learn, but the way I went about learning it was difficult. The problem was I didn’t know how to learn it. Firstly, I was relatively new to the world of front end development and I didn’t know what I was doing. I was somewhat familiar with HTML and only used JavaScript a few times. That certainly did not help. There were technologies and information that I should have spent a little more time learning prior to React, that would have lowered the learning curve tremendously.

This is what I would have liked to have known before I began writing a single line of React code:

Prerequisites

First, let’s nail out the basics. Before you start diving into React, you should probably have at least a little experience with each of the following:

- HTML
- CSS
- ES6 JavaScript
- NodeJS + NPM

If you are familiar with each of the above, then learning React is going to be a lot easier for you. React is big on JavaScript and HTML.

What is React

React is a JavaScript library built in 2013 by the Facebook development team. React wanted to make user interfaces more modular (or reusable) and easier to maintain. According to React’s website, it is used to “Build encapsulated components that manage their own state, then compose them to make complex UIs.”

Understand the Basic

React has 4 ideas that are key to getting started learning with React.

1.Components

React apps have component based architectures. Conceptually, components are more like JavaScript Functions.They accept inputs(called “props”) and return React elements describing what should appear on screen. Probably a title, an author’s name, the date published, some text, some photos, like buttons, share buttons, etc. If you were building this blog in React, each of these would most likely be a component.

If you create a component for a share button, you can reuse that component to build other share buttons, or reuse it across multiple different kinds of articles. This is the idea with React. You are building components that then can be used and reused to build bigger components.

2. Props

Props is short for properties. Properties are how you pass information unidirectionally from parent to child components. I like to think of them as property attributes or parameters, since it is conceptually similar to passing arguments into a function, and syntactically similar to HTML attributes. Look at the example used previously. If this were a React component, the props would be what you are passing in as “src”, “alt”, “height”, and “width”. You can also pass in callback functions for the child to execute such as “onClick”.

3. State

Many React components will be stateful components. State is exactly what it sounds like. It’s the internal state of your component. Think of a checkbox on a web page. It can either be checked or unchecked. When the user clicks on the checkbox, it will check the box if it is unchecked, and when the user clicks it again it will uncheck the box. The checkbox is an example of a stateful component. In this example, the internal state of the checkbox would be a boolean that would either be checked true or checked false.

While many components have state, some are stateless. Just because lots of components have state doesn’t mean that every component needs to be stateful. Sometimes it makes sense to omit state from a component. Think of an image html tag.

<img src=”smiley.gif” alt=”Smiley face” height=”42" width=”42">

If this image tag would be an example of a stateless component. You are passing in parameters, but the image tag itself does not have an internal state that it needs to manage itself.

4. React lifecycle

React is much easier to understand if you have a basic idea behind the React component lifecycle. The React lifecycle describes when and how a component should mount, render, update, and unmount in the DOM. React has lifecycle hooks (React component methods) that help you manage state, props, and work with the lifecycle flow.

React component lifecycle has three categories — Mounting, Updating and Unmounting.

1. The render() is the most used lifecycle method.

• It is a pure function.
• You cannot set state in render()

2. The componentDidMount() happens as soon as your component is mounted.

• You can set state here but with caution.

3. The componentDidUpdate() happens as soon as the updating happens.

• You can set state here but with caution.

4. The componentWillUnmount() happens just before the component unmounts and is destroyed.

• This is a good place to cleanup all the data.
• You cannot set state here.

5. The shouldComponentUpdate() can be used rarely.

• It can be called if you need to tell React not to re-render for a certain state or prop change.
• This needs to be used with caution only for certain performance optimizations.

6.The two new lifecycle methods are getDerivedStateFromProps() and getSnapshotBeforeUpdate().

• They need to be used only occasionally.
• Not many examples are out there for these two methods and they are still being discussed and will have more references in the future.

Note: You can read more about React’s lifecycle here

These are only the basics to get started.

Install React

Step1: Go to the terminal and then type,

npx create-react-app app-name

This creates a template of a React application with the name of app-name .

Note: npx is a package runner command included within npm .

Step2: You need to navigate to the directory of this application and then view it in your browser like so:

cd app-name
npm start

If the above operation is successful, your browser will open up to a URL of localhost:3000 . This is the output in the browser

Output in the browser

Now, let’s create a simple Hello World! application with this project.

Hello World! — With React

Within your project directory, go to src/index.js and replace the contents of the file index.js as follows:

index.js code

Code for index.js

• Lines 1 and 2: Importing the react and react-dom libraries. The react module is used to write HTML code within JavaScript(also known as JSX) and react-app is used to execute the render function that will display the contents onto the page.
• Line 4: Render an h1 element in a container which has an id of root.

The output of the code is as follows:

output for index.js

What is ReactDOM.render Method

• The first argument(also known as element) specifies which element do you want to display, for instance h1 , p and so on and so forth.
• The second argument(also known as container) specifies where you want to display the element. In normal convention, it’s a div element with id of 'root' .We use JavaScript DOM API to identify this such element.

Note: div element that has the id of 'root’ you can find the code in HTML file, public/index.html at line 31.

All of the elements we specify in the element argument will be displayed within the div element that has the specified id of root .

Thus, the compiler tells the browser that: the element will be displayed within container

Note: The ReactDOM.render method cannot contain two-parent elements in the first argument.i.e.,

Instead, you can do like below image,

We can specify one single parent element to display 2 child h1 elements on the page.

Functional Components

let’s take html code:

it is not viable to put so many elements within the render method. It is good practice to implement modularity.

Core Idea

function ComponentName() {
     return( 
      <component> </component>
   )
}ReactDOM.render(<ComponentName/> , document.getElementById('root'))

component is the HTML element you want to render, like h1 or p .

Basic Example

As an example, let’s rewrite the function of the Hello World! app.

Basic Functional Components example

Note: Always remember to use return on your elements, otherwise, it will throw an error

To render it,

Use the function within the render method

As you can notice, we can write our function as a JSX tag.

Keep in mind that you should

• use self-closing tags.
• Your function should start with a capital letter.

The code gives the following output

Here also, we cannot have multiple parent elements. Like before, we will use one parent element with two child elements.

In real-life projects, it is common practice to put your functional components within separate files as it makes your program more modular.

Move Functional Components Into Separate Modules

Let’s say your functional component is too complex. As a developer, you want to move your component into another file so that it can be used in your main file. Thus, this makes your program modular. Furthermore, modularity also makes your code look neater.

Core Idea

First, create a functional component in a separate file. Then, we will export it as follows:

export default ComponentName

ComponentName is the name of your functional component.

Example:

Create a new file, called MyApp.js and write your code as follows:

1.import React from 'react';
2.
3.function MyAPP(){
4.  return(
5.   <div>
6.     <h1>Hello</h1>
7.     <ul>
8.      <li> hi</li>
9.     </ul>
10.   </div>
11.);
12.}
13.export default MyApp;

• Line 1 : Import the react module to use JSX tags within our code
• Lines 3–12 : Our functional component
• Line 13 : Export our MyApp function so that it could be used within our index.js file.

Now we can use it in our index.js file like so:

using components located in a different file

• Line 3 : We will use the import keyword to use the MyApp component. Always remember to use relative paths to specify your module. First-party modules like react don’t need relative paths.
• Line 5: Render the MyApp component.

Parent/Child Components

Sometimes, even when writing HTML tags within functions becomes too complex. You cannot write so many lines of code within a function as it seems unreadable.

You can nest your functional components as much as you want

Core Idea

Define basic functional components

function MyFirstComponent() {
    return( 
     <component> </component>
   )
 }

Use it in a second functional component

function MySecondComponent() {
  return (
    <div>
      <MyFirstComponent/>
      <!--further code here -->
    </div>
  )
}

And then render it

ReactDOM.render(<MySecondComponent/> , 
                document.getElementById('root')

Basic Example

As an example, let’s define a footer element in a separate file and then use it.

In a file Footer.js

And then to use it in App.js :

Notice that our Footer element was used in Line 13

Now let’s render App element within index.js

Rendering App element

Recap

1.Hello World App

import React from "react"
import ReactDOM from "react-dom"ReactDOM.render(<h1> Hello World </h1> , document.getElementById('root'))

2.Functional Components

function MyComponent() {
  return(
    <component> 
    </component>
    )
}
ReactDOM.render(<MyComponent/> , 
document.getElementById('root')

3.Functional Components in Another File

• Define a component, MyComponent.js and export

function MyComponent() {
  return(
    <component> </component>
    )
}
export default MyComponent

• Use in another file index.js ,

import React from "react"
import ReactDOM from "react-dom"
import MyComponent from "./MyComponent"ReactDOM.render(<MyComponent/> , document.getElementById('root'))

4.Nested Components

• Define the first component, MyComponent.js and export

function MyComponent() {
  return(
   <component> </component>
    )
}export default MyComponent

• Define the second component, App.js and export

And then use in index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"ReactDOM.render(<App/>, 
document.getElementById('root')

Hopefully this quick overview helps you ease into the world of React and provides a bit of guidance for your initial journey.

Resources :

https://reactjs.org/docs/getting-started.html

Happy learning! Stay home, stay safe.