Tag Archives: react

Mosh React tutorial (part 1)

ref – https://www.youtube.com/watch?v=Ke90Tje7VS0&t=0s&list=LLJEwHxS-Vsf-N8xSFHeMirw&index=4

Set up

Creating 1st app

EPCNSZXW0324:Desktop rickytsao$ create-react-app mosh-react-tut

Creating a new React app in /Users/rickytsao/Desktop/mosh-react-tut.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts…

> fsevents@1.2.4 install /Users/rickytsao/Desktop/mosh-react-tut/node_modules/fsevents
> node install

[fsevents] Success: “/Users/rickytsao/Desktop/mosh-react-tut/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node” is installed via remote
+ react-scripts@2.1.3
+ react-dom@16.7.0
+ react@16.7.0
added 1991 packages from 684 contributors and audited 35736 packages in 139.086s
found 0 vulnerabilities

Initialized a git repository.

Success! Created mosh-react-tut at /Users/rickytsao/Desktop/mosh-react-tut
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd mosh-react-tut
npm start

Happy hacking!
EPCNSZXW0324:Desktop rickytsao$

will install…

Development Server
Webpack
Babel
…other tools
etc

Now we have fully working react app..

> cd mosh-react-tut
> npm start

The app would start.

JSX (javscript xml)

– describe what UI will look like
– Babel takes JXS file, convert it to plain javascript code that browsers can understand.

Takes JXS file

convert it to javascript code:

– Babel compiles the JXS file, compile it to React Compoennt

ref – babeljs.io/repl

Write React code from scratch

in src, delete all files.

In src folder, Add file index.js

babel will compile it down to a call to React.createElement.

This is why we need to import React from top.

That was the output of a JS expression. Its a React Element.
virtual DOM lightweight in memory representation of the DOM.
React Element is part of virtual DOM.

React will then compare virtual DOM vs real DOM. See what has changed, and make changes accordingly.

index.js

Thus, you will get “Hello World” printed with div id root.

In real world, we don’t render elements like this.
We render Components instead.

We also render tree of components, which produce complex markup.

Components

First React Component

Create react app
start it up.

Open up Terminal.

Now, let’s import bootstrap into our app.

> npm i bootstrap@4.1.1

index.js

After saving, when you look at the web page, you’ll see that the font has turned purple.

In our folder view, under src, create a components folder.
Inside add a new file called counter.jsx

Earlier, we have installed Simple React Snippets…let’s use that now.

imrc + tab “import react component”
cc + tab “create class”

counter.jsx

Notice we’re defining the class above, and exporting it below

Now, let’s import Counter into our index.js file

Go back to your web page and you should see the text from Counter component

Embedding Expressions

add button to our Counter component

Note that JSX expressions must have 1 parent element.
JSX get compiled to React.createElement() where its argument is the type of element we want to create, i.e h1.

Thus, we must wrap what we want to display inside of an element, say a div.

counter.jsx

*Multi cursor editing – Select piece of code, press cmd + d, you’ll get multiple cursor, and change all instance in one go.

React Fragment

But let’s say you don’t like to wrap everything inside of an all encompassing element. You just want to put your fragmented code in the return expression.

Now when you look at the webpage, inspect the element, and you won’t see the div anymore.
You’ll see your html code underneath the id=root div.

Using state for dynamic data

First we override the state property in our Counter component.

We assign a property count to it.

Then in our JSX, we use curly braces and put any js expression inside of it.

save the changes, and you’ll see the results on your web page.

In between curly braces, you can write any valid javascript expression.
Hence, let’s implement a method, and use it within our curly braces.

Now, you will be able to see the string Zero when our count is 0.

We can also return JSX expression in our JS code.

JS expression like normal javascript. Pass them to a function, define const, variable…etc.

Setting Attributes

You can put set attributes via your js code as well. Let’s say we add a state property with a string to a url that generates a random image.

We put our ‘imageUrl’ property inside of the curly brace used in JSX and it will work like so:

Now, you’ll see the image in your output.

Remember that JSX gets compiled into React create element functions, which then outputs html. Hence, in our JSX, when we’re working with classes, we cannot just use class as attribute. We use ‘className’.

When we want to work with styles, we can create properties, which hold CSS data, which then changes dynamically. Those changes will be reflected in our JSX

inline styles

If you want to use inline styles, you can do another curly brace, and type in your styles like so:

Rendering Classes dynamically

We calculate bootstrap class name depending on if the count is 0 or not.
Then we render this calculation.

Thus, every time the page gets rendered, bootstrap’s “badge-warning” will be returned when the count is 0

and “badge-primary” will be returned when the count is not zero

Rendering Lists

Let’s render a list of tags.

We add new property of our state object.

JSX is NOT a TEMPLATE ENGINE, no concept of loops.

Its a simple syntax that gets compiled to React elements.

So we do it through javascript expressions via curly braces {…}

However, there is an error in the console.

Warning: Each child in an array or iterator should have a unique “key” prop.

The reason why is because it needs to uniquely identify each item in this list.
If the state of this react element changes, React needs to figure out quickly which element is changed.
And where in the DOM it needs to make changes so that it’s in sync with its virtual DOM.

Whenever you’re using the map method to render items, we need to set the ‘key’ attribute for our JSX.

Conditional Rendering – use curly braces for js expressions

Let’s spit out a message for when the tags are 0.
If there is some items in the tags array, then we simply display it.

JSX is not a templating engine. We do not have if/else. To put conditional rendering, we need to go back to our javascript.

We can add a helper method i.e renderTags().

Another technique is use condition in curly braces

The first js expression is if the boolean evaluates to true, we display a string.
The second js expression executes renderTags function.

First React Component

Create a reac component
then import bootstrap

open a terminal

npm i bootstrap@4.1.1

In file index.js:

Under src folder, create a new folder called components

in components folder, create a file counter.jsx