Note: These notes are taken from Colt steele’s Modern React Bootcamp course
Create react App
React is a front-end library — you don’t need server-side stuff. You can get react.js and react-dom.js from a CDN. You can transpile JSX in the browser at runtime. But there’s a better way!
Create-React-App is a utility script that:
- Creates a skeleton react project
- Sets it up so that JS files are run through Babel automatically.
- Lets us use super-modern Javascript features/idioms
- Makes testing & deployment much easier.
Installing
Only once: install create-react-app:
1npm install -g create-react-app
Then to create each React project you want:
1create-react-app my-app-name
Starting Your App
1npm start
Webpack
CRA is built on top of “Webpack”, a JS utility that:
- Enables module importing/exporting
- Packages up all CSS/images/JS into a single file for browser
- Dramatically reduces no. of HTTP requests for performance
- Hot reloading: when you change a source file, automatically reloads
- Is very clever and tries to only reload relevant files
- Enables easy testing & deployment
Note : The Webpack Rabbit Hole. Webpack is a powerful tool, and configuring it can be quite complicated. Create React App abstracts away that configuration from you. Learn about webpack here
Modules
CRA uses ES2015 “modules”. This is a newer, standardized version of Node’s require(). You use this to export/import classes/data/functions between JS files
Sample Component
demo/my-app-name/src/App.js
1import React, { Component } from "react"; //
2import logo from "./logo.svg"; //
3import "./App.css"; //
4
5class App extends Component {
6 render() {
7 return (
8 <div className="App">
9 <header className="App-header">
10 <img src={logo} className="App-logo" alt="logo" />
11 <p>
12 Edit <code>src/App.js</code> and save to reload.
13 </p>
14 <p>This React app is INCREDIBLE.</p>
15 </header>
16 </div>
17 );
18 }
19}
20
21export default App; //
Importing “Default” Export
demo/import-export/mystuff.js
1function myFunc() {
2 console.log("Hi");
3}
4
5export default myFunc;
demo/import-export/index.js
1// Must start with dot --- "mystuff" would be a npm module!
2
3import myFunc from "./mystuff";
Importing Non-Default Named Things
demo/import-export/mystuff.js
1function myFunc() {
2 console.log("Hi");
3}
4
5export default myFunc;
demo/import-export/index.js
1import { otherFunc, luckyNumber } from "./mythings";
Importing Both
demo/import-export/both.js
1function mainFunc() {
2 console.log("Ok");
3}
4
5const msg = "Awesome!";
6
7export default mainFunc;
8export { msg };
demo/import-export/index.js
1import mainFunc, { msg } from "./both";
To Default or Not?
Conventionally, default exports are used when there’s a “most likely” thing to exporting. For example, in a React component file, it’s common to have the component be the default export. You never need to make a default export, but it can be helpful to indicate the most important thing in a file.