if react needs importing. as a library. where is it imported from?
i understand it is code that is converted to JS/HTML/CSS via ‘transpiling’?
does it get transpiled within my editor?
Babel is responsible for transpiling your JSX into JavaScript.
If you have react globally installed it simply exist in your system and is accessible in the same way you might import a file from your local folder although react is not local to that directory so it is much longer as you’d need to start all the from your root directory and go down, but luckily you don’t need to do that and you can just say:
import {useState} from 'react'
It is not very important to know where it is however so I would not worry to much about it
1 Like
so it’s in the machine i use? not making calls to other servers?
and transpiled such that users don’t need it in the browser?
Your project folder should have a node_modules folder which holds all of your dependencies so you can look into that if you really want
1 Like
Currently, most JavaScript applications use a piece of software called Node to run everything to do with building the code, taking it from various bits of source code to something that can be deployed in the web.
Using Node is a way for JavaScript to run outside the browser. Node runs code written in JavaScript. Most of the tools needed to build JS applications are also written in JS, and so Node is normally a requirement to run these tools.
Node has a package manager attached to it. A package manager is a piece of software that manages and lets you download bits of code (libraries, frameworks, applications) from some central place (a remote server) to your computer.
The package manager that comes with Node is called NPM, and you normally use that to install React + any associated tools to help you build your app.
A React app can in theory be developed without using Node or installing things via NPM, but the way it is designed makes this difficult. There are instructions on how to work without using build tooling in the React documentation, but you will likely find doing that to be extremely limiting.
Development tools are designed, almost universally, to work with source code.
The actual code that makes up the application you see in the browser needs to be as small in size and as optimised as is possible.
The source code needs to be easy to work with, spread across different files in an easily understandable structure, using nice readable names for things.
These two things are in conflict. So what happens is that you work on source code. Then run it though a set of tools that automatically build the optimised output code.
The reason that React code in particular normally requires tools to turn it into code your browser understand is mainly because it uses something called JSX.
JSX is an extension to JavaScript that lets you write code in JS that looks like this:
<p>Hello</p>
Looks like HTML! But it’s not, it’s JavaScript. Ish. JSX is not an official JavaScript extension, so if you run code that includes JSX you will just get errors, because your browser does not understand what JSX is.
What is required then is a tool that will read JS source code [that includes JSX] and use that to generate code the browser understands.
JSX is just a way of writing functions in a way that looks like HTML. The tools then turn the JSX into the relevant function call. This
<p>Hello</p>
Is just something like this:
jsx("p", { children: "Hello" })
Then React takes the result of that and runs a function that looks like this:
React.createElement("p", null, "Hello")
(this is from memory, apologies if I’ve got the function calls slightly wrong)
2 Likes