React Boilerplate

Published on : August 17,2022

Hi dev,

Let's see the React boilerplate, which has been created by create-react-app. Whenever you create a new project, you run create-react-app and name of the project.

In the following React boilerplate, there are three folders: node_modules, public and src. In addition, there are .gitignore, README.md, package.json and yarn.lock. Some of you, instead of yarn.lock, you may have package-lock.json.

It is good to know these folders and files.

node_modules - stores all the necessary node packages of the React applications.
Public
- index.html - the only HTML file we have in the entire application
- favicon.ico - an icon file
- manifest.json - is used to make the application a progressive web app
- other images - open graph images(open graph images are images which are visible when a link share on social media)
- robots.txt - information, if the website allows web scraping
src
- App.css, index.css - are different CSS files
- index.js - a file which allows to connect all the components with index.html
- App.js - A file where we usually import most of the presentational components
- serviceWorker.js: is used to add progressive web app features
- setupTests.js - to write testing cases
package.json- List of packages the applications uses
.gitignore - React boilerplate comes with git initiated, and the .gitingore allows files and folders not to be pushed to GitHub
README.md - Markdown file to write documentation
yarn.lock or package-lock.json - a means to lock the version of the package

Now lets remove all the files, which we do not need at the moment, and leave only the files we need right now.

After removing most of the files, the structure of the boilerplate looks like this:

Now lets write code on index.js. First of, we should import React and ReactDOM. React allows us to write JSX and ReactDOM to render the JSX on the DOM. ReactDOM has a render method. Let's use all the JSX elements we created on Day 2. The ReactDOM render method takes two parameters, a JSX or a component and the root.

//index.js
// importing the react and react-dom package

import React from 'react'
import ReactDOM from 'react-dom'

const jsxElement = <h1>This is a JSX element</h1>
const rootElement = document.getElementById('root')

ReactDOM.render(jsxElement, rootElement)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
      rel="stylesheet"
    />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <title>30 Days Of React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

If your application is not running, go to your project folder and run the following command

npm start

If you do not have any bugs, your React app will be launched on the browser.

Let's write more JSX elements and render them on the browser. This expression is a JSX element which is made of h2 HTML element.

const title = <h2>Getting Started React</h2>

Let's add more content to the previous JSX and change the name to header.

const header = (
  <header>
    <h1>Welcome to React</h1>
    <h2>Getting Started React</h2>
    <h3>JavaScript Library</h3>
  </header>
)

Let's render this to the browser, in order to do so, we need ReactDOM.

//index.js
// importing the react and react-dom package

import React from 'react'
import ReactDOM from 'react-dom'

const header = (
  <header>
    <h1>Welcome to React</h1>
    <h2>Getting Started React</h2>
    <h3>JavaScript Library</h3>
    <p>Praful Sangani</p>
    <small>Oct 2, 2021</small>
  </header>
)
const rootElement = document.getElementById('root')

ReactDOM.render(header, rootElement)

Hope it will will helps you!

Categories : React

Tags : HTML React Js

Praful Sangani

I'm a passionate full-stack developer with expertise in PHP, Laravel, Angular, React Js, Vue, Node, Javascript, JQuery, Codeigniter, and Bootstrap. I enjoy sharing my knowledge by writing tutorials and providing tips to others in the industry. I prioritize consistency and hard work, and I always aim to improve my skills to keep up with the latest advancements. As the owner of Open Code Solution, I'm committed to providing high-quality services to help clients achieve their business goals.