~/Home ~/Notes ~/Categories

CRA and Modules

24 August, 2020  ·   React
  https://www.udemy.com/course/modern-react-bootcamp/

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:

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:

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.

Resources

Export Import

 react  javascript  es6
Intro to React↠ ↞Intro to State