Learning React.js
Part I
I have been pushing through freecodecamp and have his two walls. One is the Simon Game, and the other is the fact that most of the site is “coming soon” ugh. So I had to find some other tutorials for getting the projects done. The one I am using for React.js is React Training Online taught by Tyler McGinnis.
This is an outline of the first video
I am using a blank c9 workspace and starting from scratch.
- Npm is already on c9 so I just typed
npm initinto the terminal. (I just pressed “enter” all the way through) - Use npm to install react and react DOM. In the terminal, write this:
npm install — save react react-dom( — save saves it into the node_modules and the json file to keep track of all your modules) - Use npm in the terminal to install and save other modules that we are using:
npm install — save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-react. We use save-dev because there are all development modules and nothing that will be needed to actually run the code after production. - Make an app folder and change directories into the app folder:
mkdir app && cd app - Make our main index.html file:
touch index.html - In the index.html file, put a bootstrap CDN in the header and make a div in the body with an id= “app”
- make an index.js file:
touch index.js - create a webpack.config.js file in root:
touch webpack.config.js(webpack takes your code transforms it into anything you tell it to) - Tell webpack what to do inside the webpack.config.js file. Include babel-loader
- Make a babelrc file in root and create an entry for the “react” transformation
- Back in the webpack.config.js file, initiate the html web pack plugin
- update package.json
- run the code with
npm run production - In the index.js file that is in your APP folder, require react and reactdom and create a react component
- in package.json, after “production” add “start”: “webpack-dev-server”
- run
npm run startin terminal, go to local host and check it out!
.babelrc:
{“presets”: [“react”]}
package.json:
{
“name”: “workspace”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“production”: “webpack -p”,
“start”: “webpack-dev-server”
},
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“react”: “¹⁵.4.2”,
“react-dom”: “¹⁵.4.2”
},
“devDependencies”: {
“babel-core”: “⁶.21.0”,
“babel-loader”: “⁶.2.10”,
“babel-preset-react”: “⁶.16.0”,
“html-webpack-plugin”: “².26.0”,
“webpack”: “¹.14.0”,
“webpack-dev-server”: “¹.16.2”
}
}
webpack.config.js:
var HtmlWebpackPlugin = require(‘html-webpack-plugin’)
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + ‘/app/index.html’,
filename: ‘index.html’,
inject: ‘body’
});module.exports = {
entry: [
‘./app/index.js’
],
output: {
path: __dirname + ‘/dist’,
filename: “index_bundle.js”
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: “babel-loader”}
]
},
plugins: [HTMLWebpackPluginConfig]};
Index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title>Github Battle</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type=”text/css” />
</head>
<body>
<div id=”app”</div>
</body>
</html>
index.js:
var React = require(“react”)
var ReactDom = require(“react-dom”)
var HelloWorld = React.createClass({
render: function(){
return( <div>Hello World</div>)
}
})
ReactDom.render(<HelloWorld/>, document.getElementById(‘app’))
