Getting Started with React

#beginners #react #javascript #tutorial

So, you have just started to get the hang of JavaScript, HTML, and CSS but now you're wondering what the next logical step is in your Web Developer journey? The answer to that, is React.

React is a JavaScript library created and maintained by Meta.
It is easy to use, fast, and scalable. Developers use it to build complex web applications that can modify data without reloading the page.

We use React for building user interfaces and we split the different UI elements up into what React calls Components.

React's official documentation on components summarizes this nicely:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Really neat huh? Working in different components of your apps is way better than getting lost in a single index.html page in vanilla JavaScript.

Installation

Before getting into React, make sure you have Node installed on your machine. If you are running into issues installing Node, consult the official documentation.

What I recommend is to make sure you are on Node 16 because Node 17 has issues with several JS libraries. You can check in your Terminal with nvm list, the -> lets you know which one is the default.

nvm list

->     v16.13.0
        v17.0.1
         system
16 (-> v16.13.0)

If Node 16 is not the default version, you can install it and set it as the default with the following commands:

nvm install 16
nvm alias default 16
nvm use 16

After getting Node sorted, you can create a React project by running this code in your Terminal:

npx create-react-app my-example-app
cd my-example-app
npm start

After running create-react-app a new browser window will pop up at localhost:3000 with React app created!

Components

Opening my-example-app in your IDE of choice, you will see three directories: ./node_modules, ./public, and ./src we will only be writing our React code in ./src.

Opening ./src/App.js will show you the meat and potatoes of how that React Demo screen is rendering all that fancy stuff on localhost:3000 but for now, I'm going to remove everything from lines 7-20 to make things simple

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

Lets break this down:

We have our function App
We have a className that returns our heading Hello, world!

Pretty simple right? Now let's add a content component in our ./src by making sure the first letter of our component is always capitalized so React knows its a component rather than a regular JS file.

import React from "react";

function Content() {
  return (
      <div className="Content">
          <h1>This is our content!</h1>
          <img src="https://i.redd.it/9odfz0kwy2i21.jpg" alt="meme"/>
      </div>
  )
}

export default Content;

Now when we want to add this content component to our App.js we would do like so:

import Content from './Content';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
      <Content />
    </div>
  );
}

export default App;

Lets explain the things we added here:

import and export allows React to pull the code from Content.js and renders that data in our App.js
Because <Content /> is below our <h1> we told React that we want our Content component rendered below our <h1>

JSX

JSX (aka JavaScript XML) is the special language used to build our component's output. We can actually use JS, HTML and CSS in here! It looks a lot like HTML with some JS here and there but make no mistake JSX is actually closer to JS so here are a few key differences to take note of:

Self-closing tags must end with a slash (example: <img />
Methods and properties written in JSX must be done in camelCase just like regular JS
JS expressions can also be used in JSX! Heres an example:

const name = 'Steven'
const goodbye = <h1>Goodbye, {name}</h1>

Conclusion

This article covered a very basic introduction to React where we haven't even scratched the surface with things like State, Inverse Data Flow, and useEffect() but I hope this article helped you get acquainted with React and some of the first things you will encounter when you first open create-react-app and see why its the most popular frontend JS library.