Day 52: Treehouse Full Stack JavaScript Techdegree

Today I learned more about React and React Components.

These are my notes:

Just about everything in React is a component

Create React App

Developers normally use create react app on the console for developing react applications because it lets you quickly create and run React apps with no configuration. — it sets up your development environment with tools like babel (to compile JSX to JavaScript) and webpack (to bundle and process your JavaScript files and project assets)

Used for developing production-ready apps

Steps:

On the CLI: npx create-react-app <name of the project>

In our case: npx create-react-app scoreboard

Note: npx is a tool that is included with NPM. It makes it easier to install and run packages, especially CLI tools like create-react-app

If we need to use a global package that’s not installed on our computer, running npx would download and execute the package we specify all in one command — without npx, we have to make sure we install create-react-app globally on the machine before we are able to run and create-react-app command.

Also, npx makes sure you’re using the latest version of a package without having to upgrade it each time we’re about to use it.

CDN based approach is not useful in a production environment as soon as we start using JSX.

Separating function components into modules

Modules provides a better way to organize and maintain your code as well as provide scope for your variables functions and classes

The module system allows you to import, export entire modules or parts of a module

Anything we don’t export would not be available to other modules

On app.js

export default App;

On index.js

import App from ‘./components/App’;

That is why we can access the App Component

ReactDOM.render(

<App />,

document.getElementById(‘root’)

);

In react, it is common to think of each component as an independent module.

So, for our app to be truly modular, let’s move each component into their own file.

Let’s create a module for our Header component

Create a Header.js file (make sure it is capitalized to signify that it is a component)

Import React from ‘react’ — since each module has its own scope we ALWAYS have to import React, that way we can use React’s API and JSX

Copy the Header component from App.js

const Header = (props) => {

return (

<header>

<h1>{props.title}</h1>

<span className=”stats”>Players: {props.totalPlayers}</span>

</header>

);

};

Then export so that other modules can use it -

export default Header;

import React from “react”;

const Header = (props) => {

return (

<header>

<h1>{props.title}</h1>

<span className=”stats”>Players: {props.totalPlayers}</span>

</header>

);

};

export default Header;

Then on App.js we have to import Header

import Header from “./Header.js”;

Import will let us pull the Header function from the Header module and into the App module

Next, Player module

import React from “react”;

const Player = (props) => {

return (

<div className=”player”>

<span className=”player-name”>

<button

className=”remove-player”

onClick={() => props.removePlayer(props.id)}

>

</button>

{props.name}

</span>

<Counter />

</div>

);

};

export default Player;

Since Counter is inside player, we have to create a module for counter and import it to player

On player

import React from “react”;

import Counter from “./Counter”;

const Player = (props) => {

return (

<div className=”player”>

<span className=”player-name”>

<button

className=”remove-player”

onClick={() => props.removePlayer(props.id)}

>

</button>

{props.name}

</span>

<Counter />

</div>

);

};

export default Player;

Then on App.js import Player

And now it is all connected

— — -

When working with class components we’ll often see the React import statement written

import React, {Component} from “react” ; — we import React and the Component from the React Package

This is called a named import, and with this we can create a class without extending to React.Component but just saying

import React, { Component } from “react”;

import Header from “./Header.js”;

import Player from “./Player.js”;

class App extends Component {

Before it was:

class App extends React.Component {

import React, { Component } from “react”;

class Counter extends Component {

— — —

To use a global package that is not installed in your computer, you can use npx to download and execute the package you specify, all in one command

Do we need to import React into every module that uses React’s API and JSX? Yes each module has its own scope

— — -