jQuery使ってこなかった自分がついにReact.jsに触れてみるまでの話
HelloWorld編
node.jsをインストール...する前にnvm(https://github.com/nvm-sh/nvm)というnode.jsのバージョン管理をするものをインストールする。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvmでインストールできるnodeのバージョンを確認する
nvm ls-remote
nodeをインストール
nvm install v12.18.3
使うnodeのバージョンを選択
nvm use v12.18.3
npmでyarnをインストール
npm install -g yarn
一瞬にしてプロジェクトが作成できる
create-react-app(https://github.com/facebook/create-react-app)をインストール
yarn global add create-react-app
プロジェクト作成
やり方は3通りあってyarnが無くてもできる。詳しくは
https://github.com/facebook/create-react-app#creating-an-app
yarn create react-app helloworld
とりあえずsrcとpublic内のファイル全部消す
rm helloworld/src/*
rm helloworld/public/*
新規ファイル作成
cd helloworkd/src
touch index.js Hello.js
cd ../public
touch index.html
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
ReactDOM.render(
<div>
<Hello />
</div>,
document.getElementById('root')
);
src/Hello.js
import React from 'react';
function Hello() {
return (
<p>Hello React</p>
);
}
export default Hello;
public/index.html
<!DOCTYPE html>
<html>
<head>
<title>Reactアプリ</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
動かす
yarn run start
役割を果たす部品(コンポーネント)を作って組み合わせていく感じなのかな...?
