初心者向け React環境設定をする
サーバサイドエンジニアがReact環境を作るまで
まずはじめに
・当方PHP3年位の実力
・Reactってなんだろう？的な感じでいろんなサイトみて作ってみましたレベル
・これからフロント頑張ろうと思っていますレベル
※なので、ご指摘等あれば教えてくださいませm(_ _)m
環境構築
ディレクトリ作成
mkdir react
cd react
どこにでもいいのでまずはディレクトリを作成する
package.json作成
npm init -y
React インストール
npm install --save-dev react react-dom
webpack インストール
npm install --save-dev webpack webpack-cli
Babel インストール
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 babel-preset-react
loaderは7にしないとbuild時にエラーが出たので、指定をする
.babelrc作成
touch .babelrc
.babelrc
{
"presets": [
"react", "es2015"
]
}
webpack.config.js作成
touch webpack.config.js
webpack.config.js
module.exports = {
entry: './app.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
rules: [{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
},
}],
}
}
実際にコードを書く
index.html
<!Document html>
<div id="header"></div>
<div id="content"></div>
app.js
import React from 'react'
import ReactDOM from 'react-dom'
class Header extends React.Component{
render(){
return(
<div>header!</div>
);
}
}
class App extends React.Component{
render(){
return(
<div>Hello World!!</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById("header"))
ReactDOM.render(<App />, document.getElementById("content"))
<script src="./dist/bundle.js"></script>
buildする
npm run build
最後に感想
Build時にエラーが起こり依存関係でライブラリが正常に呼ばれない事象が
結構ハマりました。
Author And Source
この問題について(初心者向け React環境設定をする), 我々は、より多くの情報をここで見つけました https://qiita.com/sakusaka/items/84a872b361e585fb5972著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .