Getting started with React

As the first of my React blog series this post will be going over some React basics as well as starting up a React application from scratch. Although I started my programming journey learning back-end development through database management and Ruby programming, after learning JavaScript and now React, the React library has quickly become one of my favorites to work with.

So what exactly is React? It is a JavaScript library for building user interfaces(UI) i.e., what the user sees in the browser. React apps run in the browser not the server which gives us a great advantage in web development--rather than having to wait for a server response, changes happen instantaneously.

Types of applications:

• Single Page Application(SPA)

In a single page app, we only perform one call to the server, thereafter everything is managed with JS/React. As the name suggests a single page application is one page that makes up the entire site.

• Multi Page Application(MPA)

In a multi page app, we have multiple pages where each page has the content for a given route resulting in multiple calls to the server.
Think example.com -> example.com/about -> example.com/contact

Single Page Applications are becoming more popular for building websites because of their speed, manageability, and amazing user-experience.

Components

React uses components to build UI. Any website can be broken down into components. Notice the diagram above; you can think of a basic website layout as having a header, sidebar, content, and footer component.

Why use components? Well, we can build our components as contained pieces of code or building blocks for our website. This results in applications that are much easier to maintain and blocks that can easily be re-used when necessary. If we want to change our header, for example, we only have to find and modify that specific piece of code rather than having to search through an entire website worth of code to make a single change.

Setting up a React app

Starting a React application is pretty simple! Here is the GitHub documentation.

In your terminal enter: create-react-app name-of-project 👇

After a successful setup you should see something like this 👇

Upon initialization, you'll notice the following folder structure 👇

Let's take a quick look at this structure:

• package.json: defines dependencies
• node_modules folder: holds all dependencies and sub dependencies
• public/index.html: the only HTML file we will ever have in SPA in which div id=”root” is where we will mount our app
• src/index.js: gives access to root and renders app which is imported from app.js file
• src/app.js: file for the App Component. App Component is the main component in React which acts as a container for all other components

Let's start building!

You can launch your app by running either yarn start or npm start depending on which package manager you have installed.
This is what the default code provide in App.js renders.

Much of the magic will happen inside App.js.
We don't need the default code provided between the <div> tags inside of return. To get an idea of where our data renders from, let's remove everything between the <div> tags in App.js and replace it with our own text. In this case, I simply added "I'm building a React app!" in <h1> tags.

Side note: Looking at the code, it appears a whole lot like HTML. It's not. It's JSX, it is a syntax extension to JavaScript, and it provides syntactic-sugar for the React.createElement() function. I won't go into detail on JSX in this post, so feel free to check out the above link if you're not familiar.

If you switch back to the browser you can see our newly added text is displayed.

Next, we're going to change the App Component from a functional component to a class component. Why? Because we will be introducing state to this component in later posts of this series. I will also be going into more detail on the types of components at that time. What about React Hooks you may ask? I will be writing a separate post on Hooks which will cover this new option, but the use of state in stateful vs stateless components is the established way with a lot of code out there utilizing it and so we will be practicing most demos in that way.

If the demo is difficult to see, here is the refactored code for a class component:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

 render(){
  return (
    <div className="App">
      <h1> I'm building a React app! </h1>
    </div>
  );
 }
}

export default App;

Now let's create a folder named Person which will hold our Person.js file aka Person Component. We're using ES6 arrow function syntax to create this functional component. All this component will do is return a <div>.

import React from 'react';

const Person = () => {

 return (
    <div>
      <p> Hi my name is... </p>
    </div>
  );
}

export default Person;

As I mentioned when reviewing the file structure, the App Component is the main component that acts as a container for all others. In the final example, we are adding the Person Component which we just built inside our <div> in App.js. The syntax is just: <Person />. We also need to make sure we import it at the top of the file: import Person from './Person/Person'. The content in the Person Component will not render to the page unless it is added into the App Component. Once added we see the text "Hi my name is..." displayed on the page.

Conclusion

We covered some basics on getting started with a React application from overview, initializing the application, reviewing the folder structure, and practicing a very basic implementation of component rendering.

Needless to say, there's a lot of concepts to cover when it comes to React and as part of this series, I'm excited to dive into all of them in greater depth throughout the series.

For the time being, I hope that you found this introduction helpful! If you did and would like me to cover a specific topic let me know. I love the challenge of technical writing and testing my understanding of concepts. I enjoy learning and collaboration so let's connect!

Comments

[David Amour]

As someone who has been studying React for just a few weeks now I understood most of this but for someone who hasn't done any React a lot of assumptions are made and things skipped over. A good article though, thanks.

[CiaraMaria]

Thanks for that feedback, David. You know, as I was writing I wondered just that.. so I appreciate the input and will make some edits to clarify!

[David Amour]

Ok sounds good and well done on taking constructive criticism, not everyone can!

[Michael Parkadze]

Great article Ciara, the only thing I have input on while going over the article is regarding the person component. So a minor change that does a huge difference in bigger application is instead of importing the Person.js compoenent as such './Person/Person.js' is changing the name of the component file to index.jsx (as it is a react component and not js code.) and by doing that you can now import the Person component as such './Person'.

I find this to be one of the smaller adjustments you can make in your react workflow that benefits you the most as the developer.