#概要
ReactでHelloWorldするまでの簡単な手順をまとめたいと思います!
とりあえずReactを触ってみたい...という方必見です...
まずはReactのことを知りたい人はこちらから
ReactでHello Worldをする前に...
#Node.jsをインストールする
Node.jsにアクセスしましょう。(2019/04/12現在)
LTS版はLong Term Supportの略で長期間サポートを受けられるversionです。最新版はサポート期間は短いですが、最新の機能を利用できるversionです。ちなみに私は以前に導入したv11.9.0を使っています。
#create-react-appをインストールする
yarn global add create-react-app
create-react-app
コマンドはFacebook(React.js開発元)が公開している、React.jsアプリを素早く作るためのコマンドラインツールです。詳しくはこの記事が参考になると思います。
##yarnとは
FacebookとExponent、Google、Tildeとの共同チームによって生まれた新しいパッケージマネージャーです!
導入方法はこちらの記事へ
#create-react-appコマンドを実行する
create-react-app ディレクトリ名
![スクリーンショット 2019-04-12 22.43.28.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F343290%2F4776e68a-2c56-e5eb-d226-244f2c051efd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9f8f92aaa19c07c08df59aeec97d4b7c)
#yarn run startコマンドを実行する
yarn run start
このコマンドを入力するとhttp://localhost:3000
でこのような画面が表示されるはずです!
#src/App.jsのコードを書き換える
src/App.jsのなかのpタグを書き換えましょう!
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello Micropig!
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
#リファレンス