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.

Why Node.js?

It is inevitable to mention about Node.js.

Install Node.js

There are some ways to install Node.js.

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

Create a project

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

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

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
  • 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

“Hello World!” with Create React App

$ npx create-react-app hello-world --template typescript
We suggest that you begin by typing:cd hello-world
yarn start
Happy hacking!
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’));

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><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);}export default App;

Hello world!

Edit <code>src/App.tsx</code> and save to reload.
Hello, World!
<script src=”/static/js/main.chunk.js”></script>

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)