Start React

The background I made a decision to write this theme is that, I just have started learning React by myself, and wanted to organize the fundamental and basic knowledges about React. I gathered and arranged information.

What is React?

React is Javascript library for building interactive user interfaces (UIs) and originally released by Facebook in 2013. Unfortunately, React is often said to be not easy and not beginner friendly because this language was not created for beginners.

On the condition of learning React, it’s necessary for you to know how to code HTML, CSS and Javascript at least.

Why Node.js?

It is inevitable to mention about Node.js.

Node.js is for backend development... Why should you install about Node.js when you learn React?

Javascript is a language originally designed to run in a browser and it can only run in a browser. In a nutshell, Node.js is a software that allows you to run Javascript on a PC terminal. So it allows you to use Javascript like a server side language, just like Ruby and Python.

If you develop a large scale application using React, you would need to use third-party libraries or packages. Those are depending each other with specific versions. Node Package Manager(npm) helps to control them. npm is originally a package management system for Node.js but it is also used for supplying packaged for frontend development. There are other reasons to use Node but this is the most important one.

Install Node.js

There are some ways to install Node.js.

• Homebrew for Mac
• winget for Windows
• version manager (nvm, nodenv etc.)

If you need to have different versions to coexist in different projects, it is better to use version manager.

Create a project

There are some kind of toolchains that allow you to do tasks below:

• Scaling to many files and components
• Using third-party libraries from npm
• Detecting common mistakes early
• Live-editing CSS and JS in development
• Optimizing the output for production

If you have not experienced those problems below or not familiar with Javascript tools, it also a way to add React as a plain <script> tag on an HTML page.

CRA

CRA (Create React App) is one of those toolchains. It is good to use if you are learning React or creating a new single-page app.

create-react-app

This command command will generate a skeleton of the application using the specified template and install the latest versions of the following three packages

• react : a package for React itself
• react-dom : a renderer package that abstracts the DOM so that it can be manipulated by React
• react-script : simply put, a package that takes all the “magic” out of CRA

CRA is a complete tool that can be used by beginners as well as advanced users.

“Hello World!” with Create React App

$ npx create-react-app hello-world --template typescript

After you run above command at random directory, you can see a message below.

We suggest that you begin by typing:
cd hello-world
yarn start
Happy hacking!

As it is written, you need to go to the hello- world/ directory and run yarn start. By default, an HTTP server is launched on port 3000, where the application runs, and at the same time, the user’s browser is opened to display the screen.

When you open src/index.html file, you will see codes below

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import reportWebVitals from ‘./reportWebVitals’;
ReactDOM.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>,
document.getElementById(‘root’)
);

document.getElementById(‘root’) , which is second argument to ReactDOM.render(), corresponds to <div id=”root”></div> in the index.html file. This render method redraws the React component passed in the first argument into the DOM and overwrites the HTML element specified in the second argument.

Components?

Every application made with React are made up of a combination of “components”. As part of its naming convention, the component name is a Pascal case that always starts with a capital letter. Which means, App is also a component. import App from ‘./App’; in the fourth line is importing the App component from the App.tsx file.

App.tsx file

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

In React, the implementation of a component is defined by a function or a class. Here, App component is defined with a function. This file looks HTML but it’s really not. It is “JSX” file. “JSX” is a syntax extension for JavaScript that will eventually be compiled into JavaScript.

Hello world!

Edit <code>src/App.tsx</code> and save to reload.

Erase the code above and change into below:

Hello, World!

If you save the file, your browser automatically reload and you can see “Hello World!

If you push command + option + U and look the html source on the browser, you can see the script file loading tag that was not in public/index.html.

<script src=”/static/js/main.chunk.js”></script>

This is App component after compilation. In those projects created with CRA, source code files are compiled by Babel, the compiler, and put together in the appropriate form by webpack, the bunder, and how they are associated with each other. You may not think about those things during development, but it’s good to know in case you run into trouble when deploying production.

Yarn command

Yarn command is improved version of the npm command by Facebook. Since Create React App is also from Facebook, the generated project uses Yarn by default if Yarn is installed globally.

yarn (install) 

This command install all dependency packages according to the description in package.json that exists in the project root.

Reference List

Web pages

React - A JavaScript library for building user interfaces

Tutorial: Intro to React - React

React入門！！の前に知っておきたいNode.jsとJavaScriptの知識 - Qiita

Create a New React App - React

Book

• りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】