How React works under the hood.
Most of us are familiar with the command npx create-react-app my-app, but what does this do and what really happens when you create a react app using that command. That is what we shall be looking at today in this article.
Definition of some terms
Compilers: These are programs that convert code you write in your code editor into code the browser understands. It could be converted to a completely different language or to a lower version of the same language. eg: Babel.
Bundlers: Programs that combine multiple code files into fewer ones ready for production (to be used by the user) e.g. WebPack, Rollup etc.
JSX: This enables us write HTML code in React.
Components: These are functions that return JSX. They are independent and reusable bits of code.
Creating and Rendering some text in pure JavaScript
Let’s begin with a new HTML file with the following code
<!DOCTYPE html>
<html>
<body>
<div id="myApp"></div>
</body>
</html>Here, we have a div with an id attribute of myApp.
To write Javascript in HTML, we need to use the script tag.
Before the closing body tag, we will insert our script. We can then access the div by using the DOM method, getElementById.
<!DOCTYPE html>
<html>
<body>
<div id="myApp"></div>
<script>
const myApp = document.getElementById("myApp");
</script>
</body>
</html>Inside the div, myApp, Let’s add a new paragraph, insert some text, and render that unto the page.
<!DOCTYPE html>
<html>
<body>
<div id="myApp"></div>
<script>
const myApp = document.getElementById("myApp");
const paragraph = document.createElement("p");
const text = document.createTextNode("Some Dummy Text");
paragraph.appendChild(text);
myApp.appendChild(paragraph);
</script>
</body>
</html>If this file is opened in the browser, we should see a paragraph that says, “Some Dummy Text”.
We have successfully created and rendered some text unto the page with pure Javascript. But take a look at how much code we have to write in order to achieve this. As the app grows, it can become extremely overwhelming and difficult to manage.
This is one thing React seeks to solve. React provides a way of writing these with much fewer lines of code with the use of JSX.
Creating and Rendering some text in React
We have seen how we can display some text with pure Javascript, let’s see how this can be done with React.
First let’s import react CDN scripts into our app from here and we’ll have something like this.
...
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script>
const myApp = document.getElementById("myApp");
...
</script>
...React Scripts tag: Includes the core react library into the project
ReactDOM Script : Includes ReactDOM into the project. ReactDOM is responsible for displaying react created components unto the webpage.
So, similar to pure javascript, react gives us a createElement method which we can use to create DOM nodes.
ReactDOM also provides us with some methods we can use to display items on the page. Using these, we would have something like this;
<body>
<div id="myApp"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script>
const myApp = document.getElementById("myApp");
const paragraph = React.createElement("p", null, "This is a paragraph");
const root = ReactDOM.createRoot(myApp);
root.render(paragraph);
</script>
</body>If the file is opened in the browser, we should see a paragraph that reads “This is a paragraph”.
React allows us the ability to write JSX directly into our code
...
<script>
const myApp = document.getElementById("myApp");
// const paragraph = React.createElement("p", null, "This is a parent");
const root = ReactDOM.createRoot(myApp);
// HTML code writtent directly into the render method
root.render(<p>This is a test paragraph</p>);
</script>
...But at this point, if you go to the browser, nothing shows. If you open up the developer console, an error message will be thrown
This is due to the browser’s inability to recognize JSX.This is where a compiler comes in, to convert this JSX syntax into one that is understood by the browser. The compiler that will be used here is Babel.
We can include the Babel CDN into our application by using the Babel CDN script from here.
<body>
<div id="myApp"></div>
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<!-- babel CDN Script -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const myApp = document.getElementById("myApp");
// const paragraph = React.createElement("p", null, "This is a parent");
const root = ReactDOM.createRoot(myApp);
// HTML code writtent directly into the render method
root.render(<p>This is a test paragraph</p>);
</script>
</body>When working with babel, we need to assign a type of “text/babel” to all the script tags that contain JSX. This tells Babel that this script needs to be compiled.
With this added, we can see the text display on the webpage.
Working with Components in React.
React goes a step further to introduce the concept of components, giving us the ability to create custom HTML-like elements that we can use wherever in our application.
Let’s say we want to create a custom paragraph component that I can use several times in my application, we can do this;
const myApp = document.getElementById("myApp");
//This is the custom component
// This can be given any name you want
function MyCustomComponent() {
return <p>This is a cutom component</p>;
}
const root = ReactDOM.createRoot(myApp);
root.render(<MyCustomComponent />);We have created a component called MyCustomComponent, which is a function that returns some JSX. This component is then mounted in the same way that a standard HTML element would be (with open and closing tags or as a self closing component).
Create React App Project Structure.
When we run npx create-react-app my-app in the terminal, a react template file with a structure similar to what we have below is created.
my-app/
├─ node_modules/
├─ public/
│ ├─ favicon.ico
│ ├─ index.html
│ ├─ robots.txt
├─ src/
│ ├─ app.jsx
│ ├─ index.css
│ ├─ index.js
│ ├─ ...
├─ .gitignore
├─ package.json
├─ README.mdnode_modules: a directory created by NPM (Node Package Manager) containing all packages you install locally via package.json.
public: contains default static files (images, favicons, etc) and the index.html file.
src: this contains the main JS files for the application. By default, it contains the index.js file which is the javascript entry point of the app.
.gitignore: contains all files that should be ignored by Git.
package.json: This file contains information about the project, including the name, version, dependencies, scripts.
Index.JS File.
This file contains the following lines of code.
...
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
...Here we have some code similar to what was discussed above (under “Creating and Rendering some text in React”).
We are getting a DOM element with an id of root and passing it as the container argument in the createRoot method, which in turn renders the <App /> component.
The <App /> component is imported from the app.jsx file, which is considered the topmost component in the component tree.
This element with an id of root can be found in our index.html file.
Package.json Scripts
- react-scripts is a package installed by default when our react app is being created and it includes scripts and configuration files used by the app.
Most times according to documentations, it states that after creating the app, run the command npm start, but what happens when you do that?
When you run npm start, we are instructing react-scripts to run the start.js file which is a script file that contains code that bundles (with webPack) our code to run in the browser.
When we run npm build, we are instructing react-scripts to run the build.js file which is a script file that contains code that bundles (with webPack) our code which shall be used in production.
Conclusion
In conclusion, when we run npx create-react-app my-app, all of this functionality comes built into it.
- The compiler is set up to convert the code we write into a format that can be interpreted by the browser.
- ReactDOM is set up to render the code we write into the browser
- Bundler (defined above). The default bundler that comes with it is WebPack.
Thanks for reading so far, hope you got some value from this and would have a better understanding of what happens when next you run npx create-react-app my-app
