Are you a React newbie? Did you kick off your React journey with create-react-app? If you did or plan to, then this message is for you. create-react-app generates a boilerplate for you setting up all the things you need to start developing apps on react, but it will take away your attention from learning how to set up a react app manually. I'm here to give you a brief walk around with it.
React is a library that can help you create kickass websites that are responsive and look cool. However, before getting into React, you should have a solid understanding of JavaScript. Imagine driving a car without knowing the traffic signs and signals. Not cool, right?
So, if you're not familiar with JS, then you should learn it first. No biggie, I've got your back. I won't bore you with anything too complicated, just a manual setup and a walk-through of React.
I know you're busy, and your time is precious, but trust me, this is worth your time. Let's get started!
React from a CDN
Let's get started with using React without npm or JSX. You are probably thinking how,
First of all, create yourself a project directory that we can work on -
I've chosen a fancy name. Pick yours
mkdir noBoilerplateYo
cd noBoilerplateYo
that was easy. Now I'm creating an index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No BoilerPlate Yo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Now you are probably wondering why is there a <div id="#root"></div>
well, we are interacting with the DOM through this one. In other words, the React elements and Components we create using React, are rendered inside this div.
You will understand. Just go forward.
Okay to work with React, we need React first of all. lol.
Let's include it in our project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No Boilerplate Yo</title>
</head>
<body>
<div id="root"></div>
<!-- Include the React library CDN -->
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"></script>
</body>
</html>
Okay. I'm not talking about crossorigin here. But I suggest you take a look at it on the web.
So, is that it?
Well, we have included React's core library here. No, But to interact and update the changes to the DOM, we have a special library from react - The react-dom.
Why is it? In simple words, React is platform-independent. Which means we can use it on web, mobile and even desktop applications. They all have one core library react. But to interact with each platform, react provides separate packages and libraries. We are developing a website here, so we will be using react-dom.
let's include that one too.
<body>
<div id="root"></div>
<!-- Include the React library CDN -->
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- Include the react-dom cdn -->
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</body>
wooh, and now our project is ready to run react !!
wait, what does that.development.js in those CDN links mean?
it means that the files are for development purposes.
React also gives us the production versions of these files. they will be optimized for production. We just have to replace the .development.js with .production.js to include them instead of the development version.
We don't need it now, since we are developing the app.
That's it. Now let's dive into creating some elements and render them in React.
we need a space to write the JavaScript for that.
we can use a script tag for that and write them within the index.html file like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<!-- Include the React library CDN -->
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- Include the react-dom cdn -->
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- work with react -->
<script>
const element = React.createElement("h1", {}, "Hello world");
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(element);
</script>
</body>
</html>
Yo, wait there. Don't sneak into what's inside it. I'll explain it to you in a moment.
I don't like writing inline JS, to be honest. So, let's create an index.js file for that, shall we? You are free to copy and paste the content I told you not to sneak into, or just look and type it yourself.
anyway, this is what it will look like.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No Boilerplate Yo</title>
</head>
<body>
<div id="root"></div>
<!-- Include the React library CDN -->
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- Include the react-dom cdn -->
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!--Link our JavaScript here-->
<script src="./index.js"></script>
</body>
</html>
index.js
const element = React.createElement("h1", {}, "Hello World");
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(element);
I'll explain what's in the JS now,
we are creating a React element using
const element = React.createElement("h1",{},"Hello World");
React.createElement() accepts 3 parameters. The tag which the element should have, an object containing attributes and props the element should have and the content to be inserted into the element.
Then we are using the createRoot() method provided by ReactDOM to create a root element where the react elements are to be inserted into the DOM. We are getting the element using the getElementById() method here. And the id is #root here. It can be anything you like, but this is usually the standard.
Oh, but the changes won't be applied to the DOM here, for that we have to call the render() method and provide the react element to be inserted into the DOM.
just like this:
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(element);
and if I open the index.html in the browser now, we will see :
if I inspect the page,
You see that ???
We just rendered our first react element into the browser.
Okay now, What if I want to nest this element inside a parent element? Oh we got solution for that !!
const parent = React.createElement('div',{id:'parent'},element);
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(parent);
You might be wondering what is the need of {id:'parent'} here. Well, it's not required. I just wanted to let you know that this is how we pass attributes and props to element.
Now, if I inspect the page,
see, this is how we do it. We just pass the element we have as the last argument and render the parent.
But what if I have to render multiple children?
const element = React.createElement("h1", {}, "Hello World");
const element2 = React.createElement("p", {}, "Rendered by React");
// pass the children as array
const parent = React.createElement('div',{id:'parent'},[element, element2]);
// Render the component to the DOM
ReactDOM.createRoot(document.getElementById("root")).render(parent);
This is how we do it. We just pass the children in an array
Or just pass them one by one like this:
// pass the children one by one.
const parent = React.createElement('div',{id:'parent'},element,element2);
Take a look at the result:
So, is this how we develop react apps? Well, it's not the prefered way! We can make the development a lot easier and better using JSX: A syntax extension for JS. It allows us to write HTML-like syntax in JavaScript, which allows to write React elements and Components with ease.
// without JSX
const element = React.createElement("h1", {}, "Hello World");
// with JSX
const element = <h1>Hello World</h1>
// nesting with JSX
const parent = <div id='parent'>{element}</div>
See, How easy it is!
Im not diving deep into JSX for now. Note that to make use JSX we will have to use a transpiler like babel. Instead of using the CDN for everything, we will be using Node and npm to develop our application( this is the preferred method to develop react apps ).
Top comments (0)