Learning React / Part 2: starting a project and using components and props

create-react-app is everything that you need to start a project. You will get a bunch of files including some code and configuration to be able to deploy your app, including a server in development mode to see how is going your application in the browser.

To run create-react-app you will need to install node. Node is a technology non-related with React but is a runtime for JS to allow to run JS code outside of the browser.

brew install node

You can install create-react-app executing:

npm install -g create-react-app

And start the project with:

npx create-react-app [app-name]

You can start the server and see in localhost:3000 your app executing:

npm start

We’re going to develop a simple UI to show how components work together and how props work in React.

At this point and after initializing your application with create-react-app, you must know some React concepts before continuing:

• In the application structure, index.js is the entry point to the app.
• In your package.json you can see react-dom and react. Both are the React library split into two parts.
• The public folder has the index.html and it’s the single HTML file of the app, so the browser only will have this file and JS(React) will modify whatever.
• JSX is a special syntax invented for React to enable HTML in js files. When you write JSX there is a transformation under the hook, so when you open the elements in the browser’s inspector you won’t see the JSX code, else the transformation result.
• The convention is to define any .js file with camelcase (ex: MyFirstComponent.js).
• You can create your custom structure of folders under the folder src. Creating a folder called ‘components’ is a convention.
• Each component in react is just a JS function that returns JSX converted.

Deeper explanations

Now we’re going to explain some concepts with some pieces of code.

• React needs that each custom component must start with a capital letter. It’s the way that React detects that is not a regular HTML element along JSX:

// App.js
function App() {
  return (
    <div>
      <CustomComponent></CustomComponent>
    </div>
  )
}

• Each component must return only one HTML tag that wraps everything inside.

// This JSX return is wrong
function ExpenseItem(){
  return (
    <div>Date</div>
    <div>Name</div>
  )
}
// It's mandatory return only one tag
function ExpenseItem(){
  return (
    <div id="wrapper">
      <div>Date</div>
      <div>Name</div>
    </div>
  )
}

• About JSX you have to take into account that it seems HTML but it’s not. Most of the syntax is the same, but there are some exceptions. For example, class is a reserved word in JS and was converted to className.

function Item(){
  return (
    <div className="css">
    </div>
  )
}

• You can execute JS code inside the JSX using brackets {}.

function Item(){
  return (
    <div>{Math.random()}</div>
  )
}

• Or you can reference variables inside JSX using brackets {}.

function Item(){
  const title = 'Title'
  return (
    <div>{title}</div>
  )
}

• JSX only accept values, not JS objects. For example, if I want to print a date object, we need to transform it.

const date = new Date(2021, 11, 20)
{date.toISOString}

• In older React versions, you needed to import React in each JS file with JSX. Now is not necessary and under the hook whatever in your main function, that in fact is the file where you import React, will be considered JSX and transformed.
  Anyway is good to understand this because in the JSX behind the scenes React call the method ‘createElement’ that receive three params to generate the output in HTML and the use of this method can be present in old projects with old React versions, so you need to understand this to work with legacy code.

// if we want to accomplish this HTML:
// <div class='my-css-class'><h1>Title</h1></div>
// We can do it using React methods:
React.createElement(
  'div', 
  {class: 'my-css-class'}, 
  React.createElement('h1', {}, 'Title')
)
// Remember that you can use the easier JSX to accomplish the same:
return(<div className='my-css-class'><h1>Title</h1></div>)

Application demo using props and components

You can find in the following gist different files separated by comments. You can create all of them in your project and check how work together.

Maybe at this point, if you’re going to take a look at the code and try to do it by yourself you will want some tips to debug the code. So, here are the different options:

• Breakpoints in the browser. Open the inspector, select source and insert a breakpoint in the file that you want.
• Use console.log() in any place of your code to print any value. Of course, is not a clean way, but maybe is enough to solve some issues.
• Install the react developer tools plugin. With this plugin, you can see the structure of your components. It’s very useful.

— — —
Next chapter: https://medium.com/@antoniopr.apr/learning-react-part-3-states-a07f007ebfc8
Repo: https://github.com/antprt/learning-react