React 101 - part 1: First Steps

#javascript #react #beginners #tutorial

After my Javascript series: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3

I am now ready to begin my React learning journey :)

Click follow if you want to miss nothing. I will publish here on Dev.to what I learn from my React course the day before.

Without further ado here is a summary of my notes for day 1.

What is React?

React is a Javascript library for building user interfaces (frontend application)

React is a library that will allow you to represent an interface using elements that will be able to evolve according to changes in the state of your application.

React allows to separate things with 2 distinct elements:

The state, which will allow the state of the application to be stored and which can be modified following various user interactions.

The render () function, which renders a new version of the interface based on the state of the application.

We no longer deal with changes in the DOM. Whenever the state of our application changes, React will restart the render () function and apply the changes at the DOM level.

React First Steps

To start learning the quickest as possible for now we will only include the React and React DOM library CDN links. Later I will learn how to start a real production React app the right way.

I will also include a third file (app.js) and it will be our local Javascript/React code.

The defer attribute will defer the loading of those scripts after the page html is loaded.

I will also put a div with the id="app" inside the body. That div will be the container of our React App.

index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js" defer></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" defer></script>
    <script src="app.js" defer></script>
</head> 
<body>
    <div id="app">

    </div>
</body>
</html>

For my first step I will create a Hello World h1 tag and link the element to the app container

app.js



// Create a new React element
const title = React.createElement('h1', {}, 'Hello World')
// Render this element in the div id="app"
ReactDOM.render(title, document.querySelector('#app'))

Our first React app... I hope we can do better ;-)

This example (React.createElement) is not what we will use in the real world. We use this method only to show how React manipulate the DOM in the background.

In a real React app we will use the JSX syntax. The JSX syntax will allow to do the same thing but with a different syntax.

What is JSX?

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.

JSX converts HTML tags into react elements.

You are not required to use JSX, but JSX makes it easier to write React applications.

JSX cannot be read by browser so before running JSX need to be converted to standard javascript.

Babel is a tool that do exactly that. It can take any JSX script and convert it in standard javascript readable by any browser.

To quickly install Babel you can add a link to Babel CDN in your index.html head. Later we will learn how to install all those tools in your local machine.



<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Here a example of JSX:



const title = <h1>Hello World</h1>
ReactDOM.render(title, document.querySelector('#app'))

We can push the challenge a bit further and display a variable name within our JSX



const name = 'Mike'

// To use the variable name use the syntax {variableName}
function render() {
  const title = <h1>
    Hello {name}
  </h1>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()

Actually, we can use any js expression inside { }



function render() {
  const title = <h1>
    Hello {name.toUpperCase()}
  </h1>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()

Any javascript expression is valid. Even loop. For example items.map will create a list of items



const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
function render() {
  const title = 
  <div>
    <ul>
      {items.map((item) => <li>{item}</li>)}
    </ul>
  </div>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()

If later we want to reference this list. For example remove an item, React will need a way to identify uniquely each list items. For that reason when we use map we set reference key



const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
function render() {
  const title = 
  <div>
    <ul>
      {items.map((item, key) => <li key={key}>{item}</li>)}
    </ul>
  </div>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()