React.JS

Question 1

What is the Elevator Pitch for REACT?

Answer 1

React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. It provides the means to declaratively define and divide a UI into UI components (aka React components) made up of HTML like nodes (aka React nodes).

It uses the Virtual DOM which makes it faster because only the parts of the page that changed are re-rendered.

Maintained by FB, really popular and created to frequently update the UI simpler.

Question 2

What is Node.js and why is it required for React?

Answer 2

You don’t need Node.js. React is a front-end framework that renders views in the browser. Node.js is a tool that allows you to run JavaScript outside a browser. Like on the server environment.

Formally: Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/.O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the larges ecosystem of open source libraries in the world.

npm is the Node Package Manager which comes with Node. It is used to install dependencies like Yarn and you can install react with this as well.

Question 3

What is Yarn used for?

Answer 3

Yarn is like NPM, its used to install packages and dependencies. YARN was created by Facebook to address shortcomings of NPM, but NPM has since been upgraded to match Yarn. They are competing for the same market.

Question 4

What is JSX?

Answer 4

JSX is Javascript XML.

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

https://www.reactenlightenment.com/react-jsx/5.1.html

Question 5

Why does React use JSX?

Answer 5

JSX is a separate thing from React itself. JSX does not attempt to comply with any XML or HTML specifications. JSX is designed as an ECMAScript feature and the similarity to XML/HTML is only at the surface (i.e., it looks like XML/HTML so you can just write something familiar)

From the official documentation on React - JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. It looks like

const element = < h 1 >Hello, world! < / h1 >;

JSX allows you to write html in your javascript. You can create components in react to mix javascript and ui components. Think of it like MVC’s html and c# mixture.

React was not intended to be used in the raw javascript “createElement” method. It was intended to be used in conjunction with jsx’s way of writing.q

You can think of JSX as a shorthand for calling React.createElement().

https://www.reactenlightenment.com/react-jsx/5.1.html

Question 6

What is Babel and why does React use it?

Answer 6

The Babel tool is a subjective selection from the React team for transforming ES* code and JSX syntax to ES5 code.

Since not all browsers support ES6 you may need to transpile your code from ES6 to ES5 so your code will be read by more browsers. Transpiling is also used for CoffeeScript and TypeScript.
Babel does the transpiling in order for your browser to render appropriately. Babel is the most popular transpiler since it supports the most amount of browsers.
Babel was created by Sebastian Mckenzie (worked at fb).
Babel is frequently used with React which was developed by FaceBook

Question 7

Why do you need to include the react.js and react-dom.js libraries?

Answer 7

React.js contains the basic react library. The dom.js is the companion library that allows you to render to the browser or dom. There are other libraries like VR etc..

Question 8

Why does your browser complain about :

var template = < p > This is JSX from app.js < / p >

but not about:

var template = React.createElement(‘p’,null,’This is Javascript’)

Answer 8

The first extract is raw JSX in a script file. The browser is looking for JavaScript, but does not recognize this because it is not valid.

The second example is the React library using a regular java function to create an element. The browser understands regular JavaScript functions like these.

Question 9

What are the parameters in the React.createElement function?

Answer 9

React.createElement(‘p’,null,’This is Javascript’)
First is the tag type.
Second is the attributes (key value list)
Third is the content.

Question 10

What is an example of default template code to get React to display something?

Answer 10

var template = < p >This is JSX from app.js < /p >

var appRoot = document.getElementById(‘app’);

ReactDOM.render(template,appRoot);

Question 11

What are Babel presets?

Answer 11

Babel presets are a combination of plugins you might need. Babel does nothing by itself, you need presets to tell it what language you are using.

The React preset contains like 4 of 5 plugins you need.

The env preset includes the ES* plugins so you can use the latest ES functions.
z
If you don’t tell Babel that you need to use react and ec2015 it will give you an error.

The React preset allows you to use JSX in your code…

Question 12

So, how do you actually work with React, Yarn, Babel and ES2015?

Answer 12

React has code installed in your project.

Yarn needs to be initialised in your project so you need to run yarn init in your root folder for your project to set up your actual project with all the dependencies.

Babel has a CLI tool that is used to build the code for the project and then it gets deployed somewhere and served up with a server to a browser.

Question 13

What is Yarn Init

Answer 13

“For React there were two dependencies that needed to be installed, env and react. We need to install their code in our project so that the babel CLI can use them.

Yarn Init is like NMP?? It sets your project up to use these dependencies. It ultimately generates the package.json file.”

Question 14

What does package.json do and what does some of the content look like for React?

Answer 14

It’s a list of key value pairs and outlines all the dependencies that the project needs to run. It makes the project easy to install in other places.

Yarn and NPM updates this file with the dependencies that get installed.

For React it will add a Babel-preset for react and the ES* presets.

It creates a "dependencies" structure like:
  "dependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  }

each one of these dependencies will have their own package.json file etc. these are just top level dependencies. All of that goes in the node.modules folder. So there will just be a ton of folders inside the node.modules folder for all the dependencies.

Question 15

What is node modules?

Answer 15

It’s a auto generated folder that gets created based on the dependencies from your package.json dependencies.

Its important to generate this on each machine you run your project, because it will look different each time. It uses the depedencies section in the package.json file to know which dependencies to use.

To reinstall you need to run yarn install on your machine to install modules.

Question 16

what is package.lock.

Answer 16

Its auto generated to lock in specific versions of dependencies.

Question 17

Why did we create a src folder?

Answer 17

src is the folder where we type all the react code that gets compiled by babel. So you need to tell babel where the source is and where the compiled code needs to go.

Question 18

What is app.js in scripts vs src folder?

Answer 18

src is the source code, scripts will be the auto generated code.

Question 19

What are the auto generated files and folders that get created when you init Yarn and install the dependencies for React?

Answer 19

package.json - Contains the basic dependencies that need to be installed for the project to work. Like babel-preset-env and babel-preset-react.

node_modules - auto generated folder with all the dependencies that are installed.

yarn.lock - This lists out all the dependencies listed in node_modules. It is used by Yarn behind the scenes to help resolve the exact same dependencies wherever it runs.

Question 20

What command do you need to set up your project with babel

Answer 20

babel {source location} –out-{some location} –presets=env,react

Question 21

What is let in TypeScript?

Answer 21

The let statement is used to declare a local variable in TypeScript. It is similar to the var keyword, but it has some restriction in scoping in comparison of the var keyword. The let keyword can enhance our code readability and decreases the chance of programming error.